Wordpress: Complex styled menu through custom fields
Custom fields are an amazing and often overlooked feature of Wordpress. The Wordpress codex example of the use of custom fields is’t very inspiring.
Currently Reading: Calvin and Hobbes
Today's Mood: Jolly and Happy
Knowing what someone was reading while writing a post might be interesting, and of course a knowledge of his mood might help to make sense of his rants but hey, is that all? After reading the Codex I archived custom fields in the “Might mean something but presently seems utterly pointless to me” section of my brain.
I had to realise the usefulness of custom fields later.
davidebenini.it, the professional section of this website, features a styled tab menu.
These tabs link to static pages; more correctly to all the children pages of “Home Page”. These pages’ title are often different from the tab’s label. Thus, “Web Design + Development” links to a page titled “Web Design and Development”. Also, note the different styles of the first and second line of the tab. How to get these tabs from a page dynamically? The answer is, of course, through custom fields.
My main pages feature a couple of custom fields:1
As you see, they correspond to the first and second line of the title. Setting these fields inside each main page, I can choose a tab-specific title, segmented in two lines.
And now to the code.
For long chunks of code I tend to use the functions.php file in the template folder. This file serves to store functions; you can use it to keep your template files clean.
function white_page_menu() {
$menu = "<ul id='nav'>";
$args = array(
'post_type' => 'page',
'numberposts' => 5,
'post_parent' => 10,
'order' => 'ASC',
'orderby' => 'menu_order');
$pageslist = get_posts($args);
foreach ($pageslist as $post) {
if (is_page($post->ID)) {
$menu .= "<li style='display: inline' id='selected'>";
} else {
$menu .= "<li>";
}
$menu .= "<a href='?page_id=$post->ID'>";
$custom_fields = get_post_custom($post->ID);
$first_line_field = $custom_fields['title-first-line'];
foreach ( $first_line_field as $key => $value )
$translated_value= p__($value);
$menu .= "<strong>$translated_value</strong>";
$second_line_field = $custom_fields['title-second-line'];
foreach ( $second_line_field as $key => $value )
$menu .= p__($value);
$menu .="</a></li>" /* Fine menu-tab */;
}
$menu .="</ul>";
echo $menu;
}
Then in my template file I just added:
<ul id='nav'><li><a href='?page_id=11'><strong>Personal</strong>details</a></li><li><a href='?page_id=609'><strong>iPhone/iPad</strong>Design+Code</a></li><li><a href='?page_id=8'><strong>Web Design</strong>+ development</a></li><li><a href='?page_id=22'><strong>Academic</strong>career</a></li><li><a href='?page_id=23'><strong>Traditional</strong>music</a></li></ul>
As you see, my functions calls both title-first-line and title-second-line, and wraps their values into different style tags. This way, if I choose to add another main page to my website, I just have to make it a child of “home-page” and assign it some value to the title-first-line and title-second-line custom fields.
Of course this is just an example of the use of custom fields. You could use them to add a subtitle to you post, or define other specific value that you will call in your template.
Enjoy!
Notes
- I have deleted the extra fields for clarity’s sake. [↩]
2008-07-03 at 4.41 am
You just saved my life. You have no idea how badly I was looking for exactly this tutorial!
Be blessed! -Brian
2008-07-03 at 6.58 am
Hmm.. I jumped the gun a bit. There are a couple of tweaks I’d like to make to this, but am at a loss. Would you be willing to answer a quole of quick questions? If so, just shoot me an e-mail!
Thanks again!
2008-07-03 at 6.59 am
And by “quole” I of course mean it’s non-typo equivalent “couple”
2008-07-03 at 8.10 am
Thanks, it’s nice to get some feedback. Anyway, I’ve just sent you an e-mail, for any further question. Cheers, Davide
2008-08-08 at 11.12 pm
Do you know what the selectors are for this menu to be styled in css. Could you give me an example maybe. thanks for the tutorial I was searching for this effet everywhere. Never really knew the power of custom fields lol
thanks waseem
2008-08-08 at 11.15 pm
also where exactly do you place
the header.php file?
2008-08-12 at 3.34 pm
@ Waseem The header.php files goes inside your theme folder, and is invoked by the get_header(); function. As far as styling is concerned, it’s a bit complicated. That is what I’ll do: I will write a second part of this tutorial about css styling of the menu, to get horizontal tabs; I’ll take a few days, but I’ll hope it’ll be useful.
2008-12-11 at 2.17 pm
Thank you for this information.
2008-12-13 at 3.19 pm
Cool stuff, I was just doing something similar, but your way is so much easier. If you don’t mind, I’d like to ask and see if you can help me out with this scenerio.
So in my post, I’m using custom fields to add a specific type of content (sometimes image or video). To that, I also use the ‘nextpage’ feature in wordpress to break my post into multiple pages. My question, how do I show a different image or video through custom fields if the user visit the 2nd or 3rd page of the same post.
Thanks!!
2009-08-23 at 2.44 pm
The question I have is as follows: on the wordpress pages of http://info-nc.com there is a page that shows a little house icon which we would like to use as home page, then we have a page called home and would like to know how to rid ourselves from having 2 home pages. Can you help? Please guide us if you can reach us at mike@info-nc.com
2009-12-03 at 4.33 pm
Thanks! I will recommend this to all my friends.
2010-10-21 at 9.06 am
[...] designer, and the developer of Startbox, a new framework for WordPress. Brian posted a comment on blog post of mine. He liked what I had written about custom tags, apparently. We exchanged a couple of emails, and we [...]
2010-11-12 at 7.04 am
For some reason my browser doesn?t display this web page correctly? Anyway, it was a seriously fascinating write-up, hold up the excellent operate and that i will be back again for much more
2011-03-11 at 11.01 pm
[...] Wordpress: Complex styled menu through custom fields | Nutsmuggling [...]
2011-10-06 at 1.50 pm
Geez man.. you should realy change colors.. hard to read.. what are you viewing your website on a 50 inch screen ??
2011-12-19 at 4.49 pm
Recently i found the write-up even though I was really building a research upon Aol, searching for something similar and not quite exactly the same… However I’m over happy to be the following, because you actually provide the impression with an topical point of view. I’d alternatively say it really is around discussion… nevertheless I am scared not to allow you to an opponent, ha, ‘, ha… In any case, if you would want to speak in greater detail about it, please reply to my personal remark along with I’m going to make sure to join in order that I’ll be notified and are available back to put much more… Welcoming Yours
2012-01-05 at 8.01 am
These tips really are hence the case
2012-01-05 at 8.06 am
Many thanks for coming up with this content. I became pondering what do you do with the help of your 3-D system