Cutline Theme for WordPress

One Giant Leap for Mankind

Cutline Theme for WordPress random header image
← Why Don’t My “Archives” and “About” Links Work? Image Handling with Cutline →

How to Post Like a Pro with Cutline

September 12th, 2006 · 40 Comments

Quite possibly the best aspect of the Cutline theme for WordPress is the fact that it comes equipped with a wide array of pre-defined styles that you can use to wow your readers. You’ll be amazed at how easy it is to create a post that has unmatched elegance and visual flair, and best of all, if you ever forget how to use one of these styles or need a reference, you can always come back here and get a refresher course. What are you waiting for? Read on so you can start publishing like a pro!

Lists

Lists are easy for readers to digest, and because of that, most people love ‘em. With that in mind, you oughta start using more lists in your posts! Cutline comes equipped with three killer list styles, and your job is simply to choose the one that is best-suited to your particular needs. The first type of list is an unordered list, and it looks like this:

  • List item 1
  • List item 2
  • List item 3
    • Nested list item 1
    • Nested list item 2
  • List item 4

The second type of list is an ordered list, and it looks like this:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

The third and final type of list is called a definition list. Although they are less common, they can be useful for presenting meanings, relationships, or simply for clarification. Check it out:

This is a definition list item title
This is the description text that is related to the title above
WordPress
A FREE and flexible CMS that you can use to run a killer Web site!

Sub-Headlines

Sub-headlines have already been used twice in this post…did you spot them? The first one says “Lists,” and the second one says “Sub-Headlines.” Thanks to the flexibility of Cutline, you can create similar headlines without having to do any styling on-the-fly. All you have to do is wrap your headline text in <h3> tags, and BOOM, you’ll get results like you see here.

A picture of the button within WordPress that allows you to switch to the HTML viewerIf you’re using the Rich Visual Text Editor (which I absolutely do not recommend), you need to switch to the HTML viewer and enter your text between <h3> tags. When you’re done, click on the Update button, and you can continue writing your entry.

If you’re using the regular old text-based editor (cheers if you are!), then you could write a line that looks something like this:

<h3>My Headline Rocks!</h3>

and you’ll end up with this after you publish your post:

My Headline Rocks!

Blockquotes

This is one area where Cutline has no peers…

Every theme worth its weight in bandwidth comes with some sort of pre-defined blockquote styling, but how many themes do you know of that come with three different blockquote styles? This is one area where Cutline has no peers, and you can use these blockquote styles to your advantage as you liven up your posts for your readers. The quote at right is what is referred to as a “pullquote,” and you can create two types of these in your posts - one will be aligned to the right, and the other to the left. Use the following structure to make it happen:

<blockquote class="x“>

where x is replaced by either “left” or “right,” depending on which side of the text you want your pullquote to display.

And naturally, no theme would be complete without the standard old blockquote, which comes out looking like this:

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.

To use these, simply wrap your quoted text in <blockquote> tags.

Front Page Post Display

You may or may not have noticed that only the four most recent posts display on the Cutline home page (in the main content portion of the page, not the sidebar). The WordPress default displays the ten most recent posts, so how did I constrain it to only show four posts?

  1. In the WordPress Administration panel, click on the Options link in the navigation menu.
  2. Next, click on the Reading link in the sub-navigation menu.
  3. The default setting is likely “Show at most 10 posts.” You can make that number whatever you like. Again, I use 4 for this test installation.

Image showing the reading options in the WordPress Administration panel

Personally, I think it’s a good idea to limit the number of posts that show up on a page if your site is light on the content. If, however, you crank out articles in machine-like fashion, then you should either leave the number of posts at 10 or else raise it up to accommodate your rapid-fire style.

Update: I am now showing 10 posts on the front page. This has made the site easier to navigate, and it also makes the archives far more usable.

I’m almost to the point now where I think you ought to display as much information on the front page as possible without sacrificing loading times. So, if you post a lot of images or videos, you may want to limit the total number of posts that display on the front page in order to achieve faster loading times for the widest array of users. However, if you post a lot of text and only a few images, then 10 or more posts is a sound choice because it allows users to access more information at once.

Images

Whoooaaa, nelly! Images are so important that they got their own post. Read up on Image Handling with Cutline.

Do you like this article? Submit it to Blogosphere News!

Tags: How To · Styling

