WordPress Quick Tips #2:Embedding HTML in Blog Taglines

tweaker

This tip similar to Tip #1 in that it will help you add HTML styling to parts of your blog that the usual HTML styling doesn’t reach! Last time it was post headings, this time we’re targeting your blog’s tagline.

While it’s perfectly possible to style your blog’s tagline using a CSS stylesheet, that method only allows you to modify the styling of the whole tagline. If you want embolden one word, or italicize one phrase, then you’re out of luck. If you try adding <strong> or <em> tags, they just appear in the tagline. So, what to do?

Well, the solution is a little bit more involved than last time, which is why I’ve designated this article for tweakers as opposed to regular bloggers, but in most cases it only requires a one line change to your theme’s header file to do it.

So, if you’re ready, let’s go…

  1. Login to your blog and go to the Theme Editor — select Design >> Theme Editor from the admin menu.
  2. Look in the list of Template Files on the right of the page for one called Header or header.php and click on it to open it in the editor. (Note: if you can’t find a header file, you will have to look for the file that contains the text bloginfo(‘description’).
  3. Once you have found the correct template file, the first thing you should do, especially if you have never done anything like this before, is make a copy of the template’s contents just in case something goes wrong and you’re not sure how to fix it. The easiest way to do this is to:
    1. Click in the edit window.
    2. Hit Ctrl-A to select all the text in the edit window.
    3. Hit Ctrl-C to copy the text to the clipboard.
    4. Open up a new file in an editor — e.g. Notepad on Windows.
    5. Hit Ctrl-V to paste the file into the editor.
    6. Now, if you make a mess of things, you can always reverse the process and paste the original template back into WordPress.
  4. To add HTML tags to the blog tagline you must find and modify the WordPress function call bloginfo(‘description’). There could be more than one of these in the header template so if you want to change them all, make sure to find all of them.
  5. To enable HTML tags in the blog tagline, change:
    bloginfo('description')

    to

    echo html_entity_decode(get_bloginfo('description'))

    Note: double-check that you have made the change correctly otherwise your blog’s pages may fail to load!

  6. Click on the Update File button to save the modified template.
  7. Now, before you change anything else, make sure your blog page still loads and looks ok. If you see an ugly error message then see below for help.  But if everything looks ok, then it’s time to test your modification.
  8. Go to the General Settings page (Settings >> General) and add some HTML to your blog’s tagline. For example, use <em></em> to italicize, or <strong></strong> for bold.
  9. Save your changes then check out your handiwork. You should see the effect of the HTML styling in your blog’s tagline.

Note: You can also use this technique to style your blog’s title, but there is a major snag.  If you add HTML to your title in the Settings page, you will see the HTML tags in the title bar of your browser, which looks a little ugly.

Okay, so that turned out not to be such a quick tip, but I hope some WordPress users will find it useful.

What to do if you get an error message:

If you get an error message after modifying the header template the it’s likely you made a mistake when you were changing the template. Go back and inspect your changes, make sure you didn’t leave anything out (like a semi-colon or the echo statement) or misspelled something. If you can’t figure it out then paste your backup copy (I hope you made one!) back into the theme editor and try again.

15 thoughts on “WordPress Quick Tips #2:Embedding HTML in Blog Taglines

  1. taiyo

    Possible solution for the blog title:

    with the All-in-one-SEO plugin (http://wordpress.org/extend/plugins/all-in-one-seo-pack/) you can edit the title that appears in the browser (among other features).
    It is possible to erase the by editing the settings in all-in-one-seo.

    In the All-in-one-seo settings (inside of “settings” in admin) remove %blog_title% and replace it with what you want to display in the browser title.

    Not sure if there are any snags with this but I just set it up and it look like it works.

    Reply
  2. sean potter

    Hey , you have a very good blog, its excellent information in its field. You have done a great job, keep doing it for to help, people like Myself.

    Reply
  3. Pet Snakes

    It’s great to see some unique content and a good quality blog for once, actually I would be very interested in doing a link exchange with you.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *