Webdesign Tuts+ has a nice article regarding SXSW and the subject Is WordPress Killing Web Design? What’s your thoughts on the subject? I’ve done my fair share part of WordPress designs and I do understand the question and it’s quite pertinent but I don’t agree with it. I don’t consider myself a designer, just a coder who likes design and beautiful things (who doesn’t?) but I do think the tools don’t make the artist and at the bottom line WordPress is just a tool to simplify the implementation of dynamic website (is there still static html webpages in the 21st century?).

Wordpress is not a true CMS but it’s a powerful framework that can be moulded into one. The WordPress background is from a blog engine and therefor is it’s more often used. The “blog design” works, blogs are popular these days and most of them don’t want to break the mould that works. People are used to this kind of navigation. But this doesn’t mean that if you want to design something more unique using WordPress that you can’t reach that goal. You can, WordPress doesn’t limit you in any ways, only your imagination does.

Link: SXSW 2010 Video: Is WordPress Killing Web Design?
Source: SXSWi 2010: Is WordPress Killing Web Design?

So my answer is no, but I do understand the pertinence of the question.

And Paintbits is already running it! WordPress 3.0, the thirteenth major release of WordPress and one must give credits to the developers and contributors, each major version has always brought something new and unique to make WordPress the definite open source website/blog engine for developers and bloggers all over the World.

What’s new in WordPress 3.0

3.0 is a new milestone for WordPress and even though most juicy changes should please the power users more than the casual blogger, the inclusion of a new default theme should be strong enough argument for many to change to the newest version (and you should always keep your WordPress website upgrade for security reasons).

The new Features Highlight taken from WordPress.org.

• WordPress and WordPress MU have merged, allowing the management of multiple sites (called Multisite) from one WordPress installation.
• New default theme “Twenty Ten” takes full advantage of the current features of WordPress.
• New custom menu management feature, allows creation of custom menus combining posts, pages, categories, tags, and links for use in theme menus or widgets.
• Custom header and background APIs.
• Contextual help text accessed under the Help tab of every screen in the WordPress administration.
• Ability to set the admin username and password during installation.
• Bulk updating of themes with an automatic maintenance mode during the process.
• Support for shortlinks.
• Improved Custom post types and custom taxonomies including hierarchical (category-style) support. (Try the Custom Post Type UI or GD Custom Posts And Taxonomies Tools plugins to see the possibilities.)
• A lighter admin color scheme to increase accessibility and put the focus more squarely on your content.

You can see the full feature list here.

I have to say I enjoy the new admin theme a lot more than the old one. It’s lighter, cleaner, a more solid theme overhaul.

I’m thinking in re-doing Paintbits theme again. Developing maybe a premium version of the theme to put up on ThemeForest and offer this current one for free.

WordPress 3.0 Official Video

Justin Tadlock as a really nice post about WordPress 3.0 Features.

The other day I couldn’t access my admin panel on my blog Massivo. Turns out I damaged the database with a well executed WordPress Hook. I couldn’t do anything because I just couldn’t log into the WordPress Admin area. The only thing that “saved me” was using a SQL Command using phpMyAdmin.

So if you happen to be stuck in a situation like that and need to reset the WordPress theme to the default one, follow the next easy steps.

-- Manually Set WordPress Theme by Going to your phpMyAdmin
-- Selecting the Desired Database in the SQL Tab, select each of the below lines individually and execute each of them.
update wp_options set option_value = 'default' where option_name = 'template'
update wp_options set option_value = 'default' where option_name ='stylesheet'

I’m working on a little project to be released in the next weeks. Because of this I’ve been improving my WordPress knowledge quite a bit. The website will be a News / Articles type of site. I intended to have 6 posts on the front page, something you can control under the WordPress Options in Settings > Reading.

