Have you seen those cool magazine style WordPress themes around this days? They are just cool. You might have noticed that they sometimes show a few words of the post, this is for sure not the default WordPress excerpt showing that because the default excerpt length is set to 55 words and manually excerpting every post would be a great time consumer. So, what are this guys putting together to get that cool effect on their sites by controlling the length of the content? Well, as a WordPress freelancer, I have been needing that feature myself and today I’m going to share with you how to have that feature on your site.

There are three different approaches to limit your excerpt or content in WordPress that you must know:

1. WordPress’s Approach

WordPress developers have provided us lately with a tool to limit the excerpt. I do not use it myself as I’m more conformable with another approach as I find this a little limited. To change excerpt length using the default WordPress excerpt limit approach you have to use the excerpt_length filter and add the following code to functions.php file in your theme:

1
2
3
4
5
6
7

function new_excerpt_length($length) {
return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

Every time you will use the_excerpt(); on your code it will output an 20-word text string for you. Right now you’ve got a question, don’t you? I know, I had it too. The question is: What if I want to use the 20-word excerpt in some places on my theme, but still be able to use the 55-word one? Or just have two or three different-length exerts to use on my theme? Well, if that is the case, the default approach is not for you, so continue reading.

2. StudioPress’s Approach

I don’t really know who came up with this approach originally, but I know that the guys over at StudioPress use it on their themes. This function is called the_content_limit(). This is how the code that will go into the functions.php file looks like – lengthy huh?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {

$content = get_the_content($more_link_text, $stripteaser, $more_file);

$content = apply_filters('the_content', $content);

$content = str_replace(']]>', ']]>', $content);

$content = strip_tags($content);

if (strlen($_GET['p']) > 0) {

echo "

";

echo $content;

echo " <a href="";</p> <p>      the_permalink();</p> <p>      echo "">"."Read More →</a>";

echo "

";

}

else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) {

$content = substr($content, 0, $espacio);

$content = $content;

echo "

";

echo $content;

echo "...";

echo " <a href="";</p> <p>        the_permalink();</p> <p>        echo "">".$more_link_text."</a>";

echo "

";

}

else {

echo "

";

echo $content;

echo " <a href="";</p> <p>      the_permalink();</p> <p>      echo "">"."Read More →</a>";

echo "

";

}

}

Now we have to call that function because, off course, we are not going to use the default the_excerpt(); function. Here:

1

<?php the_content_limit(20, "[Read more]"); ?>

Pretty simple to use and offers you the possibility to auto-generate a Read More … of you choice.

C.bavota’s Apprach

C.bacota – I don’t know his real name – has produced a couple of great code snippets to limit the content for both the_content() and the_excerpt(). As you may already know, the_excerpt() gets 55 words from the_content() but get rids of all the HTML tags on it, be it links, images or whatever. So, this guy produced a script that allows you to choose to use the text-only version or the html-rich version to limitedly display. I find this functions really cool and easy to use and I have been using them ever since they were produced. This is how the block of code that goes into functions.php looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// Limit the content to certain number of words.

function excerpt($num) {
$limit = $num+1;
$excerpt = explode(' ', get_the_excerpt(), $limit);
array_pop($excerpt);
$excerpt = implode(" ",$excerpt)."...";
echo $excerpt;
}
// Limit the content to certain number of words.

function content($num) {
$limit = $num+1;
$content = explode(' ', get_the_content(), $limit);
array_pop($content);
$content = implode(" ",$content)."...";
echo $content;
}

The above code is quite cool, but has two limitation: The first block of code, will not allow you to have a custom excerpt longer than 55 words, the same as the_excerpt() does, and the second one will bump image into your shorten content if you are using images in the original one. However, Mr. C.Basoda eventually thought about his and produced later a revised version of the code that will allow you to use more than 55 words and not get images on the wrong place there. Here is the revised code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

