Here’s the story:
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.
Adding the hook 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, , 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.
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)
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://boathook.sean-barton.co.uk on the articles page. I have updated the CSS to fit it in with the rest of the site.
Screenshots
Shortcode hook usage
Example Page Tree
What it all looks like
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?
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…
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
Ah, interesting. So, I could then type [sb_child_list style=red] ?
Actually I just noticed (sorry) that you do have individual templates for the lists. That may be all I need to use. Thanks again!
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
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
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
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
Uh oh……it appears WordPress stripped out the code…..maybe you can read it in your Comment section….
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
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.
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
That was it! Thank you so much Sean!
No worries. I have my uses!
ta
S
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?
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
Thank you, just what I needed!
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
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
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
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
perfect – thank you. I should have been able to figure that one out
No worries at all.. it’s the ‘cascading’ part of cascading style sheets which often people don’t use
thanks
Sean
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!
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
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.
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