The Copyblogger Theme is the theme that was previously used by Brian Clark. When he upgraded, it was released for public download after a major spring cleaning by Chris Pearson. It however retained the looks of the original. As expected the Theme was very well received at that time mainly because it was a Theme used by Copyblogger to tremendous success and many wanted to imitate that success. Another was because the Theme had a really clean and uncluttered look which many favored.
Till today, 2 years after the release, there are still bloggers looking to use the Theme. Unfortunately, the Theme has been left redundant after Chris Pearson left for bigger things doing the Thesis Theme. After so many WordPress upgrades, the Theme, even though still usable, cannot take advantage of all the new features that WordPress offers like Threaded Comments and better image alignment display.
To be fair, the Copyblogger Theme is a theme that was very advanced for it’s time. The only major function missing was Threaded Comments and the new way WordPress reads image alignment tags. Since there are still many who had queried for this Theme here, I take this opportunity to do a minor upgrade to make if fully compatible with WordPress 2.8. There are also some cosmetic change for those who wants it which can be turned off easily if they want to keep the original look. All they have to do are some small changes in the custom css. Without further ado, let me present to you, the Copyblogger Theme Upgraded.
click to enlarge
The original look keeps all the default settings except now you have threaded comments and better image alignment. On activation, the Theme keeps it’s default looks. The only difference is the navigation links have been moved to the top right corner.
The custom css is where the magic starts. Some do not like the fluid header and footer which spreads right across your monitor. To shrink the header and the footer to the size of your contents area open your custom css file and look for this line of comment
/*—:[ uncomment the following if you want the new look]:—*/
Right underneath, you will see this symbol /* followed by all the customized codes. Scroll down until you see the closing comment symbolized by this */
To make the Copyblogger theme into a totally fixed width Theme with the header and the footer shrunk to fit the contents, remove the comment symbol at the beginning and at the end of those codes. Like magic, the theme will change to look like this:
click to enlarge
Of course then you would want to use your own logo design. Just underneath that piece of code you will find this comment:
/*—-:[ uncomment to display your personal logo..]—*/
To display your personal logo rather than use the default WordPress headlines and taglines, remove the /* at the beginning and */ at the end of those codes.
Now your header will look like this:
click to enlarge
You will of course have to make your own logo. The width should not be more than 800 px and the height should be at least 100 pixels. If your image has a different height, then specify accordingly in the first line of code. Also remember to change the image path should your image have a different title or extention. The default is 'images/copy-logo.jpg' .
The most common mistake that most make when making these changes is they type in the comments symbol wrongly. Remember, the opening enclosure is slash asterik (/*) and the closing one is the opposite, asterik slash (*/)
The possibilities are endless if you are adventurous enough to experiment with the customization of this theme. Do whatever you like in the custom css. There is a big bunch of codes there that are ready to be customized included by default. Change whatever to your heart’s content. As far as possible, do not touch anything in the Stylesheet. This way, even if you screw up big time, all you need to do is to delete whatever you have done in the custom css file and the theme will revert to it’s original look. It is a good practicing ground if you are learning to customize WordPress Themes
All other aspects like SEO friendliness of the Theme are left intact. The only affect might be the navigation links. In the original, whatever new pages you have, you will have to add in the links manually in the nav_menu php. It was done on purpose as this would allow the user to have full control on their links, giving them a choice of displaying links of their choice or adding a no-follow to the links. There are plugins now to do the job, so I automated the process and whatever pages you have now will appear automatically.
Tutorials are still available at the Copyblogger Theme Blog on how to use the Theme. All those still applies and nothing has changed.
Related posts:
- 2010 2 Column Neoclassical Theme WP 2.9 Upgrade I thought I will never be doing this, but looking at the popularity of this Neoclassical Theme mod, I think I owe it to those who are using it to have it upgraded a little with WordPress 2.9 features. Frankly, in my opinion, the 2 visible features added to...
- One Column Neoclassical Theme Some bloggers prefers a Theme which has only one column for their contents and nothing else. They want no distractions for their readers and honestly, from a blog reader’s point of view, I do enjoy reading more from a blog that has no too much fancy stuffs cluttered all round...
- 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...
- How To Upgrade The PressRow Theme To WordPress 2.8 Compatible The PressRow Theme is the first WordPress Theme by Chris Pearson, the guy behind the Thesis Theme. It was released for public download around 2006 and from the PressRow Theme, Chris Pearson graduated to much bigger things. Though it is redundant now and the demo page is long gone, The...
- Clickable Header Image For The Neoclassical Theme The Neoclassical Theme comes with a revolutionary rotating header image. You can actually use as many header images as you like and they will rotate on each refresh. It’s a cool feature, but when it comes to branding your blog, this rotating images makes it quite difficult for visitors distinguish...
{ 6 trackbacks }
{ 35 comments… read them below or add one }
Great theme, I will test it
Thanks for updating the theme to 2.8 version.
If in the future you have time, would love to have a 3 column version of copyblogger.
Many thanks
Ya Mike,
There have been some request for another 3 column version. I only realized that the site that originally customized the 3 column copyblogger theme has been taken down and the download link is no more.
Will do a 3 column version when time permits.
That’s awesome. Thanks!
When I clicked to download a new screen opened with a bunch of garbage?
Hi June,
Whatever is wrong, I’m quite sure it’s not on my side because others have downloaded it without any problems.
Have you tried downloading other programs or are you using some download manager?
When I too tried to download a new page opened covered in weird garbage.
hmmm… Alex,
Can you let me know the browser you are using or if you are using some sort of third party download manager?
Others don’t seemed to be having this problem, because it is a straight forward download link and there are no re-directs of any sort.
Awesome work dude !!!
Great work…
It’s actually a good looking copy.
Is there any way to place a link to an external website in the navigation links. I have tried editing nav_menu.php in different ways but i cant get it right.
Hi Kris,
In the nav_menu php, just add your links immediately after the two existing lines. There is no need for any editing. Like thus:
<li><a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">Home</a></li>
<li><?php wp_list_pages('sort_column=menu_order title_li=&depth=1'); ?></li>
Your link--><li><a href="http://your-url-here">your-anchor-text</a></li>
Hi, thank you so much for this adjustment. Like one of commentators before asked, can you please make this a 3 column theme?
If time does not allow, how would one go about doing that themselves?
Hi Kevin,
Not actually in the mood right now, but when the inspiration comes, I’ll certainly add a new column to the theme.
There are lots of info out there about adding a new column in WordPress Themes. A good place to start is WordPres Codex
I feel like that’s something I’d spend 5 hours trying to do and end up not even being able to do it right so I’ll just hold out until inspiration comes.
Also, I was wondering why you chose to move the “home” and “about” pages to the upper right hand quarter and how to get it back to the original version where it’s under the headline.
I moved the navigation links to the top right corner to accommodate those who want to use the customized fixed width layout.
To move the links back, all you have to do is go to your header php file and look for these codes
<div id="nav">
<ul>
<?php include (TEMPLATEPATH . '/nav_menu.php'); ?>
</ul>
</div>
Cut those and paste it right at the bottom most of your header php file, right after
<div id="container">Then go to the stylesheet, look for #nav ul li change the float value to left
Next change the color hex code to #000 in the line of codes underneath.
It should look like this after the change
#nav ul li { font-size: 1.4em; float:left; }
#nav ul li a, #nav ul li a:visited { display: block; padding: 0.3125em 0.8125em 0.5em 0.8125em; color:#000; }
Do I do that through my hosting file manager or the wordpress interface?
Or do I have to do it at the source theme file I downloaded and then reupload it?
If it’s on the host’s file manager, which sub directory do I find the themes?
I’ve searched for over 15 minutes and can’t find the right “header php file” you mentioned.
Assuming you have uploaded and activated the theme to your WordPress blog. (I hope you know how to do that. If not, let me know)
Log in to your Wordpress Admin Dashboard
Go To Appearance on you left
Click on Editor
You will see and you can edit all the Theme’s file there.
How do you change the RSS feed from one the site generates to one that is coming from FeedBurner?
Use the FeedBurner FeedSmith plugin. It tracks all your feeds from different feed readers and add the counts to your Feed Stats.
For download instructions and link go
http://www.google.com/support/feedburner/bin/answer.py?hl=en&answer=78483
After activating the plugin, go to the settings page and enter your feedburner feed URL.
Hi,
Your zip file is almost empty. I have downloaded it several times over the past month or so and all I get when extracting it is an image folder, an ie.css file, and a screeenshot.png. Nothing else. How come?
I use the old copyblogger theme on my site. I’ve modified it considerably though, and I’d love to see the changes you’ve made in the theme files to see if I might switch to your version and modify that.
But what about that download?
Thanks,
John
I just downloaded it, and I can confirm all files are in there.
Here’s a screenshot of extracting it on my desktop http://stop-by.com/mitko/theme.jpg
Everything seems on place
Thanks Mitco.
@John,
As you can see, the download is okay and many have downloaded without any problem so I really do not know why. Sorry
Yeah I can’t figure it out. I just downloaded again (fifth time over two months or so) and still it only contains what I stated above.
I have never had a problem downloading (do it all the time). I’ve tried on two different browsers (FireFox) and Chrome). I run a linux OS but that shouldn’t be a problem. It extracts to just the three files. I’ll try on another system that runs windows — just in case there is something weird happening with this file and linux.
Thanks,
John
Okay so I have the complete contents now. It extracted fine on the windows system. I didn’t notice before that it was a “rar” file. Linux has a weird time with those. Ubuntu offered to extract it, but obviously with the wrong extraction program. It was probably thinking it was a “zip” file. Anyway, it’s all good. Now I get to play a bit
Thanks again,
John
Finally. LOL
Well considering the mods you have done yourself, I doubt you will find anything new in mine.
Under Ubuntu you would have to do the following :
- Make sure multiverse is enabled
sudo aptitude update
sudo aptitude install unrar
unrar x filename.rar
Also Ark should extract them with no problem, I just tried it on my Ubuntu, no problem at all.
Costa,
Yeah finally
And thanks for implying that I seem to know what I’m doing, but I’m just learning all the time and it helps to see what others do and how they do it. I’ll learn a lot by playing with your revision on my local server version of the site. It looks like you did a good job. Thanks for this.
Mitko,
Thanks for the info. I have “unrar” installed but it clearly failed to do the job. This file may be rar 3.0 format. If so, then “unrar” can’t handle it. That may have been the reason.
John
Any progress on the 3 col Copyblogger ‘09 theme? Its my birthday!
Happy birthday!
Right after when I am finished with the 2 column Neoclassical which I am upgrading with minor WP 2.9 features.
Will do the same with this copyblogger theme too.
….hopefully..
Costa: Thank you. When do you expect to release the updated Neoclassical then?
It’s on.
Hey just something I noticed, your wp-pagenavi size is too big and when you are on something like page 7, it get’s too wide and becomes 2 layers on top of each other. Just so you know
yea… knew it, but you know how it is. LOL. I keep deferring things that are not life threatening.
Oh alright, I thought u didn’t
Me on the other hand… I spend to much time worrying about this stuff, and it’s not the first time i have gone to bed at 7:00am trying to fix something like that