function excerpt($limit) {
$excerpt = explode(' ', get_the_excerpt(), $limit);
if (count($excerpt)>=$limit) {
array_pop($excerpt);
$excerpt = implode(" ",$excerpt).'...';
} else {
$excerpt = implode(" ",$excerpt);
}
$excerpt = preg_replace('`\[[^\]]*\]`','',$excerpt);
return $excerpt;
}

function content($limit) {
$content = explode(' ', get_the_content(), $limit);
if (count($content)>=$limit) {
array_pop($content);
$content = implode(" ",$content).'...';
} else {
$content = implode(" ",$content);
}
$content = preg_replace('/\[.+\]/','', $content);
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
return $content;
}

And finally here is how you use this fantastic piece of code:

1
2
3
4
5
6
7

<?php excerpt('20');?>

// or

<?php content('20');?>

The end

We are finally done.  I would also like to make clear that the approaches I presented so far are not necessary all the existing or possible ways to achieve content limitation, however this is what I know and what I thought was of value to share with you. Thanks for reading.

WordPress themes are being a great online resource for everybody to use, modify and share. This applies to GPL themes only though. However, in order to offer our online neighbors good themes that they will be happy using, theme developers, including me, should take care of some peculiar aspects in themes such as the use of CSS code. Along with WordPress theme evolution, some default CSS code needs to be included in very theme so that certain in-built features work well. This is mostly the case of images, but not only.

In WordPress 2.5 several classes for aligning images and block elements like DIV, P, TABLE etc. were introduced.Every theme should have these CSS classes – you can alter the style if need – in its style.css. The same classes are used to align images that have a caption, introduced in WordPress 2.6. Three additional CSS classes are needed for the captions, together the alignment and caption classes are:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Additionally, there are a few more WordPress CSS classes that you may optionally wish to style because WordPress generates them by default. I make use of most of them in my themes and I suggest very body uses them in their themes. There they are:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

Did you find this information helpful? Do you have anything else to add? Your opinion is very much appreciated.

Comment Without a Plugin or Widget Live

Here is the code that you need to put in your functions.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

< ?php // Get Recet Comments Function

function dp_recent_comments($no_comments = 10, $comment_len = 35) {
    global $wpdb;

	$request = "SELECT * FROM $wpdb->comments";
	$request .= " JOIN $wpdb->posts ON ID = comment_post_ID";
	$request .= " WHERE comment_approved = '1' AND post_status = 'publish' AND post_password =''";
	$request .= " ORDER BY comment_date DESC LIMIT $no_comments";

	$comments = $wpdb->get_results($request);

	if ($comments) {
		foreach ($comments as $comment) {
			ob_start();
			?>
				<li>
					<a href="<?php echo get_permalink( $comment->comment_post_ID ) . '#comment-' . $comment->comment_ID; ?>">< ?php echo dp_get_author($comment); ?>:</a>
					< ?php echo strip_tags(substr(apply_filters('get_comment_text', $comment->comment_content), 0, $comment_len)); ?>
				</li>
			< ?php
			ob_end_flush();
		}
	} else {
		echo '<li>'.__('No comments', 'banago').'';
	}
}

function dp_get_author($comment) {
	$author = "";

	if ( empty($comment->comment_author) )
		$author = __('Anonymous', 'banago');
	else
		$author = $comment->comment_author;

	return $author;
}?>

You need to stop at two moments in the code:

The first one is the comment length. You can change the the length of the comment excerpt that you want to display on your blog by setting the number of the characters here:

1

function dp_recent_comments($no_comments = 10, $comment_len = 35)

The second is the comment wrapping.

1

echo '<li>'.__('No comments', 'banago').'</li>';

It is normally wrapped in <li>comment</li> because you are supposed to wrap the comments query in by a ordered or unordered list, as we will see below. However, you can change the wrapping tags to whatever you like.

