Using the WordPress blogroll/link system to display website badges and buttons in your sidebar

Question of the day: How can I display linked images for other websites and blogs in my sidebar?

Answer: With the Links/Blogroll system already built into WordPress along with a Sidebar Widget! Here’s How:

I’ve seen this question asked many times. Most WordPress users assume that the blogroll/link widget using the integrated links system in WordPress will only display text links so many people use text widgets to paste HTML code for simple image links to other websites. Here is an alternative to the text widget method.

  1. You will need to have a url that points to the image that will be displayed in your sidebar for the image link. Most bloggers prefer that you host these images yourself. You can use the image hosting of your choice so long as the image is accessible via a regular URL. You will just need to know the full URL to the location of the image file.
  2. Next you will add the link to WordPress. From the WordPress 2.5 dashboard you can go to the “Write” tab and then choose the “Link” sub-tab.
  3. Complete the basic link information
    • Name - This is the text that will display if an image is not present for the link
    • Web Address – This is the URL that will be loaded when your link image is clicked.
    • Description – This is designed to give more information about the link. It is not as widely used as the Name but if you plan to create a good links page at any point I suggest including this information.
    • Category – This is important if you want your sidebar widget list to separate different types of links into categoriesAdd Link Basic Options
    • Advanced Options
      • Target - This is where you set whether you would like the link to open in a new window or the same window.
      • Link Relationship – This is an area that I have not explored but I plan to write a future post about the information set here can be used.
        Add Link Advanced Settings
      • Advanced – This is where you set up the image information!
        • Image Address – Enter the full address to the image, which you should have from Step 1
        • RSS Address – Link some of the other option this is not used as widely but entering this gives you future access to this info
        • Notes – You can add notes to yourself here. Want to be able to remember why this link was worth adding, enter the reason here.
        • Rating – Another option that can be used in certain situations, does not display in the standard links widget
          Add Link Advanced Options Cont.
  4. Go to the Design Tab then to the Widgets sub-tab to add the Widget to your sidebar. Click the “Add” Link on the Links Widget on the left side of the screen, Drag the widget to the spot you would like the widget to be on your site and click save.
    Completed Link Widget with Image Link

This is the most basic application of this solution. The Link widget included with WordPress does not allow any modification in terms of which link categories display, which pieces of information to display, or to change the sort order of the links.

Some more flexible Link Widget options:

9 Things to consider before using a new WordPress Theme

If you have been using WordPress you probably know that there are thousands of very nice and freely available themes that you can use to skin your WordPress blog. What you might not realize, though, is that you should take a look under the hood of a theme before you put it into live duty on the blog that you have worked hard to build. Here are some things to take a look at:

  1. Sidebars – Widgets or Hardcoded

    The drag and drop nature of the WordPress Widgets are much easier for the casual blogger to manage but many power users prefer the old fashioned hard coded sidebar system. If the theme you are considering is not widget ready and you would like to use widgets you will need to add the necessary code to activate the widget system. Here are a couple of useful links for making a non-widget theme widget friendly.

  2. Page Navigation Bar Dynamic or Static

    If the Theme you are considering has horizontal navigation links to pages it will be helpful to determine whether the links are coded for specific URLs or if they will be automatically generated based on the pages that you have created for your blog. Changing hard coded links to dynamically created links may require changes to both your CSS Style sheet and your header.php file.

  3. Page Navigation for sub-pages

    If the theme generates the horizontal navigation links for your site automatically you may also want to know how sub pages will be handled. Depending on the way the navigation is coded and how the CSS stylesheet is constructed you may either find your subpages listed on the same level as your top level pages, listed as CSS dropdown menus when hovered over, or completely omitted from the horizontal navigation.

  4. Adsense or other Advertising built in?

    If the theme comes with adsense code already included keep in mind that it’s not going to bring you any income if you don’t change the publisher code to your own information. The way this is handled varies from theme to theme. Some themes will have a file that contains only the publisher code so that the code can be change site-wide easily. Also remember that it is against the Adsense terms of service to display more ads from more than one publisher code on the same page so if you plan to insert your own ads in another way you need to be certain you have either change the code in the hard-coded ads to match or to disable the hard-coded ad spots.

  5. Built in RSS Feed Links in the meta data

    I’ve come across several blogs with problems with the RSS links on their sites. Often, the visible links on the site are correct but the link in the meta data is wrong. Since many people will subscribe to a feed in ways that will utilize this meta data URL instead of the visible feed URL on your site it’s important that this be accurate. The code for this is usually located in the header.php file in your theme. and should look something like this:

    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />

    This code pulls the information for the feed URL from WordPress rather than having it hard coded. Much better, in my opinion.

  6. Tag Support

    Tags, not to be confused with categories, are a great way to organize your content in a variety of different ways. They are also very SEO friendly. WordPress 2.3 introduced integrated support for attaching tags to posts. Many older WordPress themes do not have this option integrated.

  7. Gravatar Comment Support

    With version 2.5 of WordPress came integrated support for Gravatars, centrally accessed avatars that can be displayed accross all Gravatar enabled blogs. Being a new addition to the core of WordPress most themes do not have support for this feature built in.

  8. Theme Creators footer links

    It’s important to know how the theme creator has licensed thier work and what they will and will not allow you to do in terms of modifications and link removal. Nearly all free themes will require that the footer credit links be left exactly as they are in the original theme release. This sometimes includes sponsored links. There are two possible locations in the theme files that the licensing information and limitations can usually be found, either in a readme.txt file, or in the first parte of the style.css file. Be sure to review this information so that you will not find yourself in copyright violation with the theme author.

  9. Funny business in the code

    Most theme authors are honest people sharing their work either for publicity or simply out of generosity. It is always a good idea, though, to check through the code of each file in the theme to catch any potential spam that might be hidden in the code. It probably won’t display on your site but the code could be lurking in the corners. If such code does exist on your site you could, quickly, find yourself banned from search engine results.