I wanted to make the archives behave differently from the Index, that is, display a different amount of posts. I stilled them differently so it only made sense to have a larger amount of posts when you clicked a category, tag, etcetera. This seemed a very easy task to achieve, I though of using query_posts() with the argument ‘posts_per_page = 10′, like: query_posts(‘posts_per_page=10′);. It worked, I had now 10 posts per page when displaying the archives, but it was working badly, it displayed all posts not just the desired category, tag, etc. As usual I’ve Google to work to find a solution. I did find a lot of people with similar problems, hell I even found WordPress Plugins for the Query_Post. What I didn’t remember to do was RTFM. Don’t get me wrong, I use the WordPress Codex all the time, but in this case I didn’t think it would cover such a specific “problem”. It did, you can find the solution in the Codex but I’ll leave it here for future reference if anyone has the same problem as I did.

Basically what we want to do is do a different query, using query_posts() but still retain the ability from the loop to get the parameters from the URL (the category, tag…). What we do is use the $query_string global variable in the call to query_posts().

In my example:

< ?php
 global $query_string;
 query_posts('$query_string . posts_per_page=8');
 while (have_posts()) : the_post(); ?>

(... the loop ...)

With global $query_string your archives will work the intended way and you can still do a different query with query_posts() to display a different amount of posts. Hope this quick tip can help you in your future WordPress endeavors.

PS – And yes, the post image is the preview of the project I’m working on.

One of the things I wanted to implement in my new website theme, was the display of the blog statistics. After the code snippet to display recent comments without a plugin, I really wanted to give something new to my footer.

There are several reasons why you should want to display your website statistics. First you might have a page where you display your blog statistics, like feed readers, total posts, comments, etc. Instead of updating it manually every couple of months you can have it automated. Or like me, you can display your statistics in the footer or even in your sidebar, for curiosity and/or to show your readers your blog history / performance. Whichever is your reason, having something automated in providing more info to your readers, enriches your blog.

The code was very simple to implement, just took me a few visits to the wordpress codex and to my WordPress database to get the variables I needed. This code is capable of displaying the Post Count, Page Count, the Comment Count, the Comments Ratio per Post (Comments / Total Posts) and the Number of Registered Users.

To display the number of your RSS Readers, you will need first to write some PHP functions to your wordpress theme file. The file is called functions.php. This was copied from WPRecepies.

Just insert the code into your functions.php file. Replace Paintbits to your feedburner account name.

function RSScount()
{
$fburl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=Paintbits";
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $fburl);
$stored = curl_exec($ch);
curl_close($ch);
$grid = new SimpleXMLElement($stored);
$rsscount = $grid->feed->entry['circulation'];
return $rsscount;
}

Whenever you want to make a call to your RSS Feed count, just write: RSScount(); inside PHP code tags of course. You’ll see how in the final code. Alternatively to use this code, you can use a plugin like Feedburner Circulation. The advantage is that with a plugin like this you will have cache and error protection on your Feed Count text display.

Download Feedburner Circulation

So, now that we can display our Feed Count in full text, we just need to write the other variables assigns to get the rest of our website statistics.

< ?php
$count_posts = wp_count_posts();
$posts = $count_posts->publish; /* Gets the post count */
$count_pages = wp_count_posts('page');
$pages = $count_pages->publish; /* Gets the page count */
$count_comments = get_comment_count();
$comments = $count_comments['approved']; /* Gets the approved comment count */
$rss_readers = RSScount(); /* Calls the RSScount function to display your Feed Count */
$user_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->users;"); /* Gets the number of registered users*/
?>

In order to display your statistics, you just call and print your variables. This is how I did it in my footer:

<ul>
<li><a href="/archives/" title="Written posts">Articles</a>< ?php echo ": ".$posts."" ?></li>
<li><span class="footer_comm_author" title="Pages published">Pages</span>< ?php echo ": ".$pages."" ?></li>
<li><span class="footer_comm_author" title="User comments">Comments</span>< ?php echo ": ".$comments."" ?></li>
<li><span class="footer_comm_author" title="Comments per Post Ratio">Comments Ratio</span>< ?php echo ": ".round($comments/$posts)."" ?></li> /* Calculates the Comment Ratio */
<li><a href="http://www.paintbits.com/feed" title="Feed readers">Readers</a>< ?php echo ": ".$rss_readers."" ?></li>
<li><span class="footer_comm_author" title="Registered users">Members</span>< ?php echo ": ".$user_count."" ?></li>
</ul>