The final step of this process is querying the comments to display on your desired part of the blog or site. All you have to do now is to put the code below where you like on your theme.

Here is the code to query the comments to display on you theme. Please note that the number in the brackets sets the number of the comment to be displayed – you can change it to fit your needs.

1
2
3
4
5
6
7
8
9
10
11

<div class="custom widget">
<h3>Recent Comments</h3>
<ul>
< ?php dp_recent_comments(6); ?>
</ul>
</div>

If you found this short tutorial helpful or your need any sort of help, just write a short comment below. Thanks and good luck!

UPDATE: This has been a quite active post and I can see that a lot of people need this functionality. If you want this on your blog/site, but you do not know how to do that, please drop me a line.

One of my many WordPress freelance projects I am working on is UKlocum. This is one of the many projects I have received from my dear client from Poland, Greg. When Greg contacted me for this project explaining what he wanted to do, he asked me if this could be done with WordPress. He had seen the potential of WordPress in other previous smaller projects we worked on. Before that, he had thought of getting it custom made from scratch, which would have cost him too much. So, I told him WordPress could handle it and we decided to go with WordPress. This site was a real challenge in terms of functionality and all this post is about is that WordPress handles perfectly CMS websites.

The Theme

UKLocum Website Preview

This project was pretty urgent and I could not afford to design a new theme from scratch, having a lot of other works in hand.  So I decided to go for a free WordPress theme and tweak it to fit my needs. I looked around and I can say that the theme community of WordPress is doing a great job. What I decided to go for is the Magazeen theme that was featured at Smashing Magazine too. Do you want to know what I tweaked? Read on…

Theme Code Cleaning

As you may already know, coders code differently. That is why getting your hands dirty with others people’s code is not a very enjoyable experience, moreover, sometimes it is a real pain. That was the case even with Magazeen which I expected to be better coded. The problem with code was that there where redundant use of DIVS and not logical cascading of CSS. This is my humble opinion – check it yourslef to be sure.

Most of code clearing was easy as it consisted in just removing functionality that the theme came prepacked with such as comments form, advanced widgets, thumbs gallery other elements that I cannot recall now, but it is quite boring and frustrating in other tasks as the drop down menu integration below.

Suckerfish drop down menu integration

The Magazeen theme did not come with a drop down menu, so I needed to integrate one as my client, Greg, required it. Not going into much trouble, I decided to use the Suckerfish Drop Down Menu which I had used several times previously. Because the code was messy, the most difficult part was fitting the theme code to the menu rather than integrating the drop down menu to the theme. However, it ended to be a success.

Custom Banner Integration

The custom banner integration consisted in removing some code from the banner section and placing the banner image there. Also, to help SEO of the site, I used a CSS image replacement techinque for the logo so that the human fisitors can see the nice image logo whereas the search engines read the given text wrapped in <h1> html tags.

Color Combination Alteration

Pawel, my client’s graphic designer, suggested that we used another color combination that would go better with the logo and banner colors. I implemented that color combination and it resulted in  another success.

Welcome Guest or User

Under the menu, I integrated a piece of PHP code from WordPress to welcome a guest visitor and to tell them to log in or to register and also to greet a registered user and to allow them to log out from front page or any other part of the site, so that not to make them to spend time and click to go to admin panel to log out.

Extended User Register

Because of the nature of the site and the needs of my client, he asked me if we could extend the register form with other fields. So  I did, using a great plugin called Register Plus. This is a very feature reach plugin which would allow you do almost anything with your register page, from having your custom logo to adding a lot of functionality and fields. I want to immensely thank the plugin’s developer for offering such a great plugin to the WordPress community.

Events Manager

The most impressing part of the UKLocum is the Events Manager. The Events Manager is a plugin developed by Davide Benini. It allows you to manage events specifying precise spatial data such as location, town, province, etc. It allows your visitors to book their participation in listed events. In my opinion it is the best plugin out there for event management.

