wp_list_pages Classes
-
This should be fairly simple but I’ve searched for hours in vein.
I’m trying to do something similar to this http://nettuts.s3.amazonaws.com/196_jquery/index.htm so that I can hide or display groups of pages in a list. To do that I need to assign classes to each of my pages, I’ve tried using the Classy wp_list_pages plugin but that assigns every page with a different class, I need to be able to assign the same class to a group of the links. I also need to be able to assign multiple classes to each list item.
I could hard code it but then I would need to manually change either the CSS or the markup every time I added a new page. Anyone have any ideas to fix this conundrum?
-
Are these Pages or Posts with a category you want to assign your own classes to?
Sorry, should have specified. They are pages, this is for a portfolio site, I use the pages to display my work and also include a blog so can’t use posts to display my work.
Because pages can’t have categories you can give them a custom fields of the the class you want them to have
I did look into that but the codex doesn’t go into how to integrate that into the wp_list_pages and I am not sufficiently versed in php to know how to do that myself.
Any help would be greatly appreciated.
You could do something like this
if you gave a page a custom field (key: class and value: portfolio)<?php $pages = get_pages('meta_key=class&meta_value=portfolio'); if(!empty($pages)){ echo '<ul class="portfolio">'; foreach ($pages as $pagg) { echo '<li>'. $pagg->post_title . '</li>'; echo '<li>'. $pagg->post_content . '</li>'; } echo '</ul>'; } ?>
you can also use get post meta for integrating in your theme.
Okay I’ve had a read through of the meta documentation. Ideally I would like to be able to have a custom field called ‘class’ to which I could add a value of ‘print’ for my print work. Then a bit of script simply turns the
<li><a href="printwork">Print Work</a></li>
into<li class="print"><a href="printwork">Print Work</a></li>
I think it’s possible to get the custom field value using something like
<?php $meta_values = get_post_meta($post_id, $class); ?>
but that only works for getting the field value for a specific page. Is it possible to integrate that somehow with wp_list_pages or something similar? I’m sorry for my lack of knowledge with these issuesYou can get an idea of what I’m trying to do on my website http://wilfswann.co.uk/work/futurism/ the list of work on the left hand side I want to be sortable into different sections based on the type of work it is :- web, print, motion etc. I plan to do this with jQuery, all i need is for the different types of work to have corresponding classes.
try something like this:
<?php $my_pages = get_pages('meta_key=class&meta_value=print'); $html= ''; if(!empty($pages)){ $html .= '<ul>'; foreach ($my_pages as $pagg) { $html .= '<li class="print"><a href="' . get_page_link($pagg->ID) . '">'; $html .= $pagg->post_title . '</a></li>'; } $html .= '</ul>'; echo $html; } ?>
thanks for your help keesiemeijer. I tried that code but it doesn’t seem to produce any results. Perhaps I am implementing it wrong, is there anything I need to do other than include it in header.php? Also what changes would be needed to the code to add other meta values such as web and motion?
You don’t put it in header.php but in the template file where you have wp_list_pages(). Probably sidebar.php . You replace wp_list_pages with the code
Do you need “web” and “motion” with the same key (class) and the same list structure?
my navigation happens to be in header.php here’s the code
<div id="nav"> <div id="topnav"> <ul> <?php wp_list_pages('depth=1&title_li=&exclude=8'); ?> </ul> </div> <div id="subnav"> <ul> <?php wp_list_pages('depth=1&title_li=&child_of=8'); ?> </ul> </div> <?php $my_pages = get_pages('meta_key=class&meta_value=print'); $html= ''; if(!empty($pages)){ $html .= '<ul>'; foreach ($my_pages as $pagg) { $html .= '<li class="print"><a href="' . get_page_link($pagg->ID) . '">'; $html .= $pagg->post_title . '</a></li>'; } $html .= '</ul>'; echo $html; } ?> </div><!-- #nav -->
ideally yes “web” and “motion and “print” would be with the same key (class) and structure
The code in your header is good. Did you give any page a custum field yet (class -> print) because it works on my server. Let’s make this work first before I make a function for print,web and motion.
ok I see a bug in my own code . sorry
if(!empty($pages)){
should be:
if(!empty($my_pages)){
I made that edit but it still came out as
<div id="nav"> <div id="topnav"> <ul> <li class="frontpage page_item page-item-508"><a href="http://wilfswann.co.uk/" title="Home">Home</a></li> <li class="work-new page_item page-item-637"><a href="http://wilfswann.co.uk/work-new/" title="Work New">Work New</a></li> <li class="sketchbook page_item page-item-11"><a href="http://wilfswann.co.uk/sketchbook/" title="Sketchbook">Sketchbook</a></li> <li class="friends page_item page-item-80"><a href="http://wilfswann.co.uk/friends/" title="Friends">Friends</a></li> <li class="showreel page_item page-item-19"><a href="http://wilfswann.co.uk/showreel/" title="Showreel">Showreel</a></li> </ul> </div> <div id="subnav"> <ul> <li class="work-rsa-stamps page_item page-item-265"><a href="http://wilfswann.co.uk/work/rsa-stamps/" title="Alternative Energy Stamps">Alternative Energy Stamps</a></li> <li class="work-corporate-show page_item page-item-262"><a href="http://wilfswann.co.uk/work/corporate-show/" title="Another Corporate Show">Another Corporate Show</a></li> <li class="work-aymm page_item page-item-38"><a href="http://wilfswann.co.uk/work/aymm/" title="Are You My Mother?">Are You My Mother?</a></li> <li class="work-bruges-tozer page_item page-item-77"><a href="http://wilfswann.co.uk/work/bruges-tozer/" title="Bruges Tozer">Bruges Tozer</a></li> <li class="work-experiments page_item page-item-209"><a href="http://wilfswann.co.uk/work/experiments/" title="Experiments in Motion">Experiments in Motion</a></li> <li class="work-futurism page_item page-item-258 current_page_item"><a href="http://wilfswann.co.uk/work/futurism/" title="Futurism">Futurism</a></li> <li class="work-heartstringtheory page_item page-item-260"><a href="http://wilfswann.co.uk/work/heartstringtheory/" title="heartstringtheory">heartstringtheory</a></li> <li class="work-heata page_item page-item-132"><a href="http://wilfswann.co.uk/work/heata/" title="HEATA">HEATA</a></li> <li class="work-heatsaver page_item page-item-136"><a href="http://wilfswann.co.uk/work/heatsaver/" title="HeatSaver UK">HeatSaver UK</a></li> <li class="work-human-after-all page_item page-item-130"><a href="http://wilfswann.co.uk/work/human-after-all/" title="Human After All">Human After All</a></li> <li class="work-miasma page_item page-item-56"><a href="http://wilfswann.co.uk/work/miasma/" title="Miasma">Miasma</a></li> <li class="work-muse-bliss page_item page-item-176"><a href="http://wilfswann.co.uk/work/muse-bliss/" title="Muse Motion – Bliss">Muse Motion – Bliss</a></li> <li class="work-muse-smbh page_item page-item-185"><a href="http://wilfswann.co.uk/work/muse-smbh/" title="Muse Motion – Supermassive Type">Muse Motion – Supermassive Type</a></li> <li class="work-digital-sketchbook page_item page-item-134"><a href="http://wilfswann.co.uk/work/digital-sketchbook/" title="The Digital Sketchbook">The Digital Sketchbook</a></li> <li class="work-operation page_item page-item-267"><a href="http://wilfswann.co.uk/work/operation/" title="The Operation Branding">The Operation Branding</a></li> <li class="work-the-operation page_item page-item-143"><a href="http://wilfswann.co.uk/work/the-operation/" title="The Operation online">The Operation online</a></li> </ul> </div> </div><!-- #nav -->
not entirely sure what I am doing wrong, there are definitely pages with the custom field ‘class’ and value ‘print’.
- The topic ‘wp_list_pages Classes’ is closed to new replies.