All put together, this is what I’ve used in my footer (don’t forget the RSScount function you need to add to your functions.php theme file):

<div class="footer_stats">
<h2>Statistics</h2>
< ?php
$count_posts = wp_count_posts();
$posts = $count_posts->publish;
$count_pages = wp_count_posts('page');
$pages = $count_pages->publish;
$count_comments = get_comment_count();
$comments = $count_comments['approved'];
$rss_readers = RSScount();
$user_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->users;");
?>

<ul>
<li><a href="/archives/" title="Written posts">Articles</a>< ?php echo ": ".$posts."" ?></li>
<li><span class="footer_comm_author" title="Pages published">Pages</span>< ?php echo ": ".$pages."" ?></li>
<li><span class="footer_comm_author" title="User comments">Comments</span>< ?php echo ": ".$comments."" ?></li>
<li><span class="footer_comm_author" title="Comments per Post Ratio">Comments Ratio</span>< ?php echo ": ".round($comments/$posts)."" ?></li>
<li><a href="http://www.paintbits.com/feed" title="Feed readers">Readers</a>< ?php echo ": ".$rss_readers."" ?></li>
<li><span class="footer_comm_author" title="Registered users">Members</span>< ?php echo ": ".$user_count."" ?></li>
</ul>
</div>

I can’t say this enough, WordPress Codex Funtion Reference is one of the best tools you can have when developing new code for your WordPress blog. Explore it a bit and you’ll probably find what you are looking for. WordPress is amazing and saves you a lot of PHP coding to a lot of commonly used tasks. This is why we all love WordPress.

Hope this is useful to you in some way.

In the ongoing creation process of the new Paintbits theme (Lumen v2), I was researching a way to implement some functionality to my footer, but without the use of plugins. One of the features I want displayed in it it’s some recent comments by the users. I found some solutions, but none satisfied my needs completely.

With the help of the WordPress default files and the WordPress Codex and some PHP I ended up with a little code snippet that do exactly what I want: A certain amount of recent comments, filtering the tracbacks and pingbacks, with a preview of the comment when hovering over the link.

The code is fairly simple.

The Code

<div class="footer_recent_comments">
<h2>Recent Comments</h2>
<ul>

< ?php
  $comments = get_comments('number=10&amp;amp;status=approve');

  $true_comment_count = 0;

  foreach($comments as $comment) :
?>

< ?php $comment_type = get_comment_type(); ?>
< ?php if($comment_type == 'comment') { ?>

< ?php $true_comment_count = $true_comment_count +1; ?>

< ?php $comm_title = get_the_title($comment->comment_post_ID);?>
< ?php $comm_link = get_comment_link($comment->comment_ID);?>
< ?php $comm_comm_temp = get_comment($comment->comment_ID,ARRAY_A);?>
< ?php $comm_content = $comm_comm_temp['comment_content'];?>

<li><span class="footer_comm_author">< ?php echo($comment->comment_author)?></span> on <a href="<?php echo($comm_link)?>" title="< ?php comment_excerpt(); ?>"> < ?php echo $comm_title?> </a>
</li> 

< ?php } ?>

< ?php if($true_comment_count == 5) {break;} ?>
< ?php endforeach;?>

</ul>
</div>

The code is surrounded by a div with the class .footer_recent_comments so you can style and position the output in your footer / sidebar or wherever you want to place it.

If you want to increase the number of comments displayed, you will need to change the variable true_comment_count == 5 to the value you want, and at the top of the code get_comments(‘number=10&status=approve’); to a number bigger than the number of comments you want. Why? Because the get_comments fetches for example 10 comments, but some of these might be trackbacks and we don’t want to display those. So within the loop we will each comment to see if they’re a real comment. If that’s the case we will display it, if not we ignore it, when we reach the number of “true” comments we want in the 10 we’ve read from the database, in this example that’s 5, we will interrupt the cycle and display the comments. I hope this is clear to you.