When my client, Greg, saw it, he was enthusiastic about it. However, we had to face a challenge with the events. We needed to have people register first for the site, after that they would be able to book the events. Taking in consideration that the plugin developers have fulfilled almost any need in functionality terms, I found the solution fast enough. I employed the HidePost to accomplish that task, just another great plugin out there. I hid the booking form from not logged in visitors, telling them to log in or register, if not, to be able to book the event. That was the happy end of our next challenge.

Bottom Line

What would be the last words of this long boring post? Hmmm! As you could have already deducted from reading this post, WordPress is being more and more important in nowadays web environment. Also,  running WordPress freelance business (perhaps that’s not the right collocation) is a great way to make a living by making money online. The last but not the least, if you need a custom WordPress theme or other WordPress services and, if you are looking for a professional and reliable WordPress freelancer, look no further than my contact page.

Don’t forget that your opinion is most appreciated – please share it below.

Many WordPress themes, especially those in magazine style, need to have some configurations in terms of category IDs in order to show things properly. They will often ask you for a Category ID in the theme option panel. And you might be wandering how on earth to find those IDs.

That is, in fact, a quite easy task – even though it might be a little tricky. This post is all about those IDs and how to find them in no time. Here we go:

1. On your dashboard, under the Posts menu, click Categories;
2. Keep the mouse over the category whose ID you need;
3. Look at your browser’s status bar and you will see something like this in the shown URL: tag_ID=160 – all you need is the number.

So that you know, this is true for WordPress tags and other custom taxonomies you might be using in your site – the ID finding process is the same.

This is all for this time. I hope you enjoyed it. And good luck!

As announced in the introductory post of Master WordPress theme, I am releasing my first ever free WordPress theme. I am very happy to have achieved this and I am very hopeful that 2009 will be a great year of success for my WordPress freelance experience. Below I have taken an two paragraphs from my introductory post for the master theme I am releasing.

Do I have to pay for the theme?

No, the theme will be available for free download and usage. The theme in fact is being released under the GPL license which is the same license that WordPress uses. The theme will also have free updates and upgrades forever. Also, I hope we guys build a great support forum for this theme and others to come which will also be free to access, ask and answer.

What do I have to pay for than?

You might never have to pay for anything. But, in case you need help to set up the theme, configure the plugins etc, you might want to buy one of the five (5) service packages that will come along with the theme. These packages vary from setup to theme enhancements and even PSD to the actual theme. More information about this topic will come along with the theme release.

Master Theme Features

• Modern and beautiful web typeface.
• Tableless design and 100% CSS-based layout.
• 2 columns of fixed width.
• Widget Ready.
• XHTML 1.0 Transitional valid.
• CSS 2.1 valid.
• Search Engine optimized coding make wise use of h1, h3, h3.

Preview and Download

• Preview Master Theme at WordPress theme directory. A better preview is to come soon.
• Download Master Theme

Support and Customization

Installation

STEP 1. Extract the files it contains. You need to preserve the directory structure in the archive when extracting these files.
STEP 2. Upload the theme to your /wp-content/themes/ directory.
STEP 3. Now go to Appearance >> Themes and activate the “Master” theme.

License

Master theme is licensed under the GPL. It may be freely modified and copied as long as the license stays GPL. This means that you may use it for your personal and commercial projects and you may also make any changes you like.

Change Log

2009-01-07: Initial 1.0 release.

Andrew Kelly contacted me for a kind of business blog project that he was working on. After I showed him some of my previous works and we agreed on the price, I began designing a WordPress theme for him. He had previously chosen to use as a theme the semilogic theme framework. Well, his decision made me suffer until I suggested him that I developed the theme for him from scratch. He agreed and on this we went on. This project took a little bit long as I was working on other projects simultaneously. However working with Andrew was a great experience.

Design

