In this article, we will teach your how to add custom navigation to your site built with Koken. this is considered an advanced article which will require making code changes to your theme so be sure that you always have a backup available at all times in case something goes wrong.
For information on installing Koken, take a look at the following:
Editing your theme’s info.json file
Due to how Koken is developed, all of your theme content will be dynamically aggregated from within different files, making it much easier to build theme templates. The purpose of this is to allow you to be able to make individual theme changes without the need to rebuild all pages on the site.
One of the files that stores information about your theme is the info.json file. This file not only stores version and author information, but also includes information about any particular links that are within your navigation. In this section, we will go over how to add those links to your info.json file so that any references to your navigation will display those particular links.
First, open your info.json file that is included with your theme that you want to modify. In this example, we are using the Blueprint theme that is bundled with Koken. It should look something like this:
{
“name”: “Blueprint”,
“version”: “1.4.2”,
“description”: “Bare bones theme for theme developers learning the ropes. Nothing fancy, just data.”,
“demo”: “https://koken.me”,
“author”: {
“name”: “Your name”,
“link”: “https://koken.me”
},
“koken_version_required”: “0.10.0-beta.1”,
“navigation_groups”: {
“footer”: {
“label”: “Footer”,
“defaults”: [
“front”, “albums”, “contents”, “essays”, “twitter”, “facebook”, “gplus”
]
}
}
}
Pay special attention to the navigation_groups section. This section includes any special navigation that is included within your theme. Within this section, you can use pre-defined options, or even make your own links.
Linking to pre-defined Koken sections
Koken has included a wealth of information that you can already set within your navigation menu instead of manually linking to them. Here is a brief overview of them:
- front: This value will link to the defined front page of the Koken theme that you are using.
- albums: This value will add a link to all public albums that you have made available on your Koken site.
- contents: Inserts a link to all of your public images and videos on your Koken site.
- essays: Adds a link to all of your published essays.
- favorites: If you have marked content as a favorite, it will provide a link to your page that shows all favorites.
- timeline: This will link your users to a timeline of all of your recently published content.
- tags: Links to a page with a list of all tags that are associated in Koken.
- categories: This option will link your navigation to a page that will display all categories.
- twitter: Links to the Twitter profile linked within your Koken installation.
- facebook: Links to the Facebook page that is defined in your Koken installation.
- gplus: Links to the Google Plus page that is defined in the Koken installation.
With these predefined linking values, it is quite easy to add your new navigation to various sections of your site. For example, if you wanted to have your front page, albums, and essays defined within your page footer, your code would look something like this:
“navigation_groups”: {
“footer”: {
“label”: “Footer”,
“defaults”: [
“front”, “albums”, “essays”
]
}
}
If you wanted to add a custom navigation group for your header, you would do something like this:
“navigation_groups”: {
“footer”: {
“label”: “Footer”,
“defaults”: [
“front”, “albums”, “essays”
]
}
“header”: {
“label”: “Header”,
“defaults”: [
“front”, “albums”, “essays”
]
}
}
Of course, with any custom navigation groups, you will need to modify your page template to use that navigation as well. Later in this article, we will go over that as well.
Linking to static pages in your navigation
What if your link isn’t something that has already been defined within Koken? Well, you may easily link to that using your info.json file as well. Here is an example of how that would be done:
“header”: {
“label”: “Header”,
“defaults”: [
“front”, “albums”, “essays”, { “label”: “My Custom Link”, “url”: “https://inmotionhosting.com” }
]
}
As you can see from this link, we are creating a new link that will appear as “My Custom Link” and will link to the InMotion Hosting website.
Editing your Koken theme to use these new custom links
Depending on your theme, there may be different location that you will place your links, but the content itself that will be placed will be generally the same. In this example, we will use the Blueprint Koken theme to modify our links.
As you can see from the following chunk of code, our Koken links for the Blueprint theme are located within /storage/themes/blueprint/inc/header.html. Inside this file, you will see your full header information for your Koken theme. The part that we want to pay attention to is the header section within this file:
<header class=”main”>
<!-- Site title editable in console Settings -->
<h1><koken:link to=”front” title=”{{ labels.home.singular }}”>{{ site.title }}</koken:link></h1>
<!– Site tagline editable in console Settings –>
{{ site.tagline }}
<nav>
<!– Inserts primary navigation group –>
<koken:navigation />
</nav>
</header>
Do you see that part that inserts the navigation? The link we are looking for within this code block is this:
<koken:navigation />
This line shows any sort of general navigation. This is good if you want your typical navigation to display, but if you want one of your custom navigation blocks that you previously defined within your info.json file to show, you will need to change it to something like this:
<koken:navigation name=”header” />
Once this line of code is modified, it will then display your previously defined navigation from your info.json file. Just save your theme file, and watch it display your newly edited content.
