Simple Section Navigation for WordPress
Simple Section Navigation is a WordPress plug-in that adds a widget for section based navigation. Easy to configure and essential for CMS implementations!
Description
Adds a widget to your sidebar for section (or top level page) based navigation. The title of the widget is the top level page within the current section. Shows all page siblings (except on the top level page), all parents and grandparents (and higher), the siblings of all parents and grandparents (up to top level page), and any immediate children of the current page. Can also be called by a function inside template files.
It includes a simple widget configuration panel. From this panel you can:
- Determine whether the section navigation widget should appear on the home page
- Override standard behavior and have the widget show all pages in the current section
- Determine whether the widget should appear even if the section only has one page (the top level)
- Provide a list of pages to exclude from the output
- Determine whether the section navigation should still appear when viewing excluded pages
- Determine whether the section title should be linked
- Determine page sort order (defaults to menu order)
The widget uses standard WordPress navigation classes, in addition to a unique class around the widget, for easy styling.
Compatible with WordPress MU. General installation instructions.
Upgrading from pre-2.0
Version 2.0 represents a major change to the plug-in’s internal architecture. Version 2 will attempt to seamlessly upgrade the old the widget, but you should document your current settings before upgrading to be safe. If you are calling it by a function in the template (not using the widget), you will be required to update your template, unless you were using the default settings. The function now has 1 parameter: arguments for the output of the widget, as detailed under installation instructions.
Calling section navigation inside template (without widget)
Function name: simple_section_nav()
Parameters:
- show_all – Always show all pages in current section (default: false)
- exclude – Page IDs, seperated by commas, of pages to exclude (default: ”)
- hide_on_excluded – No navigation on excluded pages (default: true)
- show_on_home – Show top level page list on home page (default: false)
- show_empty – Output even if empty section (default: false)
- sort_by – Page sort order; can use any WordPress page list sort value (default: menu_order)
- a_heading – Link heading to the top level page (default: false)
- before_widget – HTML before widget (default: <div>)
- after_widget – HTML after widget (default: </div>)
- before_title – HTML before widget (default: <h2 class=”widgettitle”>)
- after_title – HTML after widget (default: </h2>)
Example:
simple_section_nav('before_widget=<li>&after_widget=</li>&exclude=2&show_on_home=1');
Will wrap the widget in LI tags, exclude page ID 2, and will output on home page.
Additional Notes
A full change log is available here.
Possible future features based on demand:
- Lists private pages if user has permission to see them
- Light weight mode for sites with only 2 levels of pages
If you’re interested in the origins of this plugin and how it works under the hood, check out this blog post.
As always, feedback and suggestions are welcome!
164 Thoughts Contributed to “Simple Section Navigation”
What do you think?
Screenshots
Brilliant, thank you!!!! This has solved my problem with more than one type of custom wordpress navigation. A total blessing for me, who couldn’t entirely follow your article about get_post_ancestors but desperately needs page “sections”. Donation on the way!
Thanks for this, great that you’ve attempted to solve this and package it up as a widget! Good work.
I’ve got a bit of an odd output though and I’m not sure if it’s meant to work this way or not, but I looks odd to me. If I output the widget and only show the sibling and children and I’m three levels down, I get this:
A1a
A1b
A1
A2
A
B
C
D
So each level down gets output on top of the last one, and it’s all in a plain list of:
ul
li
li
li
/ul
with nothing to differentiate the levels. On the other hand, if I chose the option in the admin to “Show all pages in section”, I get a proper list:
A
-A1
–A1a
–A1b
and so on. The problem then is that it outputs all the menus and I only want to output the grandparents, parents, siblings and children of current menu. But then I’m running into the problem above..
Any info on this would be greatly appreciated!
Karl – I’m not entirely sure I follow. You’re saying if you’re three levels down (i.e. Top Level Page, Sub Page, Sub-Page of Sub-Page), that the navigation “flattens” instead of being in a hierarchy?
That’s definitely not the expected output, and not what it’s doing in my test environments!
Is there a link where I could see this in action? I may need to see “under the hood” of your own setup. The first that springs to mind is that there may be a conflicting plug-in… ?
Sorry for the delayed response, I was working on other parts of the site.
Yep, could be a conflicting plugin, the behaviour is a bit strange. It does flatten three levels down for me like you describe, but in reverse order (sub-sub pages on top).. confusing indeed! Wish I could send a link, but it’s on a test-server.
Haven’t had a chance to deactivate all plugins or trial it further, for this project I went with the Fold Page List plugin in the end, with a snippet to split out just the 2nd level down http://www.brustpumpe.de/fold-page-list-geteilte-navigation/
Might have a look at your plugin again for another project, good luck with it!
thank you _so much_ for this, this is almost exactly what i wanted
.
let’s see if i can explain this properly.
when we’re on a top level page with children, the plugin lists all children, obviously.
now if we’re on a child page, the plugin lists all children of the parent page, including the child page we’re on _linking_ it basically to itself. i don’t think it’s good.
i wish there was an option to configure the plugin to exclude this behavior.
would this be possible? do you find it would be an important addition to the current functionality?
again, thanks so much, you really made my day.
This may be obvious, but how do I keep the ‘section’ nav item highlighted when on children and grandchildren pages?
April – Can you clarify the question? Are you asking how you differentiate a page that’s within the current hierarchy? So if you’re on a third level page, the second level page (its parent) should stand out?
Assuming you’re looking for something along those lines, the answer is to use CSS. If you look at the HTML you’ll notice that the LI tags have a variety of classes (i.e. “current_page_ancestor”) that your stylesheet can reference to provide some emphasis or other differentiated styling.
Hmm, that’s the problem – for some reason my top level nav does not have the class “current_page_ancestor” applied to it when on it’s child/grandchild pages. For instance, on this page here on your site I see that “Software” does have that class, but on my site it does not even on the equivalent sub-sub-page. I’m not sure I setup the plugin call right even though it works like a charm in all other ways.
I have set up my nav like so:
<?php simple_section_nav(“”,”"); ?>
Where the “toplevelnav” are the 4 sections, and supposed to be ancestors, and “nav” includes all of the pages and subpages underneath it.
Do you see any obvious reasons that the ancestor class wouldn’t be applying to the “toplevelnav”?
oops, let me try that code again..
<?php simple_section_nav("",""); ?>
Never mind my highlighting question afterall! I ended up styling the top level ‘Section’ nav using conditional tags instead.
April – sorry for the delayed response!
I’m still curious about the problem. You did call the plug-in correctly.
It sounds like there’s not an issue with the “section nav”, but your top level nav retaining proper styles? I assume you’re using the generic wp_list_pages to generate that? Is there a URL I can look at?
Right, the top level nav doesn’t seem to be retaining the “current_page_ancestor” styles. The conditional tags aren’t the best option so I appreciate any insight you have on how to make the styles work.
Here’s the URL: http://www.treelightdesign.com/stage/features/
Yes, the top level nav (Features / Customers / Benefits / Pricing) is using a simple wp_list_pages tag.
Then everything in the dropdown menus is called by the simple_section_nav tag.
And to keep things simple, I made the following styles:
.current_page_item: orange border
.current_page_parent: red border
.current_page_ancestor: green border
So when I’m on a grandchild page of “Features”, (http://www.treelightdesign.com/stage/features/modules/invoicing/) then shouldn’t “Features” be green?
Thanks for your assistance!
Hey, great plugin you have here.
I wonder what the feature “Ability to treat blog categories as sub pages of blog home”. Is it like the feature “Categories menu” from the plugin WPML.org ?
NicoMollet – that feature (which I hope to roll out in the next update) allows you to treat blog categories as though they’re sub pages of the blog page. So, for example, if you create a top level page called “Blog”, and make that your blog page in the settings, when you visit that top level page, the Simple Section Navigation would output permalinks to the top level blog categories as sub pages of “blog”.
Hope this makes sense!
Karl and I are having the same issue. Though, I have no other plugins installed.
The loss of hierarchy issue seems to be resolved… download the latest build (1.1.2) for the fix!
Many thanks. Super nice plugin, guys!
I’m looking for a navigation plugin that does the following:
- Shows only root pages (when current page is home)
- Shows root pages + sub-pages of the current page
To me it seems like this plugin only shows the siblings/children of current page. Not the whole hierarchy.
I want this view:
(Current page: Home):
- Section A
- Section B
- Section C
- Section D
(Current page: Section B, therefore I can see the sub-pages):
- Section A
- Section B
– Subsection B1
– Subsection B2
- Section C
- Section D
Is this supported?
Svein – that’s close to what this plug-in does, but not exactly.
The plug-in can be set to show top level pages (“sections”) on the home page, but once inside of each section it uses that top level page (i.e. “Section B”) as the heading for the navigation, with its children listed beneath. Using your example:
(Current page: Home):
Heading: Home
- Section A
- Section B
- Section C
- Section D
(Current page: Section B, therefore I can see the sub-pages):
Heading: Section B
- Subsection B1
- Subsection B2
(Current page: Subsection B1):
Heading: Section B
- Subsection B1
–B1-1
–B1-2
- Subsection B2
The intent was not really to create a site-wide “smart” navigation; the typical use case is a site with a persistent list of top level pages in the heading, that wants a sidebar with navigation within that section, once inside one of those top level pages.
The functionality you’re seeking is most easily accomplished with CSS. Just use descending LI classes combined with various “current” classes to control display of sub pages.
If you don’t want to use the CSS approach, and would like to sponsor a small modification to this plug-in to support your use case, let me know and I’ll email you with the details.
Hi,
I have one quick question.
How can I show the children of the sub page under its parent rather than on the top.
It ruins the need of it as it start showing the sub pages on the top, where as it should show them under the specific child to which they are parent of.
Please help.
any help regarding CSS or Code would be appreciated.
Roger – they are supposed to show up as children of the parent page. It appears my “fix” in 1.1.2 actually breaks some previously working instances. It appears to be rooted in a WordPress bug related to the “include” option. I am going to put out another update very soon.
Hi,
Thank you very much for your reply.
My question was actually exactly as Svein Are’s. The code is perfect and generated children perfectly but why does it show it at the top?
I actually, and I am sure many other would like to show the third level children under the 2nd level parent. Just like Svein Are wanted.
I will be very thankful if you can give a fix for that within PHP. That would be really helpful.
Any help
Roger – I have emailed you with a beta version that may fix your problem. I’m trying to work around an apparent bug with WordPress page lists and the “include” option.
Hi,
I am sorry but I didn’t receive it. Must be some problem. Can you email here instead:- ayishaakram[at]gmail.com
I will be very thankful.
Regards.
Thank you for this plugin – this is exactly what I was looking for! Would love to have an admin option to turn the section title off, but that can be done easily enough in the CSS.
Also, you probably have this documented somewhere that I missed, but the user needs to explicitly assign page order numbers to each page – for whatever reason if the value is left at the default of “0″, the subpages were jumping to the top of the nav list instead of staying under the parent.
Edwards – thanks for the feedback.
I’m aware of the page order bug… it’s tied to the other issues with “flattening” navigation folks have mentioned in the comment. I’m looking at reworking the plug-in a bit to work around what I believe to be a WordPress bug with “include” page listings.
Thank you for a valuable plugin. I had tested it some months back and ran into the “flattening” issue. So I had been using the Sub Pages widget (http://wordpress.org/extend/plugins/subpages-widget/) but it does not seem to be supported any longer.
This plugin works very nicely in conjunction with the Page Template Extended plugin (http://wordpress.org/extend/plugins/page-template-extended/ which I am not sure is supported either) allowing for great CMS-like capability. Page id based templates then form the “sections” for the site. Great work!
Loren – glad to hear that the plug-in has been useful!
All – a fix is coming “soon” for the page flattening issue. Unfortunately, I was out for about 10 days, and I’m in catch up mode. In the interim, as someone else indicated, if you explicitly define a page order using a third party plug-in like pageMash or using the page order drop down, the flattening should not occur.
Is there a way of adding the WordPress current_page_item class to the title of the widget?
Loren – we can add that to the next revision.
That is great! I am still developing the site that I am using this on but it really seems to be exactly what this type of website needed. Thanks again.
Pingback: WordPress as a CMS: 5 Power Tips for Template Developers « C. Murray Consulting
Excellent plugin! Simple and elegant. As a feature request, I suggest a sort order option to the settings, so the menu can be displayed alphabetical, by date, page order, page ID, etc. The default is page order, which doesn’t work when you want a large number of pages to be sorted automatically.
Great suggestion, Mike.
We’ll incorporate that, as well as Loren’s suggestion, in the next update.
How do I wrap it in a div so I can stylize just this list? Would it be easier to just call to it from my template? If, so how do I do that? I tried using the call function, but I have no idea how to do that properly. Any help would be wonderful. Thanks!
Jeff – if you’re using widgets, WordPress automatically wraps the widget in an element (an “li” in the default theme) with a special class name that corresponds to the widget name. In the case of this plugin, the widget’s wrapper gets a “widget_pages” class. You can use that reference to uniquely style this widget.
To output it in a template file, you need to execute the “simple_section_nav();” function in a PHP code block (as explained in the documentation and on the configuration page). You can put whatever you like around, including a “div” tag with a unique ID.
If you need further assistance, please use the “request a quote” button at the top of the page!
This plugin is terrific, but I’m having one problem — page/child/grandchild nav are showing up correct, formatting is correct via my CSS, BUT I’m getting an extra blank line at the end of my indented grandchild link list before the child page list continues — i.e (don’t know if my formatting below will show up tho):
PARENT
– Child
– Grandchild
– Next Child
I am completely stumped as to what I need to do in my CSS to fix this. It appears that something is causing that extra line at the end of a child group, because when I switch the setting to display all pages in section, the end break happens in between all Child/Grandchild groups.
Susan: it sounds like you have a “margin-bottom” or “padding-bottom” property attached to unordered lists (UL’s). Do you have a link where we can see this in action?
If this is not a bug with the extension, but simply a matter of CSS expertise, I’d politely ask that you strongly consider a small donation in exchange for our time assisting you.
Thanks — no margin-bottom or padding-bottom properties at all on this list — I was just wondering if there was something in the plugin that automatically added that extra line. I’m now sure it’s my CSS, because when I try the list without it, all is OK. I’ll keep plugging away.
And I do plan on donating as soon as I get everything working — thanks a bunch.
Susan – good luck with the CSS! The forthcoming donation is very appreciated… it’s hard for us to walk the line between extension support and supporting people’s sites!
Pingback: Power Tips For WordPress Template Developers « Tech7.Net
Hi,
Prior to upgrading to the last version I used
< ?php simple_section_nav("",""); ?>
to output the navigation in a css-themable block. This doesn’t seem to work any longer. Any hints?
Addtion to the above (the form stripped my code)
I added a div with a class between the fist quote mark, and a closing div in the second.
Pingback: Desenvolvendo Templante Wordpress | I-consultores