how to create a sidebar button in a wordpress blog

if you’ve stopped by my blog lately, you might have noticed that i’ve given it a little face lift.

ok…maybe not a facelift exactly… maybe more like a microdermabrasion treatment and an eyebrow wax.  or something like that.

but at any rate, i guess you could say that i’ve freshened things up a bit.  for instance, i really like this new collage approach for a header image.  it’s a nice way to share some of my favorite photos, plus it’s fun to be able to change it around seasonally.

and i’ve also added some new blog buttons on the right-hand side… if you click on any of the images, you will be taken to the blog posts that fall under that topic.

i did this for a couple of reasons.  first of all i think it’s a nice visual representation of the main categories of content that you will find here on my blog.  and the other reason was to keep some of that content from getting lost deep in the bowels of my blog.  because after four years of consistent blogging, there is a lot of content.  a lot of ugly content for sure.  but there is also some good stuff, and that’s what i’m trying to preserve.

so i made myself some sidebar buttons and today i thought i would share with you how i did it.

once again, if you’re not into blogging i know that this kind of stuff can be really boring.  so i totally give you a pass if it’s not your cup of tea.

to start with, a ‘widget’ is a wordpress application for adding information into the sidebars and/or footers of your blog.  they are located in the appearance group in the wordpress dashboard.  widgets are pre-coded css or something (i honestly don’t really even know how it works), and wordpress comes with a wide array of pre-installed widgets – everything from subscriber boxes to calendars to lists of categories.  all you have to do is drag and drop the widget you want into your preferred widget area.

for the purposes of this tutorial, let’s just say that a ‘sidebar button’ is a type of widget – it is an image that directs the reader to content on your blog.  and for the most part, a sidebar button consists of two basic pieces of information – the location of an image and a link to content.

as it turns out, i’m getting ready to create a sidebar button for my 31 day writing challenge starting in october.  so this will be a perfect example of my workflow.  to start with, let’s focus on the image.

sidebar button part one – the image

to create a sidebar button you have to have an image of some sort.  for me, i’ve chosen one of my photographs that i’ve added some word art to.  but honestly the image can be anything – even something as simple as a square with text.  it totally doesn’t matter what it is, just as long as it is in .jpg format.

the next step is to import the image into my wordpress media library.  under the media group click on ‘add new’ and then i will click on ‘select files’ and then path out to the directory where my image is stored.

my image should then appear below the upload area.

then if i click on ‘edit’ i will be taken to the image. and if i click edit again, i will be taken to the edit media page.  here is where you can change some of the basic elements of an image.  the image that i imported was already sized to 400×400 (which is a good size for a blog button) but i could also scale the image here by clicking in the dimensions box, typing in a new value, and letting it adjust the size accordingly.  the main thing i want you to note though, is there in the right hand side – the file URL:  this is the location of my image inside of my website.  and what i do is copy this URL and temporarily paste into notepad (or other text application).

once you’ve finished making changes (if necessary) and copied down your file URL, click save and exit out of the edit media page.

are you still with me?  ok.  great…halfway there.

sidebar button part two – the hyperlink

so in the case of my new blog buttons, all of them function in the same way – you click on the image and they direct you to content in my blog.  but where exactly they point to can vary.

for instance, if you click on the lightroom tutorials image, you will be taken to a landing page…a page i created which contains a thumbnail gallery (thanks barb!) of all of the posts that i have done about lightroom. but if you click on the motherhood image, you will be taken to a list of posts that i have tagged ‘motherhood’.

so the question to ask is, ‘where do i want my blog button to point?’

i think for my upcoming 31 days project, i will do what i did last year which is to create a landing page which will contain links for all of my posts.  so the next thing i need to do is create a new page.  here you can see my new page and the header image i added at the top.

the next thing i will do is uncheck the box in my ‘exclude pages’ plugin.

this way, my landing page does not appear as a clickable page link (about me, archives, blogroll, desktops calendars) underneath my header image.  now that my landing page is basically how i want it, i’ll click on publish.

when i select ‘view page’ i will see my new landing page.  and from the address bar, i will copy that hyperlink and paste into my notepad with the URL from my image.

so now that i have my image and my landing page for my 31 days of posts, i can create my sidebar button.

sidebar button part three – the button

to create my sidebar button, i will go to the widgets option in the appearance section in my wordpress dashboard.  then i will drag the ‘text’ widget into my secondary widget area.

i am going to leave the title blank since i have already included the title in my image.  then in the main text area i am going to type the following code:

the basic format is:   <a href=”{link to content}”><img src=”{link to image}”/></a>

then i click save and voila!  sidebar button!

and when i click on the image, i am directed to the landing page for my 31 day series.  yay!

i know at first glance this probably sounds like alot of work.  but i think that creating little buttons like this is a valuable tool for keeping my most current and quality content accessible…right there on my front page.

for the record, i vow to never create a sidbar button for all the posts in which i reference my cat’s litterbox.  #yourewelcome.

if you have any questions, just leave me a comment or send me an email.  clearly i’m no web-designer, but i’ll give it my best shot. 

now go forth and blog.

love, kelly