WordPress.org

Support

Support » Themes and Templates » [Resolved] wp_list_pages Classes

[Resolved] 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?

Viewing 15 replies - 1 through 15 (of 35 total)
  • Moderator keesiemeijer

    @keesiemeijer

    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.

    Moderator keesiemeijer

    @keesiemeijer

    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.

    Moderator keesiemeijer

    @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

    @keesiemeijer

    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 issues

    You 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.

    Moderator keesiemeijer

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

    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

    @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

    @keesiemeijer

    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

    Moderator keesiemeijer

    @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

    @keesiemeijer

    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’.

Viewing 15 replies - 1 through 15 (of 35 total)
  • The topic ‘[Resolved] wp_list_pages Classes’ is closed to new replies.
Skip to toolbar