← Subscribe to Comments Plugin Updated for WordPress 2.2+
How to Add Navigation Links to Your Header
July 5th, 2007 | How To
As you add content to your site, you’ll no doubt want to edit the navigation links that appear at the top of each page. Fortunately, this is extremely easy to do with the Copyblogger Theme, and with the help of this tutorial, you’ll be able to get the job done in less time than it’ll take you to brew that next pot of coffee.
You need two things in order to get started:
- FTP client
- text/code editor
Since you needed an FTP client to upload this theme to your server, I’m betting you have #1 covered. Also, since 97% of you are running either Windows or OS X, you’ve likely got a default text editor you can use to satisfy #2 (Notepad or TextEdit).
Oh, and this tutorial assumes that you’ve already implemented smarter permalinks. If you’re not sure what that is or how to do it, I highly recommend checking out this video for more info on the topic. But hey, even if you haven’t changed your permalink structure or are unable to do so, I’ll still show you how to add navigation links to your header (cause that’s how I roll).
Navigation Menu Example Tutorial
For the purposes of this example, let’s say that we’ve created a contact page by visiting Write → Page in our WordPress Dashboard. We’ve also made sure to write contact in the Page Slug box on the right, as this will determine the final URL for our newly-created page.
Once you’ve created your page, it’s time to fire up that text editor and open the nav_menu.php file that is included with the Copyblogger Theme. The file contains only three lines of code, and you’ll want to pay special attention to line #3, which will serve as a “template” for adding your new link. If you haven’t edited anything, line #3 should look like this:
<li><a <?php if (is_page('about')) echo('class="current" '); ?>class="<?php bloginfo('url'); ?>/about/">about</a></li>
In order to add your new contact page link, you’ll need to copy and paste line #3 on a new line. Now, replace all references to the word “about” (shown in orange above) with the Page Slug you created earlier. In this example, our Page Slug is contact, so our new navigation menu link code should look like this:
<li><a <?php if (is_page('contact')) echo('class="current" '); ?>class="<?php bloginfo('url'); ?>/contact/">contact</a></li>
Now, all you have to do is save the nav_menu.php file and upload it to the Copyblogger Theme directory on your server. Voila, your navigation menu is updated!
Oh, and your coffee is ready
I use the default permalink structure… can you help?
If you’re using the default permalink structure, then you’ll create a page just as shown in the example above, except this time, once your page is created, you’ll need to visit Manage → Pages and locate the unique ID of the page you wish to link. Now, after copying and pasting line #3, you’ll need to replace the second reference to the Page Slug with a reference to the unique ID. For the example scenario posed above, the proper code should look like this:
<li><a <?php if (is_page('contact')) echo('class="current" '); ?>class="<?php bloginfo('url'); ?>/?page_id=8/">contact</a></li>
Note that there is only one change to the code—the destination of the link has become ?page_id=8 instead of contact. Pretty simple, huh?
109 comments ↓
Since this theme does not have the usual verbiage just before the Comment box, how do I find my trackback address?
Thanks.
JHS — Trackback addresses in WordPress are universal, meaning that they are the same no matter which theme you are actively using.
For WordPress blogs, simply using the post’s URL is adequate for a trackback. For other blogging systems like MovableType or TypePad, you’ll need to append the post URL with
trackback/in order to properly generate a trackback.Thanks, Chris. I never knew that!
I love the Copyblogger theme and am using it on 2 of my sites: jhsiess.com and tokaylodi74.com
Chris, thank you for an excellent theme. And assistance you provide on this blog.
I have a question about the plugin More From Google (windyroad.org/software/wordpress/more-from-google-plugin). Is it compatible at all with Copyblogger?
It appears, not surprising, that the two search functions interfere with each other. I get a “parse error: syntax error” message, when I click on the More From Google link. It references line 7 in the theme’s search.php.
I have tried the plugin on only one page of the blog: blog.readrinky.com/howie-schneider-creator-of-eek-meek-dies-at-77/
Any work-arounds you can think of are appreciated. Of course, if the MFG plugin and your theme just can’t play together, I understand. Thanks for any help you can provide.
Hi Chris,
Thanks for the theme. I’d like to use it but it isn’t coming up in my choises under the presentation. I have uploaded the folder copyblogger and its contens to wp-content/themes/.
Any ideas on how to get it to show up as one of my choices for presentation?
Thanks.
Lisa
Is it possible to put a graphic in the header of this theme?
Chris, thanks. Is it possible to include external links in the header navigation? I run the blog as an extension to my webiste and would like to include a few links from the main site.
I really like your theme, thanks! I’m very new to wordpress but can understand instructions. I’d like to know how to get the “about” page to link to one of the pages I created. I created a page and put the slug to “about” but that didn’t work. Any advice is appreciated. Keep up the good work!
Thanks for your insight. Is there a similar mav_menu.php in the 3 col Cutline Theme. I ‘m challenged with getting pages to show up – can you pint me to current files.
Love the theme, and wonder if it would be easy for you to share how to modify it to allow comments on pages as well as the blog page?
Thanks
How can I add the calendar to the side bar?
Thank you all.
Hey Chris, I use your cutline theme at www.themixtapemonster.wordpress.com , but I can’t figure out how to get my Blogroll links to show up on it. Any ideas? Shoot me a line at themixtapemonster@gmail.com if you get the chance. Love the theme.
Thanks for this…I was a little puzzled for a few minutes!
P.S. – I had a nice little chuckle to myself when I read the 404 page…very witty!
Just discovered that the search function doesn’t find anything on pages like about and archive. Also not on this site. Does anybody knows about it and about solving the issue?
Ben Licher – I’ve been using the Search Everything plugin, and it seems to work for what I need.
Thanks a lot Kirk, I wil check the plug in.
Well Kirk, I searched your site for: The Views of a Tardy, which is on your ‘about’ page and ‘Hmm, no results… try again?’ was the result
.
I’m using the theme as it came. I will dive into it. And let you know if I find something.
Ben – I have the option turned off to allow the search to include other pages. My “About” page is empty for the most part, but once I put something there, I’ll keep the Search Everything turned on.
I went ahead and turned it on so you could check it out. Just type any word from my “About” page, and it should work.
Here is what else I’m using at the moment as far as plugins I’ve found helpful.
Enjoy.
Previous link didn’t work…here it is again.
It works Kirk, thanks a lot. Lovely list of plugins you use! I wil check them.
[...] link in the header of the page did not display the archives for my site. I reviewed this article which talks about adding links to the header navigation area, but it did not have any information [...]
hey guys, I am a teacher and all of my students need to use IE6 ( I know!) anyway, the font for the navigation links renders really badly for them, does anyone know whick file I would edit to change that font? I think it is just courier, but if nothing else I would like to make it a little bit heavier.
If anyone knows how to do this, would you please e-mail me and share….
Thanks!
Robin.
Robin — Line 46 of your
custom.phpfile begins with.custom #logo a. Locate that line and modify thefont-familyattribute to something like this:font-family: Tahoma, Verdana, sans-serif;I just added this theme to one of my blogs. When I go to post a comment it doesn’t work. The site gets stuck on wp-comments-post.php
hi
i like your theme very much and i tried using it for my blog. But when i create a new page such as “about” or “contact” it is not getting linked to the top header. i get the following error:
Not Found
The requested URL /blog/about/ was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Any advice is much appreciated. Keep it going!
Great Theme Chris, i`m having a play around with it now. Same as hkarthi i`m unable to get the new pages to be `found` …. I`ll dig about in the header file.
Got it …. changed to the below approach and no probs!
class=”/?page_id=8/”>contact
Thanks again Chris!
dude! my blog is not nice to view in IE.can anyone help me?
Chris, how can I display author’s names on each post. I’ve got a site with 3 different authors. I love the template. Great work.
Chris: I started to modify comment.php to separate comments and pings, but then noticed the verbiage referencing that.
I get pings, but they don’t show up on my site. On the front page of one post, for instance, it says “16 comments.” When you click on the perma-link and open that post’s unique page, you find 5 comments displayed.
1) How do I get pings and trackbacks to show up?
2) Will they be separated simply by virtue of using this theme or do I need to do something further?
THANKS!
Hi, first of all – I like your theme very much. But i have a problen with the Flickr Photo Album plugin in combination with firefox.
With the Internet Explorer everything looks nice but with Firefox which most of my friends use, the page looks a kind of defaced. Have a look at: servus.homelinux.org/blog/fotos/album/72157601916931875/
The footer of the Photos page is above the the main page. Any ideas how i can fix this?
Kind regards.
Hi, I am trying to add a link on the navigation to my static website which is a different domain hosted elsewhere. Is there a way to do this? I cannot find a link id for this site in my blogroll so i wouldn’t know how to reference it using your tutorials above.
Thanks.
ps lovely, lovely theme, Chris!
Hi Chris:
I just wanted to note that I use Copyblogger on several of my sites. I upgraded to 2.3 on 3 of my smaller sites and it works just fine! The only problem is an error message related to categories that is showing up on the dashboard. I believe Brian wrote about a fix . . . I just haven’t had time to play with it fixing it yet.
You can see 2.3 + Copyblogger in action at:
www.lodicommunityband.com
www.stocktonconcertband.com
www.clintritchie.com
I have not yet tried upgrading my main site, Colloquium, due to time constraints. I will play around with it this weekend.
Thanks for your wonderful theme! I love it and receive a lot of compliments on the clean, easily readable and navigable layout. I have had fun customizing it, too. I just dabble . . . don’t know php, but do know html from the old days of building static sites, so I’m slowly but surely figuring a few things out. I appreciate that the files are easily understood by lay folks like me.
thanks for providing this great theme!
would also have been great to see an updated version for WP 2.3 so that tags can be showed in each post
I just wanted to say thank you, you really went out of your way to document a great free theme.
We are using it as a temporary design on our new los angeles magazine; www.la.cityzine.com the designer who is making the final theme was little surprised to see it looking so good in the interim.
Is there an updated 3-column theme for WordPress 2.3?
[...] process are nav_menu.php, style.css, custom.css and footer.php. There is already a good post about changing or adding navigation links on the theme homepage, so I’m not going to talk about that. Chris Pearson, on his own blog, [...]
Hi, I’ve translated this theme into Esperanto, if you’d like to offer a translation download somewhere.
engel.co.nr/copyblogger.zip
Thanks for the theme and the super easy instructions. Adding the sitemap was easy once I found this article. Thanks.
Chris, I like this theme but I have a problem to enable “Archives” page.
Could you include this archive page instruction like Cutline theme do?
Thanks.
How do we move the navbar from the header to the left sidebar like on Chris’s site copyblogger.com?
thanks
I am trying to add navigation links to the sidebar, and want them to have the ‘bullet.gif’, like the other links do.. what controls that being included with links? Thanks!
Chris, thanks for the article. I changed the archive in the header to something else because I figured the sitemap does the same thing.
Chris, love this theme!
We’re trying to center our logo in the header. What is the best way to do this? Thanks.
BTW-logo already appears, we just can’t get it to center properly…
I like it.. Just tried it out and it worked, no problems. Thanks.
Awesome theme and thank you for putting so much time into it! I hate to ask but will there be an updated version for wordpress 2.3?
Hi, just wanted to say I LOVE the theme. I used it already on a website that’s been up for months…very clean. I love how when you highlight a link it blocks it in red. Yeah, I appreciate the little things.
either way, good job.
Chris — The actual list of changes that must be made for complete 2.3 compliance is short. If you’re talking about tags, however, I probably won’t include those because of their contributions to link saturation on people’s sites. This is a condition that negatively affects a site’s SEO (more of my thoughts here in paragraphs 4 and 5), and it’s not something I’m going to encourage by including it in my templates.
Of course, if the situation ever changes and tags are nofollowed by default, then yes, I’ll absolutely make room for them on my themes.
Be that as it may, I’m hoping to have an updated version of Copyblogger complete with a new, modified version available for purchase by the end of January. When the time comes, I’ll be sure to announce the news on this site.
Chris — I have posted even more in-depth thoughts on the use of tags with WordPress sites.
Chris: I just want to be the first to say that when you have an updated version of Copyblogger ready, I want to know about it! I LOVE this theme and have been using it on several sites since shortly after you released it.
What I would LOVE to have is all the current cool features of Copyblogger == especially the type styles, etc. — in a magazine format. In fact, if you need someone to test such a product, let me know because I will happily do so and advertise it on my sites! I love many of the magazine-style themes, esp. Brian’s, but the fonts are always too small. I just wish I had the ability to do the coding to implement Brian’s Revolution Magazine style, for instance, into your overall Copyblogger “look.” To me, that would constitute the penultimate WordPress theme!
Chris,
Awesome Theme! It is GREAT. I was wondering if anyone knows how to make the sidebar be on the left, instead of on the right.
I’m looking for a more traditional type layout, and would love it if anyone could help out in this sidebar movemento.
Mucho Gracious,
Brad
Hi Chris,
Amazing theme. I edited the theme to make the primary column wider. I also resized the comment backgrounds, but why is the comment_top image being chopped off from the right ?
very useful tip,just learn it,thanks
Chris, great theme! I’m trying to figure out how to change the header to include my logo and a cool flash gif show – is it possible – reading like a fiend here to figure it out! Thanks, Mia at www.neofusenews.com
Hi, Chris – I’ve installed the theme on my site, and so far, it’s been great! I echo the question from Manas (#52) about widening the main column. In addition, I have two other questions:
I can’t quite figure out how to make all of the links on my site, when hovered, show a green underline. It seems to only work on my widgetized links (archives, categories), but all others don’t behave the same way.
Also, is it possible to make the internal navigation links appear on the same line? Or is that just a built-in safety for longer titles?
Thanks for your help!
[...] ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac dui auctor orci varius pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla eget diam. [...]
wow! this one is good and thanks but can i customize it for my own taste?
Chris…
My Copyblogger works great on Firefox but not on IE. Any suggestions?
Jesse scabbarded the forearm for what seemed like hours, but what was tactiemily only 30 minutes. I turned my proposal to erupt his spasmotic move.
I can’t make my site work correctly in ie7 and ie6… Using this theme and haven’t changed anything in code and CSS. What am I doing wrong?
well maybe its not IE compliant you may apply some IE CSS hacks for that to make it both IEs
Hi Chris:
First let me start by saying, I know you’re not for hire.
We just added the copyblogger theme to the our blog and we cannot add Permalink, Email This or Trackback to append each post.
Editing the Main Template has not worked and editing Single Post has not worked.
Any ideas?
Thanks!
chris,
i’m wanting to put a image/navigation menu in my header…? how do i do that? I built it in fireworks as a png, and then can export it into htm format… is there anything i can do or am i out of luck?
seen here: www.duregger.net/header.htm
thanks, btw – your themes are killer
Chris,
Like Leonard I run a group blog and would to know how to make the authors names show up. I am new to Word Press, and while I have little trepidation about going on my own any help would be greatly appreciated.
Great theme.
Thought I’d mention that with wp 2.5, the permalink settings have to be changed to allow for editing slugs.
wordpress.org/support/topic/164946
WH, thanks for the tip on the permalinks. Much appreciated.
Hi,
I have been trying to set up a blog for two weeks now, and tonight I found, downloaded, and edited (with basic CSS skills only), your theme, with barely a hiccup. Just wanted to say a huge thanks, hopefully my dreams will not consist of CSS coding tonight!
I just have a small problem in regards to a graphoc header I put in, it shows opposite in Firefox and IE browsers, I want it to centre with the text body, but when I try putting the code it, it reverses on each browser….
Thanks again….
i’d download this theme; and copyblogger theme too.
thanks a lot.
but need a small tweak to looks like copyblogger..
Hi Chris, thanks for this great theme. I’m a newbie and I’m having a problem with the nav menu links.
I’ve created a contact’s page using your instructions, but when I click on the link in the nav menu, I can’t visualize it. The browser tells me that in the folder /contact/ there isn’t an index page and that I have to create a page named index.html or index.htm or index.php.
The fact is that I’m using the Altervista’s host and I don’t know how to fix the problem. In the blog’s database there isn’t any folder named “cont