Prologue
Twenty Fourteen was the year I started aidanmontare.net. While I originally planned to use the default theme only temporarily until I developed my own, I realized I quite liked the default theme. I modified the theme somewhat to fit my site, but mostly kept the existing look and feel.
For a while, I was still planning on developing something that was uniquely mine. However, I realized that things change rapidly in web design, and that I would likely want to make modifications to any theme I created. It would be nice to have the freedom to try out different ideas without being tied to the one theme of my site. It would be a real pain to constantly update the same code to meet new standards, and no matter how much I worked on my site’s design, I knew I would never quite be happy with it.
So I came up with an idea that would let me have a modern code base with the freedom to experiment in whatever direction I chose, and even start over fresh. The AidanMontareDotNet Themes Project, as I shall call it.
My plan is simple: each year, I will update my site to the newest WordPress default theme (it’s like Christmas came early!). I use Git for managing my WordPress installation, so I can easily create a submodule (though I am looking at subtree as well) out of the default theme. Throughout the year, I will modify the default theme to suit my site, my tastes, and my inspirations. I can easily experiment with new ideas, and can always revert the commits if it doesn’t work so well.
I will also create a public Git repository for my theme at code.aidanmontare.net. While the ideas I am testing on my dev WordPress will remain on my computer, the Git repository will show the history of the upstream, master, and development branches, allowing anyone who is interested to see what my changes were or implement some of my ideas on their own site.
None of these themes will be suitable for the submission to the WordPress theme directory, as they will be heavily customized to fit my site specifically. However, I will keep the GPL license of the original theme, so anyone who wants to can build off my work or adjust it to their own site.
About This Year’s Theme
The Twenty Fourteen theme is where I got my start, and though my modifications were small, I wanted to make the entire history of my themes project available.
This is a retrospective project, so little Git history will be available, since I did not even use Git when I first started my site.
Below is an overview of the modifications I made.
Page Layout
My largest change (at least for those with big displays) was centering my site. On large screen sizes, the page content now stays in the center, which makes more sense to me. However, I hope to improve the page layout in future designs.
Menus
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
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.