wp_list_pages Classes

(@keesiemeijer)

Are these Pages or Posts with a category you want to assign your own classes to?

Thread Starter

(@wilfswann)

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.

Moderator

(@keesiemeijer)

Because pages can’t have categories you can give them a custom fields of the the class you want them to have

Thread Starter

(@wilfswann)

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.

Moderator

(@keesiemeijer)

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>';
        }
   ?>

Moderator

(@keesiemeijer)

you can also use get post meta for integrating in your theme.

Thread Starter

(@wilfswann)

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 issues

You can get an idea of what I’m trying to do on my website https://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.

Moderator

(@keesiemeijer)

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;
        }
?>

Thread Starter

(@wilfswann)

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?

Moderator

(@keesiemeijer)

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

Moderator

(@keesiemeijer)

Do you need “web” and “motion” with the same key (class) and the same list structure?

Thread Starter

(@wilfswann)

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

Moderator

(@keesiemeijer)

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.

Moderator

(@keesiemeijer)

ok I see a bug in my own code . sorry

if(!empty($pages)){

should be:

if(!empty($my_pages)){

Thread Starter

(@wilfswann)