How to Use the Copyblogger Theme Like a Pro

The only thing better than a great WordPress theme is actually knowing how to max out the numerous features and styling benefits that it offers. In lieu of that earth-shattering revelation, I’d like to take you on a guided tour so you’ll be equipped with the knowledge you need to make the most of the Copyblogger Theme for WordPress.

First, a Word on the Layout

Typographic grid thumbnailThe layout you see today is not the original Copyblogger design—it’s one that’s been “digitally remastered” to achieve a quality standard that I feel is unsurpassed in the world of open-source theme development. I used relative (or em-based) sizing on nearly every element of the theme, making it an infinitely scalable layout that can accommodate visually-impaired users with ease. If you’re using FireFox, resize the text with ctrl + + to see how this works.

Also, I took extreme care to develop the theme so that it adheres quite strictly to a typographic grid. Click on the thumbnail above to get an idea what I mean, or read about setting type on the Web if you’re into that sort of thing.

Widget Support

With the news that WordPress 2.2 comes pre-packaged with the sidebar widget plugin, widgets have officially become a crucial part of the WordPress fabric. As a result, the Copyblogger Theme for WordPress supports widgets, but with one notable exception.

For some reason, the WordPress developers broke the XHTML markup convention on the search widget, and in addition, their solution is not as flexible as I would like. Because of this, I felt it was necessary to build a custom search widget that lay outside of the normal widget framework. As a result, I highly recommend that you do not use the search widget, and instead just let my built-in search function rock your sidebar.

Special Post Styling Elements

The Copyblogger Theme for WordPress features elegant treatments for traditional in-post styling elements like:

  • Unordered lists: <ul><li>, like the one you’re reading now
  • Ordered lists: <ol><li>
  • Definition lists: <dl><dt><dd>
  • Sub-headlines: <h3>
  • Blockquotes: <blockquote>
    • Pullquotes (more on this in a sec)
  • Code: <code>

While most of the above elements are pretty standard, one – the pullquote – requires further explanation in order to be used effectively.

Pullquotes

I’m sure you’ve heard of blockquotes, the pragmatic cousins of the more artsy, more eccentric pullquotes. In case you need a refresher, here’s what a standard blockquote looks like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pharetra velit vel purus. Nunc tempor, urna sit amet euismod elementum, erat tellus auctor erat, non condimentum dui wisi non orci. Nam fringilla leo sed dui. Vestibulum ac elit sit amet diam vehicula scelerisque.

All you have to do to achieve a result like the one above is wrap your quoted text inside <blockquote> tags, and the Copyblogger Theme for WordPress will tidy it up for you.

It’s kinda like a block quote, with a twist.

Pullquotes, however, are not quite as simple because there is no pre-defined XHTML tag for a pullquote. What I’ve done, then, is prepare two classes – “left” and “right” – that you can apply to any regular blockquote to transform it into a bit of publishing goodness like you see here.

For a pullquote aligned to the right (like the one above), your encompassing blockquote declaration should be <blockquote class="right">. For a pullquote aligned to the left, you’d simply write <blockquote class="left">.

I’d like to point out that certain feed readers may not be able to interpret pullquotes effectively, and this could result in repeated text or strange punctuation, both of which could confuse your readers. For what it’s worth, Bloglines does a nice job of floating the quotes to the left or to the right, and although they’re not styled, per-se, it’s evident that the pullquotes are not part of the body text of the associated paragraph.

Using These Styles

With each new release of WordPress, the visual text editor (which is your default posting interface) becomes more and more useful in terms of how it utilizes the styles and text treatments that I’ve introduced to you here. In spite of that, you cannot make use of all of these elements from the visual editor’s interface. Specifically, you won’t be able to create the following:

  • Definition lists
  • Sub-headlines
  • Pullquotes

WordPress editor tab controlsFortunately, WordPress 2.1+ comes with a handy little tab switcher that allows you to jump between visual and code editing modes. Whenever you want to include one of the special elements from the list above, simply switch over to the code view, apply the appropriate tags to your text (remember to close them!), and then switch back to visual mode to write just as you normally would.

388 comments ↓

#1 Mark on 10.17.08 at 11:27 pm

You remove the Links widget from the theme–In the Admin panel, look for Design > Widgets.

#2 Rosie on 10.18.08 at 4:54 pm

HI,

How do you get a bio photo in the sidebar, kind of like you have on yours Mark?

Except I only have one sidebar on the right.
Thanks for the help….

#3 Ron on 10.18.08 at 7:53 pm

Thanks Kristarella
I’ll see what I can find and try to fix the media loader to include a closing / from now on.

Mark ~ I love the 3 columns! I need to do this for another site using this theme.

Ron

#4 Mark on 10.18.08 at 8:06 pm

@Rosie: Add a text widget to your sidebar, and then add an img tag that references your image (which you will need to upload to your host server).

@Ron: yes, I like it too! The oscandy.com folks are redesigning their website, but you can download their 3-col version of Copyblogger from their main page still.

#5 Rosie on 10.18.08 at 8:52 pm

Mark, I lost you after adding the text box…

