Kubrik Theme – Adding Navigation Links

After adding the sidebar to the Singles Post of the Kubrik Theme which comes in default with your WordPress Installation, there is another missin item that you might like to add. There are no navigation links in the Default Theme. The only link that your readers can click back to your Homepage is by clicking on the Header. The easy workaround is to place all your navigation links in your sidebar by using the “Pages” widget. My opinion is it it would be better to have the navigation links just below or above the Header.

To have all the pges displayed horizontally in the Header area, you will first need to decide how you want the links to look. Normally a simple link will have the same fonts and colors with the overall layout. In this case, since we are placing the links within the header, we will want the fonts to be white with no default background colors, The background color when the mouse is hovered on the link is a darker shade of blue.

In order to achieve this, we first have to declare all the attributes that we want in the stylesheet. The complete set of CSS codes will look like this.

/*Top Navigation */

/*End Top navigation */

It is always good practice to include a comment before and after any codes you add so the you will know what those codes are for. Just wrap those statements within these symblos /#….#/ and WordPress will not read those lines.

The size, colors and backgrounds can be changed to your preferences here.

Now that you have what you want in the stylesheet, it is time to make it appear in your header. Open your header php file. Look for the codes that calls up the header banner. In the Kubrik Theme it is written as such.

<div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>


Immediately AFTER those codes insert these codes to call up the navigation links.

<div id="nav">
<ul>
<li><a class="blog" href="<?php bloginfo('url'); ?>">home</a></li>
<?php wp_list_pages('sort_column=menu_order&title_li=&depth=1'); ?>
</ul>

</div>


These codes cam also be used in amy WordPress Themes that do not have horizontal navigation links. The tricky part might be positioning the links. Most of the time, it will be trial and error.

Related posts:

1. How To Add Colors To Your Theme Sidebar There are times when you would like to add some color to your WordPress Theme’s sidebar to make it more unique, especially if you are using a free Theme which many others are using. There are a few ways to go about adding colors to your sidebars. Read more...
2. How To Identify The Color Codes In Your WordPress Theme The colors of a Wordpress Theme are the most changed part when anyone is customizing a Theme. Just a simple color difference can make your blogs theme look a lot different from others who are using the same Theme. It is the second best way to make your Theme...
3. How To Add A Second Header To Your WordPress Theme Just added a second header to my Theme. When I created this Theme, there was no plans at all of wanting a second header as I don’t have anything that’s worth occupying that prime piece of blog estate, but since I am on a subscriber increment campaign, I thought...
4. How To Make Attractive Links In WordPress Making your important links attractive will get the attention of your readers to click on that link. For example if you are on a campaign to get more subscribers, you should make your subscribe links more visible like the example below. Read more on How To Make Attractive Links In...
5. How To Highlight Certain Words in Your WordPress Blog A really simple tip for those who is entirely blind to html. There will be times when you want to highlight certain words with a bright background to emphasize the importance of the words. There are two ways to achieve this. One is to add another class in your...