SB Child List

This plugin lets you turn WordPress into a proper easily navigable CMS. Having a site made up mostly of pages in the form of a tree (an information site for example) was always a pain until I wrote this to help me out. I have had lots of feedback about it over the last few months and more and more people are finding ways they can use it to improve the navigation and usability of their sites

I wanted to show some sort of hierarchy in the pages inside WordPress. I decided to call one of my pages “articles” and have my articles use it as their parent.

Logically you would expect to see a list of the child pages on the articles page along with a pretty picture and some intro text. This doesn’t seem possible natively with WordPress so I decided to make it happen.

Usage

Adding the hook [ sb_child_list ] to any post or page will by default show an unordered list showing the children and links to them. If you prefer to style it yourself then don’t worry because you can do that too using the templating system on the settings page.

There is also add another tag, [ sb_parent ], that allows you to provide a back to parent link from any child. This enables you (in the articles example) to add a “click here to read more on this subject” link. It is also template based so it can say anything or look however you see fit

Category Listings

You can also use this shortcode: [ sb_cat_list category=CatName ] which does what it says on the tin, simply give it a category name and it will show the posts in that category for you with optional ‘limit’ argument

The plugin creates a widget for use also. This works if there is a sub page present. Much like a sub pages widget or similar.

I have added a shortcode for sibling navigation. You can use [ sb_sibling_next ] and [ sb_sibling_prev ] to show links to next and previous pages ordered by menu order followed by post title order. Handy indeed!

Templating

There is a simple templating sytstem to allow multiple templates for [ sb_child_list ] and [ sb_cat_list ] with the argument ‘template’ ([ sb_child_list template="2" ]). Also added excerpt support and support for the SB Uploader Plugin custom fields (custom field called post_image will show if necessary).

Shortcodes

[ sb_child_list ] <-- Arguments allowed are: 'template', 'nest_level' and 'order'
[ sb_parent ] [ sb_grandparent ] [ sb_cat_list ] [ sb_sibling_next ] [ sb_sibling_prev ]

Example Site

I wrote this plugin so that I could display articles in a hierarchy on my boat site (Still in development). See examples of how I am using it at http://www.letsboat.co.uk/ on the articles page. I have updated the CSS to fit it in with the rest of the site.

Screenshots

Download

Latest version is in the WordPress Plugin Directory here: http://wordpress.org/extend/plugins/sb-child-list/

Download an old archive version here (V1.0): SB Child List (3.05 kB)

Note

Shortcodes in this post have had spaces added before and after so they show and aren’t turned into lists of posts by WordPress. A consequence of using the same plugin on the site you are advertising :)

156 comments

