Adding a Button

First thing, we need a button. It should be around 125px or 1.25 inches square. Just for demonstration purposes, let’s use, what shall we say? This guy?

Okay. Moving on.

STEP ONE:

To upload your button, log in to your blog. Go to the admin area. And then the [write] > [post] area. At the top of the write-post screen, is [Add media:] and a picture of a box. Click the box.

At the [Upload Media] screen, click on the [Choose Files to Upload] button near the top. Select your file from your computer. WP will upload it to your server for you. Then open another screen. Like this one:

See the arrow on this screen shot? That is the Link URL. Click on that, [select all], [copy].

STEP TWO Now, we move into the coding part of things. But we’ll go slow, and I’ll provide all the code! You just need to have your mouse handy to copy and paste.

First if your theme uses widgets, go to the [Design] >[Widgets] tab. Select your sidebar from the dropdown menu. If there are no dropdowns, then you only have one sidebar. You’re good to go.

#2: Add a text/html widget to your sidebar. Just click on it, and drag it over to the sidebar area. Copy and paste this into the bottom square. Replace the red text with your blog url, name, and image url from step 1.

<a href="http://www.myblog.com" title="Fabulously Me">
<img src="insert url here" style="border:none; text-align:center;" alt="image" />
</a>

#3: in the top square, type a title. Ie: Grab my button!

And that is it!

If you have your sidebars hard-coded (is that like hard-wired? Is that even the right word? I’m famous (in my own mind) for making words up just fyi. Anyhow, the ones with the NOT widgets. Those ones.

#1: At the top of your admin screen, you’ll see the tab [Design]. Click on that, then select [Theme Editor].

#2: Select the name of the theme that you are using from the drop down menu.

#3 Click on the sidebar.php file. There should be a number of sections in there that start with a <li> or

<li class="blah">

<?php code, code, and more code, ;?>

</li>

Somewhere before or after the <li>…</li> sections, insert this:

<a href="<?php bloginfo('url');?>" title="<?php bloginfo('name');?>">
<img src="insert url here" style="border:none; text-align:center;" alt="image" />
</a>

Replace the red text with the image URL that you copied in step 1. That’s it!

Send me a link to have a look! And I’ll respond to questions left here as well.