Just as an example, I’ll show you the CSS code I’ve used, to style the Recent Comments code I’m using in the footer.

The CSS Code

#footer
{
clear: both;
width: 1022px;
height: 230px;
background: url("images/footer_bg.jpg") repeat-y;
display:block;
}

#footer-content
{
clear:both;
padding: 25px 0;
margin: 0 31px 0 31px;
color: #7b7b7b;
}

#footer-content a, #footer-content a:visited
{
color: #7b7b7b;
}

#footer-content a:hover
{
color: #0592f4;
}

#footer-content div {
margin: 0 0 0 20px;
float: left;
}

#footer-content h2
{
font-family: Arial, Verdana, Helvetica;
font-size: 1.3em;
color:#efefef;
line-height: 1.1em;
letter-spacing: 1px;
padding: 0px 10px 10px 0;
margin: 0px 0 0 0;
}

#footer-content ul
{
text-align: left;
padding: 0 0 0 0;
}

#footer-content ul li
{
list-style: none;
padding: 5px 0 5px 20px;
margin: 0;
border-bottom: 1px solid #242424;
background: url("images/bullet_go_blue.png") left center no-repeat;
line-height:14px;
}

#footer-content ul li:hover
{
background: #121212 url("images/bullet_go_purple.png") left center no-repeat;
}

#footer-content ul li a
{
font-size: 1.0em;
}

#footer-content .footer_recent_comments
{
float: left;
width: 290px;
height:100%;
}

#footer-content .footer_comm_author
{
font-weight:bold;
color:#aaaaaa;
}

Hope this little bits of code can help you in some way in your present or future blogging endeavourers. You can see it in action on my footer.

WordPress is the tool of use of an increasing number of people, be it a developer, clients or just blog enthusiasts. If you fall into one of this categories you should think in optimization your WordPress experience. One way to do that is insert more functionalities into your website / blog. You should be thinking by now – Widgets! Well, widgets are one of the ways to achieve that, but do we really want to depend on widgets to implement all the features on our blog? You can, but you shouldn’t. It’s pretty obvious that after a certain amount of widgets you will see the loading time of your website increase accordingly.

This post falls exactly into this thematic that I hope to explore in future posts, WordPress functionalities without plugins. It seems harder than it is and even the typical Average Joe can do it. I haven’t yet explored much of the power to which you have access with a platform like wordpress and I can tell you that it’s simply amazing the stuff you can do with it.

Anyway, today is about Social Bookmarking, because it was exactly the part that I implemented into my theme today. For the ones that don’t know what the hell I’m talking about, by social bookmarking I mean the small links you can find in a lot of blogs to share the post with the rest of the world, i.e., Digg, StumbleUpon, Reddit… and Twitter, of course.

Social Links

What we want to achieve is what you can see in my blog, or like the picture below.

The first thing to do is to write the html we need to make the horizontal menu. It’s a pretty simple unordered list (ul) with some list items (li) and a bit of CSS.

The HTML

Like I said, the html part is pretty simple. This is what I used to created the menu.

  <div class="social_links">
  <ul>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  </div>

We’ll go into the structure of the links later. Right now focus on the list structure, as you can see it’s a pretty straightforward unordered list. The only thing to note is the wrapping of a div with a class (social_links).

The Link Structure

The key for having the social links… is to have them linking your post and title to the aggregation website of your choice (Digg, Delicious, etc..). For this you can check other blogs that makes use of social bookmarking and see the structure of the links (a bit of WordPress back-end knowledge comes in handy here), but for most of the link, you can find the appropriate href to use in a website like here.

As an example, the link structure of the Digg Bookmarker looks like this:

<li><a class="digg" href="http://digg.com/submit?phase=2&amp;url=<?php echo get_permalink() ?>&amp;title=< ?php the_title(); ?>">Digg</a></li>

The CSS