Add your comment
« Older Comments
Newer Comments »
  1. Sharon Murphy says:
    November 3, 2011 at 8:41 pm

    I love the plugin! Have a question… Is there any way to stylize it specifically? I’d like to have the list use something from my stylesheet, in this manner: [sb_child_list style=green] . Is that possible?

    If I code it on the Child List Options page, it’ll change all child lists on every page. Thoughts?

    Reply
    • Sean says:
      November 3, 2011 at 8:46 pm

      Hi Sharon, glad you like it.. thanks for the feedback. To be honest this is easy enough already using CSS. You would just need to encapsulate your shortcode in a div with a classname. So for instance flick to html view for the page you are writing and type…

      [sb_child_list]

      And in your CSS you just need to write something like…

      .red ul li a { color: red; }

      To make the links in the list red. Sound ok to you or do you not think it will work?

      ta
      S

      Reply
  2. Sharon Murphy says:
    November 3, 2011 at 8:52 pm

    Ah, interesting. So, I could then type [sb_child_list style=red] ?

    Reply
  3. Sharon Murphy says:
    November 3, 2011 at 8:53 pm

    Actually I just noticed (sorry) that you do have individual templates for the lists. That may be all I need to use. Thanks again! :)

    Reply
    • Sean says:
      November 3, 2011 at 8:55 pm

      Hey no worries at all. By all means get in touch if you get stuck with this or anything else on your site you think could do with tweaking but don’t know how.

      thanks
      Sean

      Reply
  4. Sammy says:
    November 11, 2011 at 11:45 am

    Hi Sean

    I was wondering if there is some way where I can display a child list in 2 columns. I have some VERY long lists of child pages and I really need to shorten my page lengths. Any suggestions?

    Thx, Sammy

    Reply
    • Sean says:
      November 11, 2011 at 5:04 pm

      Hi Sammy,

      Thanks for the feedback… I think you hit the nail on the head.. you need to shorten your page lengths.. it’s what my plugin is for. I would suggest splitting the long pages down into yet more child pages and limiting the level which it shows by updating the depth option to 0 on the settings page so it only shows the top level children.

      To use the existing lists you would just need to get a bit creative with CSS. I would recommend floating left the LI element or swap to DIVs and float that instead. It can ball be done using the settings page. Give me an example of one of your long pages if you like and I can perhaps help you through it.

      thanks
      Sean

      Reply
  5. Sammy says:
    November 11, 2011 at 6:17 pm

    Thanks for getting back to me so quickly Sean. Here’s the URL for a page that lists all the cities where we have service in a particular state: http://dish2u.com/dish-network-channels/arizona/

    Here’s the code I’m currently using within the loop:
    Loop Start -

    Loop Content –
    DISH Network [post_title]
    Loop End -

    What I really need to do is to have the list divide into 2 equal columns thereby shortening my page length in half. What exact code would I place in there besides what I currently have?

    Thanks, Sammy

    Reply
  6. Sammy says:
    November 11, 2011 at 6:27 pm

    Uh oh……it appears WordPress stripped out the code…..maybe you can read it in your Comment section….

    Reply
    • Sean says:
      November 14, 2011 at 12:13 pm

      Hi Sammy.. no worries. I got the gist of it. You are using P tags for your loop content items which is padding them quite a lot. You also only have a single column which, again, makes the page long. You can just float the items left and swap the p for a div to make it look better.

      Loop Start:
      Loop Content: DISH Network [post_title]
      Loop End:  

      And in your CSS file….

      .cities .city { width: 340px; text-align: left; margin-bottom: 5px; }
      .clear { clear: both; }

      Job done. Two columns that don’t look too bad. Consider adding a hyphen before the word DISH to make it look like a list ( – DISH)

      Let me know how you get on.

      ta
      S

      ps: If the code above gets stripped out by my site then try this: http://pastebin.com/bjxL2QvB

      Reply
  7. Sammy says:
    November 14, 2011 at 12:47 pm

    Hi Sean

    I tried using the code you recommended, but instead of creating a 2 column list, it moved everything over to the far left into a single column. Thanks for helping me with this and placing the code at Pastebin, since our good friend WordPress loves to strip out the code. :-)

    Reply
  8. Sean says:
    November 14, 2011 at 1:29 pm

    Hi Sammy, it will have done that because I forgot to add the crucial float: left; line to the cities block. If it’s still in a single column then reduce the width from 340 to 330 and see if it makes a difference.

    ta
    S

    Reply
  9. Tore Johnny says:
    November 26, 2011 at 4:17 pm

    Hello! Great plugin indeed!

    I have a little question, though. :-) Even if shortcodes and widgets are very useful under most circumstances, there are situations where PHP code would do better. I have a FAQ section on one of my websites and want to use a special page template for that section, where I can put a little poll below the answer to learn what the readers think about the answers they get. Along with that, I would also like to put some PHP code to do the same as the [sb_parent] shortcode would do. I am definitely not a PHP programmer, and cannot figure out which code to use or the syntax of it. Could you help, please?

    Reply
    • Sean says:
      November 28, 2011 at 1:14 pm

      Hi Tore,

      Thanks for the feedback! PHP code is easy enough to add. The following functions are usable in your templates…

      < ?php echo sb_cl_render_child_list(); ?>

      < ?php echo sb_cl_render_parent(); ?>

      Let me know if you need any more help.

      thanks
      Sean

      Reply
  10. Hendryk says:
    December 5, 2011 at 8:43 am

    Hi there,
    I have the following questions to your Plugin:

    - Is it possible to ‘translate’ this Plugin without changing the PHP-Code myself? (I would lose all customization through future updates?)
    On my Website I use the Widget provided to show kind of a Navigation for a small collection of pages, arranged as a parent-child setup with (yet) 3 levels. Now, if I am on a child-page, it displays everything correctly, except for the parent-link resp. it adds by itself the words “Back to [...]“. I want to translate this into German, but the text seems to be hard-coded?

    - If I am on a page of the 3rd level, I only get a link to the next parent page, not to the grand-parent-page. Is it somehow possible to show the full “path”?

    - If the category name had spaces, the plugin does not seem to work with [sb_cat_list category=CatName]. Is there any workaround to use it with a category or page ID?

    Thanks

    Reply
    • Sean says:
      December 5, 2011 at 7:55 pm

      Hi there Hendryk,

      I have just released a new version for you. I have added the getText code around the “Back to” text so you should now be able to use PO files to replace the text with German without losing your changes on upgrade. I have added a new shortcode called sb_grandparent which will show another level higher than sb_parent. I need to write recursive function at some point but just need to decide on the best way to present the results. How would you like to see it… as a breadcrumb? The category thing I think you just need to add quotes around the shortcode… [sb_cat_list category="Category Name"]. Let me know if that doesn’t work and I shall update it to use ID instead.

      thanks
      Sean

      Reply
  11. Lori says:
    December 19, 2011 at 3:39 pm

    Hi Sean,

    I’ve installed your plugin on a new 3.3 site and it works great. I have two levels of subpages showing on the parent page. I’d like to style the children differently from the grandchildren. Is that possible with the plugin?

    Thanks,
    Lori

    Reply
    • Sean says:
      December 19, 2011 at 10:24 pm

      Hi Lori,

      Thanks for the feedback. Glad you like it. To get the levels styled differently you just need to use some hierarchical CSS. For example let’s assume you add a class to the top level list called child_list. The CSS to access LI tags inside the list would be…

      .child_list li {

      }

      To get the next level down styled differently just add another LI onto the end of the CSS statement as follows…

      .child_list li li {

      }

      You just add another LI for each level you want to style.

      Hope this helps!

      thanks
      Sean

      Reply
  12. Lori says:
    December 20, 2011 at 12:23 am

    perfect – thank you. I should have been able to figure that one out :)

    Reply
  13. Chuck says:
    December 31, 2011 at 9:24 pm

    Thanks for the plugin, works great for me. One question/idea.. Is there a way to style the page that a viewer is looking at. I would like to bold or color the link to the page that is being viewed.
    -thanks!

    Reply
    • Sean says:
      January 1, 2012 at 9:11 pm

      Hi Chuck,

      Thanks for your comment and suggestion. I have just released version 2.5 for you to play with. Add class=”[post_class]” to your loop content template box when using the new version and it will add a CSS classname when looking at the current page. It will allow you to style the page you are looking at very easily. Let me know if you get stuck and need some example CSS.

      thanks
      Sean

      Reply
  14. Salvo says:
    January 2, 2012 at 1:40 pm

    Hi Sean,

    thanks for the plugin, it is very useful.
    I am using it inside a page template:

    I am not able to displaye the page thumbnail.
    I have both put the image in the page content and as featured image but it is not displayed in the list.
    It should be displayed automatically or have I to specify manually in the shortcode?
    Thanks in advance.

    Reply
    • Sean says:
      January 3, 2012 at 8:29 pm

      Hi Salvo,

      Thanks for your message. Sorry I missed your call on Skype. I see you want to get the image to show. At the moment images only work with my SB Uploader plugin which allows you to attach images to posts. The Uploader should be called post_image (which is the default name) and then using the appropriate template tag inside the SB Child List template ([post_image] I think) the thumbnail will show.

      I shall look to add the normal WordPress image system in new releases.

      thanks
      Sean

      Reply
  15. Kim says:
    March 16, 2012 at 4:30 pm

    Sean,
    Great plugin! Like Salvo, I was also hoping to include normal WP thumbnail. Will that addition be coming any time soon?

    Reply
    • Sean says:
      March 16, 2012 at 4:47 pm

      Hi Kim,

      Thanks for the feedback. Use the shortcode [post_thumb] in the template page to get the WordPress based image to show. Let me know if this doesn’t work for whatever reason.

      thanks
      Sean

      Reply
  16. Kim says:
    March 16, 2012 at 5:32 pm

    Yep, that does it! Thanks for the quick response.

    I’m trying to add the [post_excerpt] in and it is not displaying. I am using this on pages. Any ideas why that wouldn’t work?

    Reply
  17. Ely says:
    March 31, 2012 at 10:47 pm

    Hi Sean,

    I’m using qTranslate and for some reason your plugin display the page titles without qTranslate doing it’s job….

    Thanks,
    Ely

    Reply
  18. Tracey says:
    April 4, 2012 at 5:21 pm

    Hi there, thanks for creating this really helpful plugin.

    From what I’ve read above, I should be able to have my page’s featured images show up in the child list instead of a bullet, correct? If so, can you assist me with the proper shortcode and where exactly I should be placing it? I’m still a bit fuzzy on that part.

    Thanks so much!
    Tracey

    Reply
    • Sean says:
      April 4, 2012 at 8:33 pm

      Hi Tracey, thanks for the feedback. You are correct.. it does allow you to use the featured image. If you go to the settings page and use the shortcode [post_thumb] inside the child list loop content block then it should show up. If you would rather not have a bullet there then change the occurrences of

        and
      • to
        . If this doesn’t make sense or you need anything else then please do let me know.

        ta
        S

      Reply
  19. Tracey says:
    April 4, 2012 at 10:20 pm

    Thanks so much, Sean! This was extremely helpful. I don’t understand what to change for the bullets (did something not display correctly above?), but I am going to poke around in my theme stylesheets to edit the style because the featured images are really messing up the content layout. But I’m so thrilled about the featured image part working well!

    Reply
  20. Mindy says:
    April 10, 2012 at 10:00 pm

    Is there a way to allow links to be shown in the excerpt? I am using your plugin to show the child pages of the parent page “Articles”. The child pages of “Articles” are the articles themselves. I have a link within the excerpt for them to click to open a pdf version of the article, but it is not showing it as an active link in the excerpt, but just text. Any way to fix this?

    Reply
    • Sean says:
      April 11, 2012 at 8:21 pm

      Hi Mindy, thanks for your comment. Sorry it took a while to come back to you. The plugin doesn’t strip any HTML from the excerpt if it is supplied. If you are relying on it to generate the excerpt itself based on the more tag or the first X characters of the content then it will automatically strip out the html itself. As I understood it you actually can’t have any code in the excerpt because of the nature of various plugins augmenting the length of it and therefore potentially breaking the html and therefore your site.

      So really the question is why do you need links in the excerpt as WordPress intended there not to be any and if you have a good reason and still need the functionality then you can fix it by removing this line from my plugin code:

      $excerpt = strip_tags($excerpt);

      I hope this helps. I am more than happy to advise further if it doesn’t work of course.

      thanks
      Sean

      Reply
  21. Danno says:
    April 17, 2012 at 7:02 pm

    Hi Sean,

    Love the plug-in. My question is…

    Can I get your plugin to display all posts in the category with the thumbnail pulled from the WP featured image?

    I am using the sb_cat_list on a page to call a list of posts.

    Kind Regards
    Danno.

    Reply
    • Sean says:
      April 18, 2012 at 8:01 pm

      Hi Danno, thanks for the feedback. I had to check this one for myself but you should be able to use the hook [post_thumb] in the settings templates to get the featured image to work. Let me know if it doesn’t and I shall fix it for you.

      ta
      S

      Reply
      • Danno says:
        April 19, 2012 at 12:01 am

        Thanks for the reply Sean…

        Where in the settings page is the correct place to place it? I had tried it yesterday in the settings page, but got no result… but I am unsure as to which field I should be putting it in and in what format!

        Danno

        Reply
        • Sean says:
          April 20, 2012 at 11:04 am

          Hi Danno,

          No problem. You should be able to add it to the box titled: Category List Loop as [post_thumb] and see what happens. Let me know if it doesn’t work.

          ta
          S

          Reply
  22. Zack says:
    April 24, 2012 at 6:36 pm

    Hi Sean,

    Great plugin, super helpful! Question: I set the global “depth” of the child nesting levels to be 1, but on some pages I want it to be 2. Is there an extra parameter I can add with the shortcode on these particular pages?

    Thanks,
    Zack

    Reply
    • Sean says:
      April 24, 2012 at 8:53 pm

      Hi Zack,

      Thanks for the feedback, always nice to hear people are using it. You can use the parameter nest_level in the shortcode to override the main one. I have just updated the plugin readme file to reflect this so people know for next time.

      Let me know if you have any more problems with it.

      ta
      S

      Reply
  23. David Knapp says:
    May 6, 2012 at 6:06 pm

    The plugin is great. However, I am having trouble using it with the more tag on the child pages. I put the [post_excerpt] short code into the Child Loop setting of SB Child List but it still seems to trim at 55 words instead of up to the more tag. Is there a different short code that I should be using?

    Reply
    • Sean says:
      May 13, 2012 at 9:06 pm

      Hi David,

      The excerpt calculation currently is a function I wrote instead of the WP one. It’s because the pages are called not using the WP loop. I shall overhaul it in the coming weeks I think but for now it will show the excerpt as generated by number of Words. You can of course extend the number of words using the a WP filter. I can give you the code to add to your theme if you like. I am just in the process of seeing if there is a midway point so I can get the more tag working for you. Once I get that sorted you will see a new version popup in your system.

      thanks
      Sean

      Reply
    • Sean says:
      May 13, 2012 at 9:21 pm

      There we go, I just released a new version with support for the more tag (I think). Let me know how you get on with it.

      cheers
      S

      Reply
  24. Danno says:
    May 15, 2012 at 9:31 pm

    One more thing Sean…

    Is it possible to have the post thumb generated from the image inserted into the post rather than having to set the image as featured image on each post?

    Many thanks once again Sean,

    Danno

    Reply
    • Sean says:
      May 16, 2012 at 10:15 am

      Hi Danno,

      Generally it would be possible but in reality the featured image is designed for this situation whereas incidental images in posts are there to make it look pretty. If I were to add that functionality then we would need to be able to turn it off for certain people who don’t want that functionality. I suppose the simplest thing would be for you to set up featured images :)

      cheers
      S

      Reply
  25. Danno says:
    May 15, 2012 at 9:33 pm

    Oh and finally… can or where can one set the length of the exercpt?

    Reply
    • Sean says:
      May 16, 2012 at 10:16 am

      Hi Danno,

      You can’t using my plugin at the moment but you could use the following code in your functions.php file (of your theme).

      function custom_excerpt_length( $length ) {
      return 20;
      }
      add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );

      cheers
      S

      Reply
« Older Comments
Newer Comments »

Leave a Reply