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" '); ?>href="<?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" '); ?>href="<?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" '); ?>href="<?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 (http://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: http://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 http://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!
href=”/?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: http://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:
http://www.lodicommunityband.com
http://www.stocktonconcertband.com
http://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; http://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.
http://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 http://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: http://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.
http://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 “contact” or “about” or “archives”. So, what do I have to do? Create a folder and put the index file into it?
I’m using wordpress 2.5.
Sorry for my bad english guys.
Hey, I’ve found the solution by myself. The problem was in the “permalink” options. I’ve solved it choosing the “date and name” option instead the “predefined”. Now the nav menu links works perfectly.
[...] Second [...]
Chris,
I added the links based on the lesson here and they are perfect. Only problem is that when I go to click on them, I have 404 messages and I can’t create any content in the WP admin panel.
Any thoughts about this?
Thanks very much if you can get back to me on this
I didn’t mean to say “links” – I meant to say, I added Navigation links to the sidebar
Hi Chris,
Thanks a lot for the great theme
my issue : the rss feed icon not showing on the sidebar. .. I tried changing image, editing code etc etc .. still no luck buddy
Dinu, you need to add a file extension to the RSS icon image reference in your stylesheet. You’ve got a filename in there, but no extension (like .gif, .png, etc).
Chris,
Thanks a lot for your reply….
got it .. along with that, I had folders wrong in custom.css too
Thanks for the great theme. I am using it on my blog right now
Chris, is there any way to make this 3 column theme ?
I found something on copyblogger.com but its broken ..
how do I remove the redline below the header ?
I get a stray navigation link that points to “previous entries” on a page2 that doesn’t exist. Can’t quite work out why this happens.
Maybe because I’m using the “Show on Frontpage” plugin to restrict the number on entries showing up on the index page. Anyway, I want to stop it happening, any thoughts?
Thanks for your theme it is one of the best out there. I’m am running WordPress 2.6.3 w/ Cutline 1.3-3 ColumnSplit. I have a 2 part questions:
1. How do I add a URL link in my header? My blog site is http://www.chocolatecity.cc/blog. I’m trying add a link in my header to http://www.chocolatecity.cc.
2. I’m trying to add a flash header to noavail. Photoshop’s Insert/Media/Flash doesn’t seem to work.
Thanks
Hi Chris, thanks for this incredible theme. I’m using it with slight mods to the colors and other things, including the header.
What I want to do is add a graphic to the header in place of the text, and for that graphic to be clickable. I settled on linking to the graphic from the header.php file, within the div tags.
It works perfect –except in internet explorer. It just does not show up in IE at all.
Do I have to mod something in the header.php to make the graphic show up in IE? or in some other file?
Hi Chris,thanks for the theme. Can i bloggerized your this wp theme into a blogger template? The credit is still yours,of course. Please reply. Thanks.
Hi
Love the Copybloger 3 columnt theme, and hope to get an answer herer, since this post is about menu problems.
When I add pages to nav_menu.php all works fine ACCEPT för when I add a link for “Blogg” ine the “/blogg/” subdirectory.
What happens is that the word “Blogg” in the menu doesnt get the “class=current” style, instead the word “home” (i.e websites startpage) gets the highlighting. But the correct page, Blogg, show up.
I have copied the exact code in nav_menu.php for adding mor links, its just when Blogg is used that the issue appears.
Thankful for help.
Just got this up last week. I thought you would like to see our use of your theme. Thanks!
Hi there,
I’ve just uploaded the copyblogger theme to WordPress. I am not a computer savvy person so I could use some help
I was reading your instructions above so that I could link my navigation bars at the top of the blog – but the instructions that you are giving ie: going to Write -> Page and entering “contact” in the Page Slug. I don’t have that. Perhaps it’s because I have a newer version of WordPress since this came out? Any advice you could provide would be awesome!
[...] 2.7, como threads nos comentários, mas o Copyblogger ainda hoje permanece esquecido – a última entrada no blog oficial é de julho de [...]
Is there anyway to add a header image easily to the theme? Or just copy and paste one into the header image file? Thanks again, John.
[...] 2.7, como threads nos comentários, mas o Copyblogger ainda hoje permanece esquecido – a última entrada no blog oficial é de julho de [...]
This is the best theme i have found and Neoclassical also the best SEO theme designed by Chris Pearson.
Thanks Chris.
[...] 2.7, como threads nos comentários, mas o Copyblogger ainda hoje permanece esquecido – a última entrada no blog oficial é de julho de [...]
Thank you so much! That was really easy and I’m pretty psyched to have “written” my first code.
I don’t know where to ask this question, but does anybody know how to get the rss feeds link to work, I see it doesn’t work on this site either.
Hello,
Is there an easier way to add menu pages to the copy blogger?
Im using it on my site and it doesnt look anything like the actual copyblogger site… theirs looks amazing!
Heres my site… http://ipad-release-date.com
I think im going to change the theme soon if i cant get help.
Thank you so much! That was really easy and I’m pretty psyched to have “written” my first code.
Would love to be able to modify the color scheme of the theme.
thanks for this wonderful theme but a little more graphics won’t hurts much.
I will modify it a little to suit my needs.
Thanks!
This theme looks good. Gota try it. The color contrast is amazing
For those of you who want to add an AUTHOR LINE at the top of your Copyyblogger-themed posts, there’s a very helpful link on the WordPress site explaining how to do so. In a nutshell, you just have to a line or two of code (provided on the site) to the index.php file located under Site Admin –> Appearance –> Editor. This link explains where exactly to insert the code in index.php.
this is really cool theme but does it support threaded comments? plz reoly as soon as possible, thanx!
Just wrote a little article with a link to your theme. Thought I’d take the time to say thanks. I’ve used copyblogger for a while now, so – thanks.
I added wordpress to my hosting site and set up a wordpress site on my domain. How is this different from setting it up right in wordpress? Where are the files now? I’m using Copybloggertheme, but none of the dashboard items you mention in the tutorial are on my dashboard…like ‘write’, ‘page’, ‘page slug’ etc…
It isn’t in the dashboard, it’s on the post or page pages.
Learning php from your article is pretty easy.
Thank you so much.. This theme looks good. amazing ^_^
How can I add the tag to the side bar? Thank you all.
i used copyblogger…its awesome.
Whats the benefit of a menu/links in the header. Doesn’t it take the attention of the header?
the new Wp 3 solve the problem
Leave a Comment