Each year I customize the default WordPress theme and release my changes on code.aidanmontare.net.
Each year gets a theme, a Git repository, and a page here at aidanmontare.net explaining what I did for those who are interested.
The motivation behind my yearly WordPress themes is explained in detail at Twenty Fourteen, my first WordPress theme.
About This Year’s Theme
This year is my first theme transition. I like the Twenty Fifteen because it is simplistic and leaves plenty of room for expansion, but it is actually a little too simplistic for my site.
Obviously this theme is still a work in progress, and will be until Twenty Sixteen. You can see what I am working on at code.aidanmontare.net, or by reading documentation as I write it on this page.
Page Layout
todo
Menus
todo
last year had all this stuff:
I also modified the menus so that links with children are not selectable. This makes more sense for my site, since the header pages on the menu have no content for themes.
Technical Notes
I use the parent page field of each page to define the menu on my site. Using this field when I create a page is much easier than using a custom menu. However, I don’t actually want the parent page to exist, I just want to use it as a category to organize other pages.
On my site’s main menu, you will see that the Music category, for example, cannot be clicked. There actually is a Music page, which you can get to at https://aidanmontare.net/music, but it is blank, as I don’t intend anyone to go there. However, the page is in my list of pages in the administration interface, allowing me to make other pages appear under the Music category. I have the Simple Page Ordering plugin installed on my site, which allows me to drag and drop the pages in my All Pages list to reorder them.
The default WordPress theme does not behave like this. If a page has children, the parent page is still clickable.
The Easy Way
The easy way to change this behavior is to use a custom menu, in the WordPress interface under Appearance > Menus. In a custom menu, you can add a link. Go ahead and add one with the name you want to see in your menu. You can then edit the link and clear the URL field or replace it with a #. The link will now go nowhere, and you can add your other pages as children underneath it.
However, one of the reasons I decided to use WordPress instead of writing all the pages in vim (yes, I did consider that heavily) was that I wanted the menus to be done automatically. Its hardly automatic if you have to edit the custom menu every time you add a page. I would much rather just set the parent page in the page editor and be done. Luckily, if you put in some extra effort, you can make the WordPress menus behave.
The Hard Way
(It was hard for me to figure out how to do this, since I had never programmed in PHP before. But it should actually be fairly easy for you since I will try to explain everything here.)
Open your theme’s functions.php file. Insert the following function at the bottom:
/* Disable Parent Menu Function */
function no_parent_links() {
/* Gets the menu the way WordPress would normally do it and stores it as $menu. Note that the 'echo' = false part is very important, otherwise the menu function will not save as a variable and WordPress will output the menu immediately, disregarding your function */
$menu = wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'echo' => false ) );
/* Takes the menu string and breaks it into an array by separating at every "<li" */
$menu = explode("<li",$menu);
$count = 0;
/* A loop that goes through every piece of the menu, and removes the href= part, leaving <a>. This is so the theme will still style the item as it does the other links, even though this one doesn't like to anything. */
foreach ($menu as $item ) {
if (strchr($item,"page_item_has_children") != false) {
$item = preg_replace( '/\<a href=".*?"\>/', '<a>', $item );
}
$menu[$count] = $item;
$count = $count + 1;
}
/* Put the menu back together */
$menu = implode("<li",$menu);
/* Send out the new menu, without parent links */
echo $menu;
}
Then go to your theme’s header.php file and find the line that calls the menu function:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
And replace it with a call to the new menu function:
<?php no_parent_links(); ?>
That’s it. Save both files and reload your website. Hopefully, the site should look the same. If anything looks messed up, go back and check what you typed in to make sure its correct. Also note that I am using the 2014 WordPress theme, and your theme files may look slightly different, but will hopefully operate in the same manner.
If your site looks the same, go and check the menus. You will be able to trigger a drop down menu, but the name of that menu should not be clickable. To add new pages to a menu, just set their parent page to the drop-down you would like them to appear under. To create a drop down menu, simply add a new page without any parent.
(If you have something in your parent pages right now, go put that content in a page that has no children so people can still find it.)
Finally, if you are not using the Simple Page Ordering plugin, I suggest a plugin like this so you don’t have to manually edit every Page Order field to reorder your pages.
Update: I now use the Nested Pages plugin, which achieves the same thing, but with more features and a more visual, collapsible interface. It also automatically generates a WordPress custom menu based on your pages and allows you to add arbitrary links within the page-sorting interface.
References
- This blog post that I based my solution off of. However, his function only works for 3 levels of menus, while this one works for menus of unlimited depth. Also, this function seems to work better for my site.
- a Stack Exchange question asking what I wanted to know.
- see a more recent question on the same subject
- Useful reference guide on PHP
Widgets
Like last year, I added a separate set of sidebar widgets that only appears on my blog pages. On regular pages, you see a table of contents for that page.
Call for Theme Maintainers
Part of the idea behind my WordPress Themes Project is that each year I get to start with a fresh, modern code base, free from whatever messes I might have created over the previous twelve months. This means that I have a convenient excuse not to maintain the themes after the year is over. However, if people find my themes interesting, I would be thrilled to see this theme made more compatible, accessible, and maintained for many more years.
If you are a developer or web designer who is interested in helping maintain this theme and keep it up to date with the newest web practices, please contact me.