Previously on the CogitActive Saga:
The (first) item – Your homepage displays – is present if and only if you have already published at least a page.
As explained in the previous post, this blog defaults to displaying the most recent blog post on the homepage. However, this won’t do for my website, which aims at showcasing CogitActive activities among other useful information. Besides, it contains no blog! Actually, instead of listing blog posts on the front page, my website displays a static page. My theme – Twenty Seventeen – also allows to show pieces of content from different pages, but this is another story.
There is nothing complicated in setting a custom WordPress homepage. In addition, not only a specific page can be set as a static front page, but also it’s quite possible to make a website using WordPress which only contains pages
. As suggested by its title, this post will be about how to use pages to organize the structure of your website content or, to be more specific, how I set my homepage and created my navigation menu.
Adding pages
The first thing you need to do is to create and publish (at least) a page. Otherwise, the Your homepage displays field (in Settings > Reading), which is necessary for the next step, will not be accessible.
I am not going to insult you by explaining how to create a page in WordPress. What matters however, for the task at hand, is to give the page a title (e.g. Home) and to publish it (publicly). You don’t even have to worry about the content (if you have checked the option to Discourage search engines from indexing this site when you configure the settings of your site); at least for now.
Actually, following LattePress tutorial, I didn’t limit my doing to the Home page, but created the four pages I was planning to add to my navigation menu.
Home – Podcast – Consulting – About
At that point, there was no hierarchical structure involved since all the pages were at the top level. However, as I will add more pages to my site, I will also use the parent option, creating a hierarchy of pages (i.e. with pages and sub-pages). For now, let keep it simple, though.
Homepage settings
The next step is to assign a static page as the front page. Now that you have at least one published page, you can see the Your homepage displays field (in Settings > Reading) and you can choose what will be displayed on the homepage of your site.
After selecting the option A Static Page, I simply chose from the drop-down list the previously created page – Home – to be my Homepage. Since I decided to keep my website and my blog separate, I didn’t select a Posts page.
That is it!
Menu
Navigation menus are vital parts of your site’s design because they provide visitors with a clear overview of your site’s structure. Fortunately, WordPress comes with a tool making menus easy to implement. Yet, this last step is a little bit more involved.
Creating a menu
You can manage menus from two locations: either via Appearance > Menus or Appearance > Customize > Menus. I personally favor the first option (see below), but if you want to see the second one in action, you can check this WordPress.com article.
As explained in the WordPress codex, you must define a menu before you can add items to it
1. Therefore, the first thing I did is to click on Create a new menu. I gave my menu a very creative name – Main Menu – and clicked the Create Menu button.
As you can guess from the module Add menu items (on the left), you can add different types of items into you menu: Pages, Posts, Custom Links, Categories, Tags, and Formats. Given my scenario, I used the Pages pane, selected my four pages (Home – Podcast – Consulting – About) and clicked on Add to Menu.
The Screen Options allow you to choose which items you can use to add to a menu.
From the Menu Structure (on the right), I simply dragged up and down my four menu items to adjust their order of appearance. I chose a location2 – Top Menu – in the Menu Settings (on the bottom) and voilà!
Congratulations!
Your new custom menu has now been added to your site.
Customizing Menu Items
By default, WordPress labels the menu items according to the page title they linked to, i.e. original. Nevertheless, you can decide on how it will appear on your site3 by editing the navigation label. Just click the arrow on the right of the item to access this configuration option. From there, you can also remove a menu item if you wish.
Using the Screen option (on the top right of the dashboard), you can also decide to show advanced menu properties:
The Link Target option – displayed as an Open link in a new tab checkbox – controls how the link will be opened.
The Title Attribute allows you to provide a text that will be displayed when a user’s mouse hovers over a menu item
1.
The CSS Classes allows you to add additional optional styling to the menu item.
The Link Relationship (XFN) can be used to show how you are related (in real life) to the authors/owners of sites to which you are linking.
The Description can be used to specify what the menu item is about and will be displayed in the menu if the current theme supports it
1.
The next level
I wanted to keep my menu simple and stick with the most important content of my site. For that reason, I did not opt for the Auto add pages option (in the Menu Settings), which would automatically add new top-level pages to this menu
.
It is essential to have a neat and simplified navigation menu, so as not to confuse your visitors.The WordPress codex
As stated earlier, the four pages used in my menu (Home – Podcast – Consulting – About) are at the top level. Nevertheless, as my website grows, I may add more pages that will be related to these “parent” pages, namely sub-pages (e.g. Podcast #1 and Podcast #2). It will be straightforward to render this parent and child hierarchical structure in my menu as well.
The WordPress menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface . . . Drag menu items left or right in order to create sub-levels within your menu.The WordPress codex
However, suppose I want to add unrelated pages, i.e. not belonging to these four parent items. In order to keep the menu intuitive and well organized, I would have to add additional parent items. However, doing so would clutter the navigation bar. This is where a More item comes in handy. One problem remains, though:
How to create an un-clickable parent item for my future sub-menus?
To create a menu item that is not clickable but will contain sub-menu items, you can simply add a Custom Link menu item (from the left pane) in which you use the symbol # in the URL field and your item name (e.g. More) in the Link Text field. Once added to your menu, you just have to edit this item by removing the # symbol from the URL field.
Using this approach4, I can now add further sub-items to this More item, while keeping my menu well-structured and the overall browsing experience more pleasant.
Granted, with only four pages, I can’t really lecture on website hierarchy. Nevertheless, it remains that the structure of your website has a significant impact on your visitors’ experience. It also leads to a better understanding of your site by Google. These preliminary steps – defining your homepage and creating a navigation menu – are the low-hanging fruits. There are many other tools to implement in order to improve navigation, but there will be another time for that.
1 See WordPress Menu User Guide. ^
2 If your current theme supports custom menus, you will be able to add your new menu to one of the Theme Locations. Otherwise, you will need to add your new menu via the Custom Menu widget. Twenty Seventeen offers two menu navigation areas to include custom menus: Top Menu and Social Links Menu. ^
3 For example, when I changed the title of my home page from “Home” to “What is CogitActive?”, the related menu item was automatically changed as well. I wanted this menu item to be “Home”, despite it pointing to a page entitled “What is CogitActive?”; therefore, I edited the Navigation Label field accordingly. ^
4 To give credit where credit is due, I first discovered this trick in this post from WPBeginner, but confirmed its validity with other sources, including the FAQ at the bottom of the previously mentioned WordPress.com article. ^