When Andrew contacted me, he showed me a couple of sites that he wanted his blog to look like. He wanted something fresh and have a web 2.0 feel. Some guys might argue that web 2.0 means nothing, however there are a lot of designers and blog writers that have listed out the features of web 2.0 – but this is not the point of this post. Let’s focus on the design process. I used an heavy blue color throughout the blog with some fresh web 2.0 effects. I did all this with Inkscape, my favorite vector graphic design application. I cannot say I am a great designer, but I can reach high quality in design if clients describe me clearly what they want.

Coding

As I said earlier, the early coding process was very painful. After we decided  to have the theme developed from scratch, it was a very nice experience as coding is the part I like most. I had to work with XTHML, CSS, PHP with WordPress flavor.

The theme is coded in tableless XHTML/CSS. At first it was pure and valid, but after my client, Andrew implemented Awaber subscription code into it, it turned to have some validation errors. It is not a situation I like to be in, as I claim I code only valid talbleless XHTML/CSS websites and WordPress themes, but I cannot interfere with my clients choices.

Layout

The theme has a  two column layout. It has a left main column where the blog content is placed and a right wide sidebar. On front page it has a big welcoming video before the fold under which four other posts queried according to categories are shown. It is a nice simple layout informative layout.

Widgets

The theme has a fully customizable, widget-ready sidebar. Widgetizing WordPress themes is a pleasurable experience for me  and I could not leave it unwidgetized even though widget are little employed by my client, Andrew.

Testimonial

After a lot of frustration working with many Web Designers it has been a real refreshing change to work with someone like Baki, his constant follow up and willingness to over deliver on all levels has made a huge difference to our productivity and our web business bottom line. Nothing is ever too much trouble for Baki which makes him a real pleasure to work with. I just wish all our team could be as reliable and project focused as Baki! Andrew Kelly of ClickSmartMarketing.com

Conclusion

This is all I could write down about my experience with Andrew Kelly. I would love to hear your thoughts about this theme. Also, please consider subscribing to my RSS Feeds to have the possibility to read and view more great articles and projects. In case you need a WordPress theme, you can drop me a line using my contact page. If you are not sure, please have a look at my portfolio to see more works of mine. Thanks for reading!

As you may already know, WordPress the rel=”nofollow” attribute in comments. That makes any comment with a link on it have no significance for Google when they ranks websites. Getting rid of the rel=”nofollow” attribute is one of the tactics that many WordPress bloggers follow to get more people comment on their blogs. And in my view, this is quite fair – comments add content to a certain blog, the blog pays them back with a link that will be counted by Google, will rise their pagerank and make their way up in Google searches. So, let’s begin.

There are two ways through which you can turn off rel=”nofollow” attribute in your blog:

1. Changing WordPress Core

Editing WordPress core might not be a good idea for bloggers who are not very familiar with coding. For others, like me, who can do any code editing, online through FTP or offline, this is something that they do everyday. That would save the time of downloading, installing and making work another plugin. However, keep in mind that you need to redo this action every time you do an upgrade.

There is only one file you need to edit and all you have to do is remove the word nofollow. This word is located at wp-includes/comment-template.php on line 148. It looks like this:

1

$return = "<a rel="external nofollow" href="$url">$author</a>";

All you have to do is remove the word nofollow only and save the file.  This is it!

2. Employing a Plugin

If you do not feel comfortable with editing the WordPress core, you can employ a plugin to do that for you. Keep in mind that you will have the plugin too, when new versions are released. Below you will find a list of such plugins. Chose the one that is good for you and install it.

1. DoFollow 4.0
2. NoFollow Free
3. Lucia’s Linky Love
4. Sem NoFollow
5. Link Love
6. Remove Nofollow

Time for publicity: By removing the nofollow attribute you are giving something away for free to your visitors, tell this to your visitors. You will motivate more people to comment for sure. Good luck!

PS: Don’t forget that WPlancer is a DoFollow blog and I love to hear what you think. Thanks!