I do have the file uploaded to host service already because i’m using the same pic on my about page, like you did.

i don’t get how to put in the text widget.

thanks…

#6 Mark on 10.18.08 at 9:41 pm

Hi Rosie,

No problem.

1. Sign in to your admin dashboard:

yourblogname/wp-admin

2. Select Design > Widgets. The page is divided into two columns: Available widgets and Current widgets.

3. Make sure you select “Sidebar” or “Sidebar1″ from the drop-down menu on the Current Widgets side of the page.

4. Locate the “Text” widget toward the bottom of the page on the left side.

5. Click “Add.” This puts the widget into a list on the right side of the page.

6. Click the “Edit” button at the side of the Text widget label on the right side of the page. The one that you just inserted by Adding it. This will open a small edit box.

7. In the edit box, add your img tag:

(or wherever you saved the image file)

8. Click “Save Changes.” That should do it, though you might or might not want the center tag.

Give that a shot.

Chris–sorry about the links in my earlier “waiting for moderation” version of this message–it’s been a while since I’ve answered anybody and I just plain forgot about that!

#7 Mark on 10.18.08 at 9:48 pm

Rosie,

Check out w3schools.com for quick reference and tutorials on the html image tag.

#8 Paul on 10.19.08 at 1:58 pm

OK, have solved my previous query. Thanks, Kristarella! Couple more things.

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?

Also, what’ the issue with the Share This plugin and this theme?

Cheers,

#9 Mark on 10.19.08 at 3:51 pm

Hi Paul,

I have looked at your site and I don’t see the stray navigation link you refer to. I’m using Firefox on a Mac. The site looks great to me.

Also, just a note, but you should really put Chris’ copyright notice/link back into the footer, as per the terms of use. Many of us include our own copyright notices in addition to Chris’ so that shouldn’t be a problem. Chris’ link lets other people who like your site find this one, which is really the least we can do for getting a free theme of this quality. 🙂

At any rate, if you are still having problems with the link, please let us know where exactly it’s showing up and what browser you’re using. Thanks.

#10 Paul on 10.20.08 at 5:38 am

Point taken, Mark. I greatly admire and appreciate the work Chris does. I even subscribe to his RSS feeds. I’m more than happy to include a link back here in the more subtle footer area of my site.

I see countless examples of Copyblogger being used across the Net in various altered forms without any credit given to its creator. I do hope therefore that you’ll be sending the Footer Police Force out on a more general petrol, too. 🙂

The “Previous Entries” navigation link I spoke of can be seen at the end of my “Home” page just above the footer zone. It seems to show up in all browsers I use and links to a 404 page not found.

Was there ever a fix found for the Share This plugin? The link displays oddly on my site.

Thanks again for your help.

#11 kristarella on 10.20.08 at 5:56 am

Paul, I’m not sure what’s going on with your previous link. You have older posts so there should be an older page. I even tried to go here (the default permalink 2nd page), but it redirects to here and not found. Have you tried disabling the plugin you think is the culprit and testing it?

Share This was fixed, but it was merely fixed by upgrading the plugin, something in the plugin fixed its compatibility with Copyblogger. However, it looks like you have a reasonably new version because it has some kind of rotating GIF that I’ve never seen before.

Try .custom a.stbutton:hover {padding-left:22px; color:#000;}. Not really sure what the problem is ’cause Firebug isn’t grabbing the hover style. Also, not sure how well :hover will work after a class, but give it a go anyway.

#12 dinu on 10.20.08 at 5:58 am

@ paul

good job, with the modifications .. 🙂

#13 Mark on 10.20.08 at 11:30 am

Hi Paul,

Unfortunately, I won’t be able to muster up the Footer Force out on the web, but when they show up here, look out! 😉

OK, I see the link now. There appears to be an anchor tag (“a href”) that points to page 2 and contains the “Previous Entries” text, in your navigation div. If you look in navigation.php, you may find the culprit.

I’ve never been able to get the Share This plugin to work properly. Maybe somebody else has some advice about this. Sorry.

#14 Greg on 01.16.09 at 5:23 pm

Does anyone know how you would get the sidebar AND the widgets to not show up on pages? I have my site with the blog as its main page, but want to have the other pages of the site possibly not show the sidebar. I used a custom template and tried hiding the sidebar, but when I did that, the sidebar *widgets* still show up, with funny formatting in addition. Anyway, any ideas?

#15 Hornetsfan on 01.17.09 at 11:41 pm

Hi,

Can you guys give some more details on comment #236 ?

I’m looking to add a small logo just on the left of blog name. Here is a picture of what i’m trying to do.

I’ve try to edit the header.php, but i can’t manage to place the logo next to the blog title…

Can you please give me the code to place in the header.php and custum.css ?

Thanks for your help

#16 Gus on 03.20.09 at 6:28 am

Hi,
I just downloaded the copyblogger (CP) and it looks neat. However I’m a fan of the 3 column themes. I went through the thread to see if that exist with CP and it looks like it can be customized. Will anyone please walk me through the steps to convert it from 2C to 3C? Will really appreciate it.

Thanks

#17 Mark on 03.20.09 at 2:43 pm

Gus,

You’ll need to download the osCandy version of Copyblogger.

http://www.oscandy.com/index.html

#18 Steve on 06.03.09 at 11:04 am

Absolutely brilliant , been looking for a theme like this for ever.
Thanks for making it available.

#19 Roger on 06.14.09 at 8:08 am

I’m little confuse (newbie).when i make the changes to “custom.css: nothing happens. when i edit the “style.css” i see the changes in effect. i created a directory under the theme call “custom” move “custom.css” to the directory. am I missing something?
Thanks

#20 dinu on 06.14.09 at 10:01 am

you don’t need to put custom.css in a /custom folder .. it should be within the main folder of the theme …

#21 Roger on 06.15.09 at 5:34 am

Thanks for your quick response. Ok, I thought i read that somewhere. I did put the custom.css back into the main folder. like I said when I make the changes to custom.css i do not see any changes. I do see the changes when I work with style.css.

#22 dinu on 06.15.09 at 5:45 am

what changes are you making on the website ? code used ? also, after making the change, did you try changing cache of your browser…

#23 JG on 07.22.09 at 6:43 am

Hi, I’ve enjoyed using this theme for my blog, and now I’m trying to adapt it for a static personal site. The home page will not have much content, so I’m running into the problem of the footer showing up in the middle of the browser. I’ve found the sticky footer solution, but I’m no programmer and haven’t been able to get it to work. I understand that I should add the CSS code to style.css, but I’m not sure where to add the HTML code. Any advice would be much appreciated.

#24 kristarella on 07.25.09 at 1:05 am

JG — You will need to add <div id="wrap"> to header.php, just after <body class="custom">. Then add </div> to the top of footer.php.

You might need to add class="clearfix" to <div id="container" in header.php, but I’m not sure if it is needed. Then in the CSS given by the Sticky Footer site change #main to #container.

#25 JG on 07.25.09 at 1:09 am

Thanks for the reply! I was able to sort it out.

#26 Greg on 08.14.09 at 8:58 pm

Amazing, the sticky footer fixed my problem too. Awesome.

#27 How to Format Your Images with Copyblogger | Bizimhost.biz on 12.01.09 at 4:58 pm

[…] In our first example scenario, we want to align an image to the left, and we’d also like to have our paragraph text wrap around the image so as to maintain a clean, uninterrupted flow. You’ll start by inserting an image into your post just as you normally would, but in order to apply the proper CSS class, you’ll need to switch over to code view by clicking on the “Code” tab. A quick explanation of that process along with a visual can be found here. […]

#28 Dom on 12.22.09 at 3:24 pm

Hi,

I cannot for the life of me figure out how to get the left-hand nav widget bar working, can anyone help me please?

Cheers,
Dom

#29 Mark on 12.22.09 at 4:20 pm

Dom,

This isn’t a 3-column theme, by default, if that’s what you mean. If you want both right and left widget sidebars you will need to locate the oscandy version (there are several mentions of it in other comments on this site with links, I believe) of the theme, which is retrofitted for 3 column use. Otherwise, could you be more explicit about what you are trying to do?

Mark

#30 jasmine on 12.29.09 at 5:20 pm

SO i dowloaded the zip folder for the copyblogger theme. how do i set it to my wordpress account? Is there a way to do this myself or do i need to have a designer do it?

#31 Mark on 01.24.10 at 12:59 pm

Hi Jasmine,

You need to upload the theme to your host. If you have installed WP using Fantastico or Simple Scripts from your web hosts cpanel system, you should be able to log in to your WP site (http://www.yoursitename.com/wp-admin), go to Appearance, click “Add New Themes” and then click the Upload link at the top of the page. This allows you to browse your local machine and upload a zip file containing the theme. Otherwise, you will need to unzip the files and use an FTP program to upload to your web host, typically into the public-html directory, or sometimes into a public-html/www directory, depending on how your host sets things up.

#32 unwuakeable on 04.08.10 at 2:05 pm

Gracias!!
Best regards

#33 meg on 06.29.10 at 8:42 am

i saw one comment earlier about the search function, but didn’t spot any follow-ups. does anyone know how to remove the search function from the theme? i love chris pearson’s work, but i do not want a search function. i’m deleting it wherever i find it in the code, and yet, it persists. it has to be the sturdiest part of the whole theme.

#34 kristarella on 07.02.10 at 4:06 am

Meg, you need to remove the following from sidebar.php
<li class="widget">
<h2>Search</h2>
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

#35 Jase on 08.07.10 at 6:15 pm

Question – I don’t see any customisation on the theme but I like how copyblogger.com use a left sidebar -anyone know how I can do that? Thanks.

#36 Tofik Online on 08.18.10 at 12:04 pm

thanks for the advice. The problem was that I already had a directory called ‘links’ in the doc_root of my web server. I removed that and all is good.

#37 technupower on 01.29.11 at 3:27 am

great simple wp theme,.. thanks Chris 🙂

#38 arramuse on 03.14.11 at 7:18 pm

Cool, thanks.

I’ll try on my blog that using thesis. 😀