The next thing to do is to write some CSS to style the unordered list and the list items in it. This is the CSS i’ve used to style the Social Bookmarking Menu. I won’t go much further in explanations, but essentially the rollover effect in CSS is achieved by position the background image to a negative position, this means that in the same image you should have the normal state and the hover state, like this:

The css code:

.social_links
{
clear:both;
height:16px;
margin-bottom:35px;
padding: 4px 0 15px 4px;
position:relative;
}

.social_links ul
{
position:relative;
float:left;
}

.social_links ul li
{
float:left;
list-style: none;
line-height: 16px;
padding-left: 8px;
}

.social_links ul li a
{
display:block;
padding-left: 24px;
padding-right: 4px;
height:16px;
color:#555555;
}

.social_links ul li a:hover
{
color:#f7bf29;
}

.social_links ul li a.digg
{
background: url("images/sl_digg.png") 0px 0px no-repeat;
}

.social_links ul li a:hover.digg
{
background: url("images/sl_digg.png") 0px -16px no-repeat;
}

Basically you just need to repeat the same for the other classes (just like I show here for the digg class). Nothing out of ordinary here, only thing to note is the use of the css background element position to achieve the rollover effect on the little social link icons.

The Icons

Last but not least, the icons to use in your links. I’ve used the excellent Social Network Icon Pack from Komodo Media but there are tons of other options out there, that you can use in your project. I’ll leave here a few as a starting point for your search.

Social Network Icon Pack

Link: Komodo Media

Chrome Social Icons

Link: Chris Wallace

Social Bookmark Iconset

Link: Vikiworks

For more Icons check this article from Speckyboy Design Magazine or this one from Smashingmagazine.

Conclusion

That’s it! With this you should be able to have a nice looking Social Bookmarking menu without the need to use a plugin. Even better that not having to use a plugin is that you can customize it freely to suit your theme or personal taste. The limit is your imagination.

See you soon!

Transition went right but I think it’s time to abandon K2 Engine and do a new Theme from scratch! Yes, it’s time do do a major overhaul to the website. :)

EDIT - In the meanwhile I might use an allready made theme an tweak it a bit till I do something on my own… once I find the time!

EDIT 2 – Ok, a bit better by now. There’s a ton of broken images, Links page not working, but I’ll work on that a bit later. :)

EDIT 3 – Manage to put my old home design theme working. Problem is the customization of the Widgets that K2 doesn’t support anymore are kinda gone. Anyway gives me more time to build a brand new theme. :-P

WordPress Clickmap is an interesting plugin to complement the analysis of your blog statistics. While tools like Google Analytics or even WordPress.com Stats offer you a discrimination of your website statistics it doesn’t give you visual feedback of the “hottest” spots on your website. Well, this is exactly what WP Clickmap does. It builds an overlay of your most visited pages and show you the location of the clicks it received from your visitors. That gives you a lot of information if you know how to analyze it, at a first look it should give you a clear idea what is more used in your design or any dysfunctional areas (like my title that doesn’t guide you to the main page).

From the author:

For anyone who is wondering about the advantages of clickmaps, clickmaps let you see your site from a usability perspective. Your clickmaps show literally every click a user makes on a particular page. Every click is loaded into the database and over time a visual representation of collective clicks gives you an overview of the hotspots on the page.

While it is interesting to see links that are being clicked on, it is even more valuable to see where people are that are not links. Why do people keep clicking on the middle of my page?

Example

Link: WP Clickmap

Today we are glad to release Notepad Chaos — a free professional WordPress-theme. The theme has 2 columns, a quite vibrant design including “personal” design elements such as handwritten headings, stick-it-notes, clips and pins. The theme was designed by Evan Eckard especially for Smashing Magazine and its readers.

Notepad Chaos Theme by Smashing Magazine

Details: Notepad Chaos theme has handwritten search box and navigation at the top of the layout. It’s a 2 columns theme with a vibrant illustrated background. It uses no plugins or extras.

Requirements: No special requirements since the theme doesn’t use any plugins or extras.

Preview | Download