40 responses so far ↓

  • 1 Zoe // Sep 14, 2006 at 3:02 am

    If I wanted to use this excellent blockquote feature in PressRow, would downloading Cutline and copy/pasting the blockquote settings over to my stylesheet do it? Or would I need to do something else, to keep the shading for instance?

    (I really like the shaded background on the PR ones, but I think the indent really helps readability.)

    Also (can I have two questions ; ) ?) I’d like to change the quick date setting in the recent entries to read day_month, which is the Australian format, and I can’t quite work out where to do that.

    Thanks for your help. (And if I hadn’t set up my blog only five minutes ago I’d be changing it to this theme!)

  • 2 Chris // Sep 14, 2006 at 10:40 am

    Zoe, since the solution here is kind of messy, I’ve decided to email it to you instead of posting it here. Enjoy!

  • 3 Chris // Sep 14, 2006 at 10:52 am

    Zoe,

    In my infatuation with your question about blockquotes, I nearly forgot about your date question…Here’s what you need to do:

    1. Open the sidebar.php file
    2. Locate the list item (<li>) that contains the “Recent Entries” header, and find the line that contains this code: <?php the_time('m.j'); ?>
    3. Change that little snippet of code to this: <?php the_time('j.m'); ?>
    4. Do a chicken dance

  • 4 Zoe // Sep 14, 2006 at 8:58 pm

    chicken dance duly performed ;)

    and I always try to ask infatuating questions!

  • 5 Retro Geek // Sep 14, 2006 at 10:13 pm

    If it’s not *too* messy, any chance of posting the blockquote help? I took a few stabs at adding the functionality to my site, but failed to produce any meaningful results.

    It’s such a deliciously attractive feature, I dare say many others who aren’t CSS whizzes would like to know, as well!

  • 6 Patrick // Sep 15, 2006 at 10:47 am

    Nice work
    I am trying it but
    Author name doesn’t appear in post

  • 7 Chris // Sep 15, 2006 at 12:46 pm

    Retro Geek,

    Stay tuned :)

    Patrick,

    Author names are actually already coded into the Cutline framework, but I commented them out to keep them from displaying here. For people running single-author blogs, the name of the author is less important, so that’s why the default setting is to have the author’s name “hidden.”

    Anyway, to allow for author names to display, you’ll need to make a simple change to each of the following files:

    • archive.php
    • index.php
    • search.php
    • single.php

    In each file, the edit will be identical, and the line you want to edit begins with the following code:

    <h4><?php the_time('F jS, Y') ?><!– by <?php the_author() ?> –> …

    Simply remove the code above that is highlighted in red, and your author names will show up just beneath the post titles!

  • 8 Chris // Sep 15, 2006 at 3:03 pm

    Okay Retro Geek, I’ve promised you the goods, and now I’ve delivered.

    For all your pullquote needs, check out the guide to Snazzy Pullquotes for Your Blog!

  • 9 Retro Geek // Sep 15, 2006 at 3:11 pm

    You are a gentleman and a (CSS) scholar, sir. Thanks! :)

  • 10 Patrick // Sep 15, 2006 at 3:13 pm

    Thanks a lot

  • 11 Scott // Sep 17, 2006 at 11:57 am

    Very cool template. Any way i can add “categories” to the links sidbar?

  • 12 TDH // Sep 17, 2006 at 4:40 pm

    Actually, there usually isn’t a problem with typing My sub-header in the visual text editor. At least I haven’t experienced it yet, and neither has my fellow bloggers.

    But sure, more control in the html pop-up window, or by using the text editor from previous versions.

    Good stuff nonetheless.

  • 13 V // Sep 25, 2006 at 10:32 pm

    The pullquotes don’t work with wordpress.com, but I have found a workaround for now.

    I have found a workaround for now, and that is just adding a gif with text of any colour or font and align it left or right.

    My daughter even magaged to get an animation done for me to use to highlight a word.

    Thanks for the info.

    Love the theme!

  • 14 cutline a rockhard theme at Am I Famous Now? // Oct 8, 2006 at 5:28 pm

    […] If you ever want to build a WP theme on a strong base, with many preset CSS options, classes, have a look at Cutline. Check out some of the possibilities here. Read the blog for more info. That theme technically rocks! Probably the strongest WP theme right now! Tags: cutline, design, them, whoring, wordpress, wp. Published October 8th, 2006 […]

  • 15 Maarten // Oct 11, 2006 at 7:17 am

    Hi Chris,
    Is it possible to answer Scott’s question:
    Scott // Sep 17, 2006 at 11:57 am

    “Very cool template. Any way i can add “categories” to the links sidbar?”

    I have the same question (and I am an absolute nitwit when it comes to HTML, css, scripts etc etc.)

    Thanks in advance from the Netherlands!
    Maarten

  • 16 Jen // Oct 17, 2006 at 2:55 pm

    I want to know how to add Categories too! Can you help? Thank you so much. This is the only thing preventing me from switching to your theme!
    Thanks again!
    Jen

  • 17 Chris // Oct 17, 2006 at 2:57 pm

    Jen,

    Check this out.

  • 18 Rick // Nov 8, 2006 at 1:24 am

    One TYPO to correct:

    <blockquote> — note the incorrect quotation mark on the right. When I cut and pasted into WP, I got an error.

    Otherwise — cutline is GREAT!

  • 19 Franck S // Nov 8, 2006 at 1:47 pm

    I can’t wait to use cutline’s blockquote feature.

    I’m going to download cutline right now.

  • 20 Mike // Nov 17, 2006 at 5:11 pm

    i’ve been reading all kinds of good things about this Cutline theme. I’m new to Wordpress - is this theme for advanced programmers? I can’t figure out how to make it do anything at all. Please advise…

  • 21 Chris // Nov 17, 2006 at 5:22 pm

    Mike,

    Cutline is most likely the easiest WordPress theme to work with. What were you trying to get it to do, specifically?

  • 22 Daniel // Nov 19, 2006 at 11:23 am

    Chris,

    I’m loving the Cutline theme, but seem to be having a little trouble with my h4 tags..?

    At first they were working perfectly. I posted a few entries with them and everything was great.

    Then, they started appearing upside down? The text is right side up, but the underline decoration appears on top of the text, instead of below…

    I’m using the standard entry mode (not the “advanced”) and have made sure that the h3’s are properly coded outside of p tags or anything else…So, I’m quite confused really.

    I’ve even copied and pasted some posts from earlier dates where they worked in to new posts, and it does the same thing.

    Any ideas?

  • 23 leisawrites // Nov 20, 2006 at 12:45 am

    HI -

    I tried the <blockquote> tag to create the blockquote, but got the standard one instead of the really neat “This is one area where Cutline has no peers” version.

    Any tips?

    Many thanks, Leisa

  • 24 Chris // Nov 20, 2006 at 1:38 am

    Leisa,

    In order to create a pullquote, you need to apply a class to the <blockquote> tag, as explained in the post.

    For clarity, I’ll reproduce a proper pullquote reference here:

    <blockquote class="right">This is your pullquote text. This is it. Right here. Yeah.</blockquote>

    Cool?

  • 25 Chris // Nov 20, 2006 at 4:24 pm

    Daniel,

    On single entry pages, the <h4> tags can only display one way, so you should be seeing consistent performance there. Now, if you’re talking about a WordPress Page, then the <h4> tags will render with the separation line above the text.

    I’m betting that’s where your inconsistencies are appearing.

    Now, on a different note, I don’t recommend using <h4> tags within the body of a post or page, simply because the <h3> tags were coded up for this very purpose.

    So, unless you just really prefer the look of an <h4>, then stick with the <h3>.

  • 26 GreenDreams // Dec 13, 2006 at 8:39 pm

    I’m using Cutline on my blog at wordpress.com. Is there a way to display the post author there, or only by modifying the php files (which I can’t access). I use wordpress installed on another site and am familiar with customizing the themes there.

  • 27 gio // Dec 13, 2006 at 9:35 pm

    Hi,

    Is there a way to display all posts in homepage in “excerpt” view except the latest post(just 1)?

  • 28 Eddie // Dec 19, 2006 at 2:42 pm

    Hi Chris,

    first of all thank you for your great theme, it’s by far one of the best out there! I really appreciate your work.

    I got one question: is it possible to use a background -quotation-mark-pic for a blockquote right at the beginning AND at the end of the quote?
    I tried it here: http://tinyurl.com/yz5lpu but was not able to put the correspondent pic at the end as background.

    Any idea? Thx,

    Eddie

  • 29 Sucharith // Jan 7, 2007 at 3:19 am

    Hi Chris,

    First of all I thank you for a wonderful theme. I must say that i rather stick to your theme as i understand that your theme is one of the best wordpress theme i have ever seen. I am not a techie and therefore might like to know few answers to some really dumb questions:-

    1. How can i add technorati tags on cutline or else is it first of all required for better indexing and search capabilities?
    2. My sidebar fonts look slightly ugly, particularly my calender etc…
    3. Can you let me know how i can draw border and have a background too…

    I request your help on this…

    Thanks in advance,

    Sucharith

  • 30 Chris // Jan 7, 2007 at 7:56 pm

    Sucharith,

    1. You can try implementing Technorati tags with a simple plugin.
    2. I haven’t “styled” the calendar—sorry for the ugliness!
    3. In order to have a border and a background, you need to “wrap” all of the XHTML inside a new container div. Once you’ve done that, you can apply a background to the body tag, and you could add a border attribute to your new container div.

  • 31 Brandon // Jan 17, 2007 at 3:52 am

    Hey Chris,

    I tried to make one subtle design change to the sidebar: get rid of the top bar above each “section” name. (see it at http://www.salesteamtools.com)

    I thought I found the code to do that, and it’s no longer there above the “Search It” or “Recent Entries”, so why would it remain above the “Great Sales Sites”?

    Thanks!

  • 32 Rod // Jan 26, 2007 at 6:30 pm

    Hi. Great tutorial on b-quotes etc…. I do have one ? though. Say I would like the blockquote text to be in the middle of a paragraph… how do I wrap the text around the quote. If this has been covered I apologize as I probably missed it.
    :-)

  • 33 michael // Feb 5, 2007 at 4:06 pm

    just want to tell you that I am thankful for cutline. i have been doing some mods to the css just changing some color, and was curious where i can change the color of the line under the post title or page title. thanks for your help.

  • 34 salbion // Apr 29, 2007 at 8:25 pm

    Chris doesn’t seem to be answering these Cutline comments for the past couple months, but I gotta go on record and say, “Thanks” for the wonderful Cutline Theme.

    I’m not exactly a novice, but it was “maddening” trying to get everything working — especially those pesky Header navigation links. I read and read and read until my eyes were about to dry up and fall out. Ah, finally, the problem was in WP’s default permalink structure — as opposed to the nicer PL structure that the header links call. So I fixed it, added a Contact page and a bunch of other stuff, including cats in a drop-box :-) I hate to do without semantic/pretty permalinks, but my eyes won’t stand any more fooling with that danged .htaccess file.

    Then I got Gallery2 going and found a modified Cutline 1.1 theme set up for the WPG2 plugin, which totally rocks! The Siriux G2 theme musta been made for Cutline!

    By the way, I agree that Chris’ header navigation link system is best, for I will have many sub pages that I don’t want showing up there.

    I use my own Header images, but I’m keeping that kickass doggie on the search page.

    What else… Oh, I made a little black and white symbol icon to use as a nondescript link to the login page, which will be handy.

    I’ll not furnish my blog address as it isn’t “work friendly.”

    Thanks again for the great Theme, Chris!

  • 35 bestassistantever // Aug 22, 2007 at 2:42 pm

    Hey Everybody!

    I’ve been lurking for awhile but this is a really cool forum so I decided to
    jump in and get my feet wet. I’m new at this so I don’t have much to
    say but it’s been real educational reading here and I look forward to
    participating.

  • 36 georgetui // Oct 12, 2007 at 9:58 am

    Hello,
    Great forum!
    I found a lot of interesting information here.
    Does this forum helpful for you also?

  • 37 idnedhelper // Nov 9, 2007 at 8:43 am

    Hello,

    Can you explain me how to create new poll on this forum. Thanks :)

  • 38 Eskimosik // Nov 15, 2007 at 11:43 pm

    Hi

    What do you think about this? When it happens?

  • 39 January update « Let’s play math! // Feb 5, 2008 at 11:48 am

    […] time to go back and fix all the old posts, but the new ones definitely look better. I also learned how to make pull-quotes, but I haven’t been able to get the nested list to work […]

  • 40 Chris from GER // Mar 3, 2008 at 3:19 pm

    Hi Patrick, thank you for your post. Now all my authors are visible.

Leave a Comment