Live Writer for WordPress Blog Post, Pages and also Sidebar

Microsoft Windows Live Writer is the unsurpassed blogging editor. For WordPress blogs it handles pages as easily as normal posts. Live Writer can also be used to generate the HTML code needed for use in setting up sidebar features.

sidebarThis article explains the technique and procedure for doing so. Here is an image of a sidebar with multiple features, a map, some images and text with hyperlinks. Things that are easily inserted with Live Writer into posts. It works just as easily for use with the WordPress sidebar Text Widget. There are a few peculiarities that have to be carefully observed.

WordPress Text Widgets are used for arbitrary text or HTML. It is the HTML handling that makes them so powerful as most anything can be shown.

Live Writer can be used in its normal graphical interface, wysiwyg (what-you-see-is-what-you-get) to set up the HTML code.

Most sidebars are on the order of 250 pixels wide, it will help if you know the exact size of your sidebar. In Live Writer ignore the margins as they will be for your main area and not the sidebar. Since material in the sidebar will look best when centered, that is what you should use in preparation.

The main caution concerns images. They must be sourced from the web. Since you will not publish this post, Live Writer will not upload the images. So you need to upload all images manually before you set up the sidebar HTML.

Prepare your images

Prepare your images in the exact size that you want them to appear and upload them to the WordPress Media Library. This is a drag-and-drop procedure so it is quite fast and straightforward.

Obtain the file URL for each image. Be sure to get the file URL and not the permalink. See the illustrations below. It might help to just copy the ULRs and paste them into Notepad so they are handy when you are ready to use them.

LW-html-01

LW-html-02

Create the sidebar HTML

Open Live Writer to a blank post – you can name the post anything, but something like “sidebar 1” might be descriptive enough. You will not upload this post, only save it on the local PC.

Sidebar-setup-02Enter the text normally, center the text. When you need an image use Insert > From the web … Enter the image file URL.

Continue and build your sidebar.

Sidebar-setup-01

Note in the illustration above that the social media icons are not centered. If you want images beside each other set the Alignment to Left. Space them with the right or left margin setting so that the sum of the margins and image horizontal dimensions adds up to the width of the sidebar.

Inserting a map

Things get a little tricky when you insert a map. Live Writer lets you size the map image so you can fit it to the sidebar. However, that image is locally generated and stored. It is not uploaded to WordPress, since you will not publish this working post. So you must do a screen capture, clip out the map image, upload it to the WordPress Media Library just like any other image. But, and this is important, you can’t change the generated code to reference that image. Live Writer will overwrite it on every operation. You will need to make the change later.

When you are finished with the setup, click the Source tab (lower left). Select all the source text and copy it. You can store it on Notepad – a good place to make the correction for any map image.

Sidebar-setup-04

In the illustration here the code is selected in the Source view of Live Writer on the right and inserted into the Text Widget in the WordPress dashboard on the left. If you have no corrections to make to the code this is the quick and easy way. If you need to make a correction for a map image here are some additional notes.

Making the image reference correction for a map

Sidebar-setup-05Live Writer will generate an image of the map. The reference in the code needs to be changed to a file URL from the Library.

Find the reference in the code. Look for the section that contains the words “map picture”. Find the text <img src=. Replace everything in the quotes that follow with the file URL. In the illustration the reference generated by Live Writer is partially highlighted. It begins with a dollar sign, $.

Once the correction is made just save the Widget text and take a look at your blog.

Hope all goes well for you!

.:.

© 2012 Ludwig Keck

About these ads

, , , , , , ,

  1. #1 by lilyandtom on April 25, 2013 - 7:50 am

    wow very interesting work around to actual coding! :)

    I used to have a plug-in which allowed me to “paste” any hyperlink and it would automatically have a pop-up to input the text i want into the hyper link…. but since i reinstalled live writer, the plugins dont seem to work, is there anything i need to activate to enable plugins ?

    • #2 by Ludwig on April 25, 2013 - 9:09 pm

      Hello Lily,
      You don’t need a plug-in with Live Writer for hyperlinks. The standard Insert hyperlink dialog lets you put in the URL, the text to be displayed, title, open in same or new window/tab. You can attach a hyperlink to any image. And as the post suggests, if you need HTML code, just set up the item in Live Writer as if it were a word-processor, and get the code on the Source tab.
      Your site looks good!

      • #3 by lilyandtom on April 29, 2013 - 9:41 am

        Hi Ludwig! thanks for replying :) how have you been.

        Before, when i copy a link say http://www.cafeludwig.com and paste onto live writer, it would auto have a small pop up window asking me what to input as the text.

        now i must go in “insert link” instead. if i paste directly, it only pastes the link and the pop up doesn’t show.

        i notice you also have blog on blogspot? i thought you are fan of wordpress!!

      • #4 by Ludwig on April 29, 2013 - 12:39 pm

        Hi Lily, doing ok here. I will have to go back and check older versions of Live Writer (I keep Vista and XP virtual machines, just for such questions). Oh, yes, I have a blog over on Blogger. I am also active on Goggle+. Have to try everything you know.
        Be well!

  1. Adding an interactive map to a WordPress blog sidebar | This 'n That

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 88 other followers

%d bloggers like this: