/images/header_2.jpg "Cutline Theme for WordPress")
Cutline comes pre-loaded with three navigation links in the header:
- Front Page
- Archives
- About
That’s all fine and good, but what if you need more links in your navigation menu? In this quick tutorial, you’ll learn just how easy it is to add these links in seamless fashion.
Learning by Example
Let’s say that you have two pages that you want to add. The first contains pictures of your beloved dogs, and the second is a contact form that you’ve constructed to allow readers to give you targeted feedback. The two pages are called “dogs” and “contact,” respectively.
The end result we’re looking for here, then, is to have a header that contains the following links:
- Front Page
- Archives
- About
- Dogs
- Contact
One thing to note before we get started, though, is that you must actually create these pages before you can link to them. If you’re new to this process, here’s what you need to do (for the sake of this example, we’ll create the “dogs” page):
- Log into your WP Administration panel and click on the Write tab.
- One of the sub-navigation tabs should be called Write Page — click on that link to go to the Page editor.
- This is the most important step. Maximize the Post slug module (pictured above at right) that lies to the right of the post entry box. Enter “dogs” in that box.
- Once you’re done entering your page content, click on the Publish button.
After you’ve created your pages with the proper post slugs, it’s time to open up the header.php file and make the edits that will force these new pages to display as navigation links.
Editing your header file to add new links
Your navigation links are basically just an unordered list of links. If you haven’t made any changes to the file, then you’ll see four menu item links in your header.php file:
- front page
- archives
- about
- RSS
The list item code for the about link contains the code that you will need to copy for your first link. In this example, we’ll start with the “dogs” page.
Alright, your default code for the about link looks like this:
<li><a <?php if (is_page('about')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/about/">about</a></li>
Copy this code and then paste it directly underneath the existing about list item (<li>).
Apply the edits in red from the following snippet of code:
<li><a <?php if (is_page('dogs')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/dogs/">dogs</a></li>
Follow the same process for the “contact” page, but replace all references to “dogs” with “contact” in the above code.
Once you’re done, FTP the new header.php file into your Cutline theme directory.
If you’ve done everything right, when you visit your new pages, the navigation links will be green and underlined.
I replaced the links in
header.phpwith a call towp_list_pages()(a standard WordPress function), like this:<li class="page_item<?php if (is_home()) echo(' current_page_item'); ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home: <?php bloginfo('name'); ?>">Home</a></li><?php wp_list_pages('sort_column=menu_order&title_li='); ?>
<li class="page_item rss"><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
Also added a CSS item for ‘current_page_item’, so the links are properly underlined.
This way, I can manage everything from within the WordPress prefs, without needing to edit header.php for every link I want to add or change.
Javier,
This is an elegant solution to a very pesky problem that is common among blogs.
The only thing that some folks might find restricting is the fact that all of your WordPress pages will be listed in the navigation links if you use this code. There is, of course, a way to exclude certain pages from that list, but I wonder if this might be getting too technical for some folks.
Either way, I really like this solution, and because it involves the use of a standard WordPress function, I will likely include it in the next release of Cutline (with attribution, of course).
Thanks for your contribution!
Somewhat unrelated (?).
I’m running Lyceum 0.33 (which I highly recommend for people who want to manage several blogs from one location) and dropped in the Cutline Theme.
Everything seems to work like a dream, except for the “Cutline Archives” checkbox does not seem to do much of anything.
I cannot figure out why not. Any hints on which files I might need to revise?
Thomas,
Follow these steps to get your archives working:
Once you’ve done that, your Archives page should be active.
More Feedback, Less Spam: WordPress Contact Form Plugin | Tubetorial // Oct 17, 2006 at 3:08 am
[...] Read up on navigation links at the Cutline support site. Bookmark this Tubetorial:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
What if I want to create links to external sites, not just pages within my blog?
Then instead of utilizing the PHP in the link declarations, simply hard-code the links themselves.
Dear Chris,
I’m setting up my first ever blog. I love cutline, but am having some problems customizing it. I’ve managed to create navagation links and use other images, but links aren’t green or underlined, the pages aren’t what I need etc. I’m assuming that these are really basic issues that I can resolve once I understand how blogs are structured and actually work. Can you suggest a site, tutorial or book that will give me the basics in an easy to understand form?
Thanks,
Me again. I’m getting my head around all this and most things are now working after I started again from scratch.
However, I’m still having a problem with 2 pages. I want them to be like the about page, but I’m getting 404 pages and the links are not green and underlined. I’m using a custom permalink structure: /how2gethealthy.com/%postname%/ which works for the front page, about and contact page. When I switch to the Blix or defaul themes all pages work fine. Also, when I edit the pages everything looks right in the preview pane, but when I go to the site, it’s not right.
Can you help?
Resolved it! Because the page names have two words and the post slug puts a dash between the words, the code in header.php needed a dash too.
href=”/good-dogs/”>good dogs
Sorry about all the posts, but maybe they are helpful to other beginners.
Nice work, Brenda!
Yes, by default, WordPress automatically adds a dash to post names in URLs in place of spaces, dashes, colons, and most other special characters. Apostrophes get nuked, I think.
Chris, I followed you r instruction, but I keeo getting 404s on my pages i created in wordpress for about and my new TopTen.
HELP!
Hi Chris,
Great theme! Love Cutline! I have one question. I already have extra pages created. 3 to be exact. How do I add these to the navigation. I don’t want to have to recreate them if I don’t have to.
Scott, follow the instructions from the post, but use the post slugs of your existing pages. It should be a breeze!
Bryan: You need to change your permalink structure or else account for the way your permalinks are currently constructed. All the info you need to make this happen is contained in the Cutline article, Why Don’t My Archives and About Links Work?
Hi Chris,
Followed the post to the T and it worked like a charm! Thanks a bunch!
Great Work!
Is there a way to get a tag line to show up?
done! thanks!
Hi Chris,
I added a navigation page called Author’s Forum, but now it won’t underline like all the other links? Any ideas?
Scott, you’ve changed the code to that suggested by Javier in one of the above comments. As a result, you’ll have to add your own CSS definitions to handle this new header structure.
If you want to work off of the old header structure, all you have to do is follow the directions in this post, replacing all instances of post slugs with the appropriate slugs from your new pages.
If you want to see a visual example of this, watch how I added a Contact link to the navigation menu in this video.
i followed your instructions to add extra nav links to the header. when i do that, the links show up at the top, but i get a 404 error and it can’t find the page (mosaic-seattle.org/word/contact). however, if i put “?page_id=7″ for the url path in the href part of the line in header.php, then the page is found. any thoughts? thanks!
thanks for your site you are a genius. I am wanting to put up one page right now. I am using wordpress and not sure how to get to the about part of this.
I did what you said to start with the post slug but when I put it in last night I had the post that came up saying I was in the wrong place.
confused but eager to learn.
oh and how do I upgrade thru wordpress to the new design?
thanks again and again.
Hillary,
In all likelihood, you have not yet changed your WordPress permalinks. I highly recommend doing so, and you should be able to accomplish this by using two great resources on the topic:
Oh, and check out this video, which shows you how to install and activate a WordPress theme.
guess what I didnt realize I was to do this in html and probably reacted instead of taking a moment.. forgot my yoga. I did it and it worked thanks for taking me over to the html world.
I will look over what you said above and makethose changes….
thanks thanks and thanks again.. if you are into yoga try out my podcast … its a level one.
Chris,
I’m having a problem that I can’t figure out anywhere I look. I don’t know if it’s in the Cutline templates or somewhere else. Perhaps you know.
For my blog at http://www.hubbers.ca I have the following link for to subscribe built into the nav bar ( http://www.hubbers.ca/?feed=rss2 ) and it seems to work fine.
However, for the Feed icon that shows up in the Firefox address bar, it brings me to the comments feed rather than the posts feed.
Do you know where this is set?
Glenn
Th
Glenn,
At first, I believed that burning a few different feeds off of your page might be the problem. I checked that condition at Pearsonified (where I burn three feeds), but my live bookmark in FireFox works just fine over there.
So, either you have a plugin that is skewing things, or else you can modify a reading/syndication setting in the WordPress Administration panel (likely in the Options section).
Thanks. I have reduced the plugins to a very small list, even deleting the ones that were not activated, and can’t find anything in the Options section.
Perhaps this is a problem with my web host, Netfirms. I have real problems with them in terms of Permalinks and I am looking for a new host, so maybe this problem will go away when I move the site.
Glenn,
I’m not sure the host has anything to do with this, but you never know.
Try making this change in your
file:
Right now, your RSS link refers to:
http://www.hubbers.ca/index.php/feed/Try changing that to:
http://www.hubbers.ca/feed/and see if that doesn’t fix things.
I noticed that by changing my permalinks to date and time based that my RSS feed link in the header bar no longer works. Can you offer some assistance here?
Thanks in advance.
Drew
“Jen // Oct 17, 2006 at 4:45 pm
What if I want to create links to external sites, not just pages within my blog?”
Jen,
I’m not sure if you’ve figured this out yet — it doesn’t look like it. I had to add a link to an external site, to a separate photoblog. Here’s how I did it:
First get the Links_To plugin.
Then, write the page just like Chris describes above — but in addition to adding the post slug, also add a Custom Field of “links_to” (without quotes), and then put your external url in the next field.
Then, in header.php, you shouldn’t copy and then replace that entire “about” snippet. Instead, just do
externalChris,
Any chance of writing a tubetorial about changing background colors (or, in my case, adding a tile). I can’t quite wrap my head around where to add the paddings. You mentioned in the comments of another post that you were thinking about writing one. I want to have a tile in the areas that don’t have text. I’ll keep trying… but a ping pong game’s a’calling right now.
Thanks for the great theme! I’ve tried many in the past year, and this is by far my favorite.
Darn it, I did post that code correctly. Trying again.
photoblog
Chris, sorry for pasting the code wrong twice. I figured it was either a code tag or a pre tag. Anyway, here’s what I was trying to paste, except with brackets.
[li][a href="http://your.external.page"]external[/a][/li]
I just installed cutline today and love the layout. However, I had some pages already that now won’t display. I put them in the header file and then the links showed up but it seems its calling for the file in a new place? How can I rectify that?
Mike
Hi Chris,
I’m a blogging newbie…I love the Cutline theme but don’t know much about anything. I’m trying to add new pages to my site and have followed the first half of your instructions (through setup on the manage tab) However, can’t seem to locate the correct header.php file. I am looking at it in some huge URL.
But when I click on the View link, all I see is: (something that got omitted)
Dorothy,
I don’t know enough about Yahoo! hosting to advise you one way or the other. You may try contacting their tech support for assistance.
Chris,
I followed your advice to Thomas on Oct 6th above but can’t seem to resolve the 404 error. Any ideas?
Thank you,
-jaery
ouch – I’m such a pro at comments… I get a 404 error with About and Archives even after the WP/Manage/pages/edit/save routine you mentioned on Oct 6th. Any advice would be appreciated.
Hey Jaery,
After spending more than an hour figuring out how to add my archive page, this is how I did it:
Follow these steps to get your archives working:
1. In your WordPress Administration panel, go to Manage and then Pages.
2. Locate your Archives page and select Edit.
Tip: If you don’t have an archive page (like me), do this:
a. create a page
b. call it archive (in title)
c. In post slug (on the right sidebar), write: archives
3. Do not change anything on the page itself — instead, simply click Save.
It should work like this.
Let me know if you have any problem.
Is it possible to get the “current”-class to work on more pages than one at the same time? (I’m talking about the Navigation links in the header).
I have a page called “contact” with a sub-page called “contactform”. Only the “contact”-link is visible in the header-navigation. I would like that “contact”-link to have the “current”-class (so the link shows up in green) even when I’m viewing the “contactform”-subpage.
I hope I’ve managed to explain my
problemtask in an understandable way (english isn’t exactly my first language!)I figured it out myself. I just had to put the is_page(‘contactform’) in together with is_page(‘contact’) and it works like a charm.
M-alo,
You nailed it! Nice work.
Hi Chris,
Okay, this is a really basic, basic question (but I’m new to this blogging thing), but where do I actually go to find the header.php folder?
Hi Chris,
Thanks for a great theme. Your theme and tips really improved my site 200%.
Couple of questions though:
1. In the sidebar, how and where do I change colours of the links? I know it should be in the stylesheet but I do not now exactly where.
2. I am missing search from the site, like it is on the Cutline HP. How do I implement that?
Regards
Francois Wessels
Can’t seem to get the Nav links centered up there (instead of set left) no matter what I try… anyone?
Thanks much.
rb
I set up Cutline today and it works splendidly so far, but I’ve noticed a small glitch…not sure if it’s my fault or not.
I cartoon today and it appears fine on the main page and on its individual page, but for some reason it doesn’t appear in the monthly archives:
See this link to see what I mean.
The post appears, but the image doesn’t.
Any suggestions welcome, thanks!
Debbie,
By default, archives are constructed with
the_excerpt(), which is a standard WordPress function that does not reproduce things like paragraph breaks, images, or other standard XHTML entities.If you want your images to appear in your archives, then you’ll need to copy your post (or however much of your post you wish to show) into the Optional Excerpt field that you’ll find on the Write Page screen.
Thanks, Chris!
Hi Chris,
Thanks so much for cutline–it’s designed beautifully.
And thanks for responding to our questions.
I’m trying to set up my site, and I’m having trouble getting the archives page to keep an active archive, not just be a static page. Is there a good way to set it up so that each new post will be cataloged on the archives page? So when people click on the archives page, they’ll get to see all the posts?
Thanks for your help.
Cheers,
Travis