Here’s an interesting one. You might have seen some navigation menus around where the page titles have a second line of text below the title. It’s usually done to show the main page title, and then some sort of sub title or secondary text on a second line under the main page title.
So how can we accomplish this?
Upon first glance, it seems that the logical solution would be to add a line break in the page title to create two lines of text, but if you insert a <br /> tag in the title of your page, will that actually work? Well, yes it will, but it isn’t recommended because it could be problematic with respect to your RSS feed since the tag would likely show up as text. Furthermore, you might not want to include that secondary line as part of your page title anyway.
Add a line break to a page title in your navigation menu in WordPress
Here is a preferred method for doing this. As it turns out, the “Navigation label” field in WordPress menus will accept HTML code. Who knew!? You can read more about How to Use WordPress Navigation Menus in Thesis. Once you have it working on your site, all you do is add your HTML tags to the “Navigation lablel” field for each menu item.
Adding the line break is one way to do it, but I prefer using a <span> tag. You could then target the second line and style it how you wish. Here’s an example of the css you could use:
.custom .menu a span { display:block; font-size:12px; }
If you know of a different or better way of achieving this, let us know in the comments.
Was this post helpful? Consider subscribing to my blog via RSS or
Julie @SavvyEats (9)
Ammar Ali (7)
Kulwant Nagi (7)
Amandeep Singh (6)
anandy (6)
Jim (6)
Dave (5)
{ 4 comments… read them below or add one }
This is very interesting article i have seen. I am new to thesis customization but would love to implement in my site. Thank you very much . One more off beat question. My site is not able to show thumbnails on the front page teaser, but it display the image in the single post. Please Guide me.
I’m not sure what system you’re using to show the teaser thumbnails, but I mostly use WordPress Featured Images for this. If you’re using the built-in Thesis thumbnails then there’s a few things that need to be in place for it to work right. You can do a Google search for this as there’s a few tutorials for it online. You could also check the DIYthemes Thesis User’s Guide. If it helps, here’s how you can do it using the WordPress Featured Image function:
add_theme_support( 'post-thumbnails' ); add_image_size( 'teasers_thumb', 150, 150, true ); function teasers_thumb() { if(has_post_thumbnail()) : the_post_thumbnail( 'teasers_thumb' ); else : endif; } add_action('thesis_hook_before_teaser_headline','teasers_thumb');Of course you’d need to style this how you’d like and also set the thumbnail image size to suit your needs.
Excellent article! I’ve used the <br /> trick before and also a span tag with an inline style in the Thesis Nav Menu. However, your suggestion is so much better than that. Thanks for the article.
And way to go with the html tag posting instructions! That’s totally cool.
Rick Anderson recently posted..WordPress and Thesis as a Complex CMS
Hi Rick, thanks for commenting and good to know that you enjoyed the post.