Ever go to a blog, look around, and wonder what the point of that site is? Many blogs have a title, menu, and articles, but skip an important feature which explains what the site is all about: the tagline!
By “tagline”, I mean a short phrase just below the title of your blog that explains the purpose or mission of your site.
In the Settings->General admin page, WordPress lets you enter a tagline for your site. Frustratingly, many themes don’t utilize it! This is a real crime in my opinion. The tagline is invaluable for users to tell what your site is about!
I looked around for a WordPress plugin that would do this simple task, but didn’t find any. I suspect that is because this functionality depends on the theme. Drop me a line if you find a plugin that does it!
OK, so how do we fix this? First, check your WordPress theme menus to see if there is a provision to display the tagline. That is the best way. If you are not so lucky, here are a few options:
- Include the tagline in the title graphic
If you already have a title graphic, then this is an okay solution, I suppose. I personally don’t like putting text inside of graphics because it’s hard to change, not to mention not visible by search engines. It also won’t re-size well. For these reasons, I eliminated this option.
- Use CSS
You can use the CSS “:after” pseudo-element to add text after the title. However, this won’t let you add styling, so it will be the same size and style as your title, which is not good for a tagline! Another non-starter.
- Use PHP
You can display the tagline by adding one line of code to your theme:
<?php bloginfo('description'); ?>
If you created the theme, this is great. If you’re using a pre-made theme, it is known as “hacking the theme” and this change will be blown away the next time you update it! For that reason, modifying pre-made theme code is not recommended and I eliminated that too.
- Create a Plugin
This is “the right” way to go IF your theme has hooks in the right place. If your theme doesn’t, keep reading.
This is the solution I came up with. It’s not perfect, but works well enough. It is what I use to display the tagline on this site.
// display the tagline
jQuery("h1.sitename").after('<h5>Solutions to improve your website, attract visitors, and make money</h5>');
As I mentioned, you’ll have to customize the CSS selector for your particular site. In my case, I am placing the tagline right after “h1.sitename”. Yours will be different. Needless to say, you’ll also need to customize the tagline text!
Here is a variation for a different theme:
// display tagline
jQuery("#header").append('<div class="clearfloat"></div><h4>Tips and tricks for your life. Save money. Save time. Do it yourself. Have some fun.</h4>');
But, this is the best solution I was able to come up with without hacking the theme or creating a plugin (the hooks weren’t available), and it won’t get blown away the next time you update your theme. Let me know if you know of anything better!
Latest posts by Brian Shim (see all)
- Introduction to the Foundation Framework with Tutorials - September 15, 2014
- Implement Responsive Drop Down Menus that Work on iOS and Android - August 16, 2014
- Disable the “Go” Button on the Android and iOS Virtual Keyboard - July 3, 2014