WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] wp_list_pages Classes (36 posts)

  1. WilfSwann
    Member
    Posted 4 years ago #

    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?

  2. keesiemeijer
    moderator
    Posted 4 years ago #

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

  3. WilfSwann
    Member
    Posted 4 years ago #

    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.

  4. keesiemeijer
    moderator
    Posted 4 years ago #

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

  5. WilfSwann
    Member
    Posted 4 years ago #

    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.

  6. keesiemeijer
    moderator
    Posted 4 years ago #

    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>';
            }
       ?>
  7. keesiemeijer
    moderator
    Posted 4 years ago #

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

  8. WilfSwann
    Member
    Posted 4 years ago #

    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.

  9. keesiemeijer
    moderator
    Posted 4 years ago #

    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;
            }
    ?>
  10. WilfSwann
    Member
    Posted 4 years ago #

    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?

  11. keesiemeijer
    moderator
    Posted 4 years ago #

    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

  12. keesiemeijer
    moderator
    Posted 4 years ago #

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

  13. WilfSwann
    Member
    Posted 4 years ago #

    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

  14. keesiemeijer
    moderator
    Posted 4 years ago #

    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.

  15. keesiemeijer
    moderator
    Posted 4 years ago #

    ok I see a bug in my own code . sorry

    if(!empty($pages)){

    should be:

    if(!empty($my_pages)){
  16. WilfSwann
    Member
    Posted 4 years ago #

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

  17. keesiemeijer
    moderator
    Posted 4 years ago #

    Ok that is strange. On my server it is working. Let's do some testing.
    in stead of the code I gave you paste this code:

    <?php
    	$my_pages = get_pages('meta_key=class&meta_value=print');
    	echo '<pre>';
            print_r($my_pages);
            echo '</pre>';
    ?>

    If you don't see a big array with your pages, get_pages is not working or you don't have a page with a custom field with key = class and value = print.
    If you don't see a big array paste this code:

    <?php
    	$my_pages = get_pages();
    	echo '<pre>';
            print_r($my_pages);
            echo '</pre>';
    ?>

    If you don't see a big array with all your pages get_pages is not working.

  18. keesiemeijer
    moderator
    Posted 4 years ago #

    If you go to a page (with the custom field) in your dashboard does it look like this.

  19. WilfSwann
    Member
    Posted 4 years ago #

    thank you again for your help kees.

    I got an array from that second code but none from the first one so I must have done the custom field wrong. Here's a screenshot of the custom field, where am I going wrong?

    http://img684.imageshack.us/img684/964/screenshot20100617at230n.png

  20. WilfSwann
    Member
    Posted 4 years ago #

    aha I didn't see your latest post before I posted but they look the same to me?

  21. keesiemeijer
    moderator
    Posted 4 years ago #

    ok get_pages is working. They look the same, yes. Now try this:

    <?php
    	$my_pages = get_pages('meta_key=class');
    	echo '<pre>';
            print_r($my_pages);
            echo '</pre>';
    ?>
  22. WilfSwann
    Member
    Posted 4 years ago #

    still no results, just says

    Array
    (
    )

  23. keesiemeijer
    moderator
    Posted 4 years ago #

    did you paste "class" and "print" in the custom field. sometimes you paste in a space (class[space] or [space]print) and it doesn't work. We keep on testing.
    make a new custum field. name: myclass, value: print. (dont paste or be sure of no spaces)
    try this one again:

    <?php
    	$my_pages = get_pages('meta_key=myclass&meta_value=print');
    	echo '<pre>';
            print_r($my_pages);
            echo '</pre>';
    ?>

    otherwise I don't know what is causing this. (keeps on thinking)

  24. WilfSwann
    Member
    Posted 4 years ago #

    hmmm still getting nothing, how annoying. does it matter if the pages are a child of another page? also does it matter if there are other custom fields?

  25. keesiemeijer
    moderator
    Posted 4 years ago #

    We could test for that to. (it is probably the child page that stumps us) but first if you know the page ID of a page with the custom field (myclass)do this:

    <?php
            $key_1_value = get_post_meta(65, 'myclass', true);
            echo 'myclass value =' . $key_1_value ;
    ?>

    substitute 65 for your ID

  26. WilfSwann
    Member
    Posted 4 years ago #

    myclass value =print

    is what i get

  27. keesiemeijer
    moderator
    Posted 4 years ago #

    That's good. I got it. It was the child category that did it.
    now try:

    <?php
    	$my_pages = get_pages('child_of=65&meta_key=myclass&meta_value=print');
    	echo '<pre>';
            print_r($my_pages);
            echo '</pre>';
    ?>

    substitute 65 for the parent ID where the child page with custom field (myclass) belongs to. And see if you get an array with all the pages with meta_key =myclass.

  28. keesiemeijer
    moderator
    Posted 4 years ago #

    (posted twice) sorry

  29. WilfSwann
    Member
    Posted 4 years ago #

    bingo that worked :)

  30. keesiemeijer
    moderator
    Posted 4 years ago #

    Ok I will make the function for yor 3 classes now

Topic Closed

This topic has been closed to new replies.

About this Topic