Wordpress is a CMS that was built for blogging but many people have repurposed it for magazines, newspapers, blog networks and all sorts of other goodies! But did you know you can hack your Wordpress blog to be a no-cost solution for a social network? Well you can, and here’s fifteen plug-ins that will let you do it.

1. WP-Gravatar
Install WP-Gravatar for adding ‘faces’ to your members and your writers. This plugin lets you use Gravatar, MyBlogLog, OpenAvatar, Wavatar, Identicon, monsterID or Favico.ico files with your comments. Gives you a Widget with your profile info and your gravatar. Let’s you set your own CSS style to use with the Comments section and the author about box.

2. Ajaxed Wordpress
A highly customizable plugin to add AJAX to your blog. AWP uses AJAX to load posts inline, paginate posts, load and submit comments, and more. For that Web 2.0 look and feel.

3. Members Only
A WordPress plugin that allows you to make your WordPress blog only viewable to visitors that are logged in. This is good for protecting your user’s data and your blog content.

4. Profiles
Profiles allows the easy display and management of personal profiles / biographies, or any other similarly periodic information. In particular, it adds a “profiles” tab to the management section and allows you to easily edit information about the profiles as well as associate an image (with optional watermark) with each profile.

5. WP Super Cache
A very fast caching engine for WordPress that produces static html files. When your network does start to receive high levels of traffic, you’ll need this to prevent your site from going down.

6. Post-Plugin Library
Makes calling Similar posts, Recent Posts, Random Posts and Recent Comments easier.

7. Exec PHP
This plug-in is a godsend! It allows you to add PHP markup to wordpress pages and posts. This will give you even greater control over how wordpress looks and acts, allowing you customize with no restriction.

8. Quick SMS
This will allow visitors to send SMS messages to blog owners. It would be ideal for a WordpressMU network as it would allow everyone to stay in constant contact with each other. Could also be hacked to create a “twitter”-like service for all members.

9. UMapper
UMapper plugin is universal mapping platform, which makes it a snap to create engaging maps and add them to your blog posts. Microsoft Virtual Earth, Google Maps, OpenStreet - all are supported by this truly universal (hence the name UMapper - Universal Mapper) plugin.

10. Invite Friends
This plugins main goal was to provide the ability to any of your registered users, to invite more people to the community.

11. NextGen Gallery
Very customizable Gallery option for Wordpress. Turn your blog into a mini ‘Flickr’!

12. Popup Scheduler
If used correctly, a popup is always the best way to achieve great results (be it in sales or subscription rate). It is also the best tool to grab your readers attention. This plugin allow you to customize and schedule a popup to show according to various situation. 1) You can schedule a popup to show a welcome message whenever a new visitor arrives at your site 2) You can schedule a popup to show on the readers returned visit to thank them for reading your blog and invite them to subscribe to your feed/email update. 3) If there is any major changes to your website, you can show a popup to inform your readers of the changes 4) If you are selling products on your blog, you can schedule a popup whenever you have a new product launch 5) During a campaign (such as charity donation drive, blogathon etc), you can schedule a popup to show for a number of days to increase the awareness of the campaign. and many more…

13. SABRE
Sabre is an acronym for Simple Anti Bot Registration Engine. It’s a set of counter measures against spam registration on your blog.

14. Dashboard Editor
This plugin allows you to add whatever you want to the Wordpress dashboard through PHP and HTML even Sidebar Widgets. You can also wipe the entire dashboard or individually remove some of the more irritating sections like the Dev news, Planet Wordpress and the getting started section. This allows for the creation of custom designs for the back end to hide the fact that you’re even using Wordpress!

15. SezWho
SezWho is a distributed context, rating and reputation system for social media sites like blogs, forums, wikis, video/picture sharing sites, discussion boards and anywhere else where people collaborate on the web.

It just so happens that are a few projects in this space already….

ThemeDreamer is plug-in extension for DreamWeaver that allows users to open Wordpress themes in the DreamWeaver environment and edit them as if they were normal XHTML. It’s a truly powerful extension and only serves to make me question more why Adobe insists on ignoring this market. Something like this should be built right in!

Yvoschaap’s WpThemeGen is probably the most popular app in this space. It allows users to create Wordpress themes online and then download them for use immediately! If Adobe were particularly smart they’d be looking into this space too, web based graphic design apps are about to explode. Just ask A.viary

WPpal.com is the competitor to Yvoschaap’s web app. It’s somewhat versatile allowing you to upload and suggest themes for inclusion in the editor but is by no means a solution for a power user.

While all these solutions are great for amateurs, advanced users still dream of the day where there will be a DreamWeaver-like application for Wordpress and other CMS’.

NETTUTS: “Unraveling the Secrets Of the comments.php File”

One of the best tutorials I’ve ever seen related to customizing comments for Wordpress. Great for beginners because the explain EVERYTHING.

DARREN HOYT: “Styling Your Wordpress Comments”

Darren’s breakdown is a little bit less obtuse but gets the job done.

5THIRTY-ONE: “How To Style Wordpress Author Comments”

One of my favorite Wordpress designers makes his case.

THEMELAB: “Add Gravatar Support to Your Wordpress Comments”

Very basic guide on how to add images for your users.

TAMBA2: “Comment Styling”

Tamba2’s is a little old but still useful.

PHOTOMATT: “Display Comment Numbers”

This snippet of code from Photomatt is useful if you want to learn how to add numbers to your comments.

COLORFORGE: “Comment Template Deconstructed”

Wow, this guys comment template is incredibly beautiful and complex! Very much worth checking out.

1. Brainstorm / Don’t Overthink
   One problem many designers have is that they overthink things trying to deliberately stand out from the crowd. That’s good and if you’ve got the time to think about what your going to do longer than you actually design anything, then go for it. Most of us don’t have the time for that, we’ve got deadlines.

   Instead I when I’m designing logos I usually spend no more than 15 minutes trying to pinpoint the fundamentals of a client’s service. This company was called WeWorkForFree, a group that uses web technology to raise money for developmental programs around the globe.

   My brain storm went something like this: web, world, technology, globe, aid.

   That’s it. In fact, one might go so far as to say your brainstorm session should be a bit like picking keywords for SEO. Be brief and as acurate as possible, then use those words as the basis for your design.

2. MockUp With Varying Colors and Fonts
   Whenever I’m designing for a client I bounce roughs off my girlfriend to get her opinions. She’s not a designer and is very much left brained. When I show her stuff I deliberately change the colors, inverting and reversing as I see fit. Sometimes simply changing one color can change a logo design from “good” to “bad”, to her, and vice-versa. This forces me to try new things and it helps me focus on just how much color can bring to, or take away from a design.

   Do the same thing with your fonts, once you’ve come up with a design try the same thing with a handful of different fonts. It can make a world of difference.

3. Focus on Filtering
   Much like the brainstorming process, I tend to eliminate the amount of time I’m just spinning my wheels working on stuff for no reason. This means I also limit my variations to between 5 or 7 major ideas. After I finish those I take the strongest ones and start working on variations. I can usually weed out the weakest ideas immediately allowing me to focus on variations of the stronger ones. This inner filter keeps me quick and efficient with my own time.
4. Build a Narrative
   Assuming your designer knows nothing about design, sometimes it helps to frame your mindset for them before and after you are presenting a mockup sheet. Be brief! Give a one or two sentence pitch as to what lead you to your result. For me (the design you’ll see below) it was something like, “I wanted to emphasize the global nature of the group as it relates to both the internet and your international work.” Bam. They can’t say you didn’t give it any thought. Now show your image and pay very close attention. The initial reaction of your client is the most important one they’ll ever give you. Do they blink? Do they say “Hrmph?” Do they make a huge grin? Try to ‘read them’ and you’ll be able to prepare yourself for praise or rejection.

   If they don’t like it, don’t try to convince them. Be friendly, agree and just get back to work. Arguing with them will only equal a headache…especially when it comes time to invoice them. If they do like your work, then it’s okay expand upon your thought process, reaffirming their interest and delight.

5. Think Big
   The biggest thing you need to make sure of is that your logo will scale both in size and in terms of a widespread campaign. Will your logo translate to black and white? Could it be replicated as a stamp? Could it be presented with any variation of colors? In my world, all the best logos or brand identities maximize minimalism. They work no matter where they’re needed. For my logo I created one that was easily translatable to black and white, then I did different variations of the same logo web2.0 style, adding a bit of depth and lots of color.

   Pretend that every client you take on is one day going have a brand as ubiquitous as Starbucks or McDonald’s. Would your logo still work? Good because if it wouldn’t you’ll ned to wash, rinse and repeat.

The image below is the final comp-sheet I put together, take a look and let me know what you think.

Actually something does happen, Wordpress resets the password internally (in the MySQL database) but the link that it sent you to activate that password fails to connect with the database effectively locking you out of your blog. In this scenario, at least for me, all the potentially viable solutions lead to dead ends.

Although it should’ve, launching the database manager to reset the password manually didn’t work. I tried doing this in various ways including this method from Codex, this one from Watching The Net and this one from Thought Outflux. But none of them worked!

Opening up wp-config.php and trying to reset the password there didn’t work there either.

I was at a loss as to what to do. That is until I found the Village Idiot Emergency Password Recovery software. Using it is simple:

1. 1. Download the script from Village Idiot WordPress Emergency Password Script.
2. 2. Unpack the downloaded zip file.
3. 3. Upload the file emergency.php to the root of your WordPress installation (the same directory that contains wp-config.php).
4. 4. In your browser, open http://example.com/emergency.php.
5. 5. As instructed, enter the administrator username (usually admin) and the new password, then click Update Options. A message is displayed noting the changed password. An email is sent to the blog administrator with the changed password information.
6. 6. Delete emergency.php from your server when you are done. Do not leave it on your server as someone else could use it to change your password.

For whatever reason this worked flawlessly where the other methods failed and I was able to regain access to my wordpress blog and set the password to something I’ll (hopefully) never forget again. I’m not ruling out operator error on the other methods but the aptly titled Village Idiot software makes the process fool-proof.

Note: Keep in mind that all of these options will only work if you are the site administrator or have direct access to the server at which the blog is hosted.

1. Quickly Find Page/Post ID

One question people often ask is how to find a Page or Post ID when you’re using custom permalinks. Custom permalinks rewrite your URLs to be easier to read and memorable. Finding the ID of a post is not as tricky as it looks. Simply log into to your admin panel and click “Manage” then select either posts or pages. Find the item that you need the ID of and click your post to edit it. In the navigation bar of your browser, you will see a IRL for editing this post. At the very end of this URL you’ll find your post or page ID number!

2. Custom Front Page

Another common problem is people having trouble figuring out how to create a custom front page that doesn’t look exactly like the rest of their blog. This has never been too obvious but it is simple enough to do.

1. 1. Open a blank document in a text editor. Then paste the following codes in it:

   	<?php
   	/*
   	Template Name: YourCustomPageTemplateName
   
   	*/
   	?>
   
   	<html>
   

2. 2. Save the new page template as a .php file. Something like static.php but make sure you do not call it page.php because that file already exists as part of your theme. Then upload it to your hosting account in the root folder of your current WordPress theme (http://yourblog/blog/wp-content/themes/default. Where default is the active theme.).
3. 3. Now you can design this page however you wish either in your text editor or in the ‘Design’ tab of Wordpress. I usually copy and paste everything I want to keep from the preexisting page.php that I want to keep, leaving out things like the sidebar and footer.
4. 4. When you create a new page under ‘Write’ you will notice a new area below the content area called “Page Template”.

   

   Here you will select ‘YourCustomPageTemplateName’. When you publish it, only this page will look like your design for ’static.php’ or whatever you called your custom page theme.

5. 5. To set this as the front page click ‘Options’ then the ‘Reading’ subpanel. Choose the Static Page option, specify your new custom page as the front page. To see this in action click here.

3. Password Protect Wordpress

A growing trend is to use Wordpress as a CMS to sell premium content. This means the owner may want certain sections of their blog to be free, while the rest is a paid premium. For example http://www.wpdesigner.com/ is a wordpress theme site that offers a free content but only people who subscribe get the premium content. How is this done? You’ll need to password protect wordpress. Here are some options for doing that:

Password Protect by User level - allows you to create member classes that can have different content privileges than other classes. (ex. premium subscribers)
.htaccess Password Generator - a free way to protect your content, this option password protects EVERYTHING
Bravenet - an inexpensive solution that offers protection for sites that it hosts

4. Protect from the ‘Digg Efect’ with HTML

Has Digg brought your site to a grinding halt? Are you sick of waking up to find out your site has been down for hours and you’ve had no idea? WP Super Cache will save your page from the hundreds of visitors per second that Digg can bring by caching pages and serving less server heavy html pages.

5. Stop Hackers

Occasionally you may attract some unwanted attention to your blog from either people jealous of your success or people just looking to cause damage. How can you discourage people from hacking your site? Try the following:

1. Protect the Admin Folder - This folder is the door to the rest of your blog so putting up a fortified fence will help prevent attacks.
2. Deny Access to Other Folders - Many web hosts by default allow people to browse a folder if there is no default index.html file. Adding a blank index.html file to these folders will add an extra level of protection.
3. Remove the Wordpress Version - Hackers look for vulnerabilities that they sometimes know exist in specific versions of your CMS, if they can’t figure out what version you’re using it will make it that much harder for them to know which vulnerabilities to exploit. Try this plugin which does exactly that.

So far I’ve released two themes: Tech Blogger and Unstandard Remix). A third, my first completely original theme, is still in development but I released it early for the sake of my tutorial.

What do you need to do when you’re releasing your first theme be it modified or bespoke? Here’s a checklist:

• Include a readme.txt file. This file should contain installation instructions, release info and any notes you want the reader to be aware of before using your theme. It really sucks when novices are downloading themes only to be 100% confused by what they’ve downloaded. It only means that they may delete your theme and download another one that they can more easily digest. If your goal is maximum adoption, that’s not the route you want to go.
• Test it. Think of every scenario you can possibly remember from your own blog use. Try to be the use, do all the things that you think no one would ever do because (rest assured) that person is out there. Are all your links functioning? Are all your pages displaying correctly? If not, is your 404.php page popping up when it should? Make sure you’ve thought of EVERY possible scenario before you release your theme. I can’t tell you how annoying it is download a theme that you like only to spend the next few hours debugging it to make it truly functional.



• Organize it. You want your theme to be well organized so that it doesn’t take any longer than necessary to install and use it. Put your actual theme in a parent folder labeled ‘theme’ so the user can just drag and drop. Place any plug-ins or widgets your theme uses in a parent folder called ‘plugins’ so that the user can do the same. If you’re including .psd label those in a folder that tells the user what it is.
• Compress it. You’ll be hard-pressed to find a file host that makes it easy to share uncompressed folders. This is because a folder is a directory and if you upload it virtually any service online it will be treated like a directory (if accepted at all). Compress the file as either a .zip, .sit, .gzip or .tar.gz file. This will make the files faster to download and it will allow the user to download with one click instead of several
• Publish it. Where will your theme live online? Do you want it on your own web server or do you want it hosted on at repository like themes.wordpress.net? I prefer to use repositories or file hosting services like mediafire.com
• Announce it. Unless a lot of people read your bog or visit your website, there’s no way for people to know what you’ve done. If you’ve posted your theme to a repository like themes.wordpress.net then the job is already done. However, you should tell your friends and submit it to some other sites so that the world is aware.

So far we’ve made a ton of progress with our theme design. We designed it in Photoshop, we converted to XHTML and then we began the somewhat tedious task of adding PHP. Now that we’ve created index.php, header.php, footer.php and sidebar.php, we can move on to creating the rest of the theme.

In “The Anatomy of a Wordpress Theme” we noted that Wordpress needs certain files for your theme to function properly. Here’s that list again:

1. 404 Template = 404.php
2. Archive Template = archive.php
3. Archive Index Page = archives.php
4. Comments Template = comments.php
5. Footer Template = footer.php
6. Header Template = header.php
7. Links = links.php
8. Main Template = index.php
9. Page Template = page.php
10. Popup Comments Template = comments-popup.php
11. Post Template = single.php
12. Search Form = searchform.php
13. Search Template = search.php
14. Sidebar Template = sidebar.php
15. Stylesheet = style.css

As you may have noticed, the items listed in bold are the only items we’ve created in our lessons thus far and there is still a lot of work to be done! Anything struck through is optional therefore this lesson won’t cover it but I have linked to pages where you can read about them on your own. While I can’t go into complete detail I will highlight some major points about each and then I’ll give you links to four sites that break the process down in detail and more thoroughly:

single.php

Single.php is the file referenced when someone clicks on the permalink for one of your posts. Thus it is the template for displaying a single post on your blog. On most blogs single.php an index.php are very similar except that in addition to querying <? the content(); ?> we also have to query the comments page. We do this just before we close the loop with:

	<?php comments_template(); ?>

page.php

Page.php is the template for any page in your theme that doesn’t have it’s own .php template or that is not a blog entry. This is also the template for the static “Pages” that you create within the Wordpress Admin panel. It is usually also just like index.php except that it doesn’t include the loop or the_content().

links.php

Ignores Page content and instead displays your links using get_links_list.

404.php

Where you users land when they follow a bad link on your blog or click through to something that’s been removed. Codex offers some advice….

While you work hard to make sure that every link actually goes to a specific web page on your site, there is always a chance that a link clicked will slam dunk and become a famous 404 ERROR PAGE NOT FOUND. Some errors are avoidable, you should regularly check and double check all your links. Also, if you are deleting a popular but out-of-date post, consider deleting the body of the post, and replacing it with a link referring visitors to the new page.

This concludes “Designing and Coding a Wordpress theme from Scratch” . This guide was written as a starting point and a reference guide I can always be contacted at jongos [at] gmail if you are having trouble or need advice. Alternatively I’ve compiled a list of resources that I often reference when creating themes below.

In this tutorial I mentioned a theme that I was developing quite a bit. You can download it along with the PSD used to create it here. Keep in mind that the version you’re downloading is an early beta release. It’s bulky, clunky, not very pretty under the covers and has a mind of it’s own so I’m dubbing it the Rosie O Donnell release. Feel free to give me feedback on it, use it to double check your own code, or modify it to suit your needs.

DOWNLOAD THE AQUA MARINA WORDPRESS THEME

Stepping_Into_Templates
HTML to XHTML
So You Want To Create Wordpress Themes
From XHTML/CSS to Wordpress
Tamba2’s Guide
Slizing a Wordpress Theme

Because Wordpress is fundamentally a PHP system we can add a few snippets of code to make our header, footer and sidebar files dynamic.

Marking Up Header.php

Your blog header file usually contains the title of your site linked to the homepage. In an HTML page we would simply add text or place an image and link to the homepage using <a href=”"></a>. The key to making our Wordpress theme, however, is we need to make all our links relative so that the end user can install the theme and use it with their own unique site with as little fuss as possible. It should just work.

How is this done? We use PHP requests to request and print the blog title allowing it to be dynamically relative to the database.

The code for a text blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

The code for an image blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<img src="your/image/path.jpg" title="<?php bloginfo('name'); ?>" />
	</a></div>

These are the only two codes we need to place in our header.php file. In my case I needed to request other PHP documents that are meant to be displayed before the document continues: the sidebar and the center rotating headline areas. I this did using this code:

	<?php require('yourphpfile.php'); ?>
	<?php get_sidebar(); ?>

Still confused? The image below contains a region map of my theme’s index.php as it displays in a browser. The red region represents “header.php”, the purple region represents “center.php”, the blue region represents “sidebar.php” and the green is the post area, the code for which is contained in index.php.

Because the format of my blog is unique to my design this may not apply to your own design, I just want to make sure everything is throughly explained so that when you download my theme in Part 10 you’ll understand how everything works.

Marking Up Footer.php

Footer.php is even easier because there’s no crucial PHP requests that need to go here to make it function. This means it can be entirely HTML or you can add a dynamic request for the blog title like you did above. You may want to try something like this:

	<div class="footer">©2008 <a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

…which would simply display the copyright and year followed by the blog title.

Marking Up Sidebar.php

Sidebar.php is essentially the same in that it can contain nothing more than HTML or it can also contain PHP queries. Here are some popular PHP queries often used in sidebar.php:

	<strong>Display the Blogroll:</strong>
	<?php get_links_list(); ?>

	<strong>Display the pages of the site:</strong>
	<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

	<strong>Display the site's categories:</strong>
	<?php wp_list_cats(); ?>

I recommend reading “Customizing Your Sidebar” if you’d like to explore your options a bit more. In Part 10 we’ll create the other pages of our theme and then we’ll learn all about“Packaging a Wordpress Theme for Distribution”

Wordpress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability as the makers proudly proclaim at wordpress.org. The keyword there being ‘publishing’ and the most important part of the Wordpress publishing engine is the element that allows content to be published online easily and automatically. This element is called the the loop.

While I can’t get into all the operational mechanics of how Wordpress works here, I can refer you to a page that does offer more in depth analysis (here). What is important to this tutorial is that the Wordpress theme we designed in Photoshop needs this PHP function (along with a few others) to correctly fetch content from the database. Let’s examine four critical functions:

<?php query_posts();?>
Requests the database of content, should be placed near the top of index.php
just after the request <?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
this is The Loop and it should be placed prior to
where you want your content to print

<?php the_content(''); ?>
Calls and prints the content of your blog according to the settings in the
admin section or php functions called before it.  This should be placed wherever
you want your blog posts to go within the <div> tags.

<?php endif; ?>
Closes the loop.

Using the code from Part 7 as an example:

<?php get_header(); ?>
<?php query_posts();?>

    </div>

	<div id="post">
	  <div class="entry">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="posts">
	<?php the_excerpt(''); ?>
     		</div>   

	<?php endif; ?>
	  </div>
     </div>

<?php get_footer(); ?>

You may notice that the <div> tags with id and class=”posts”elements. These are styling anything they contain. My id=”post” is printing my photoshoped content area. The area with id=”class” is formating how my content will be formated. Do I want to justify text? Do I want to use a text-transform on the first letter? Change the color of text? All those types of styles should be applied to this class to be passed on to the text inside the container.

These three lines alone are essentially all you need for index.php in your theme. However, you’ll notice that we’re missing a few important items. We need to call and style the posts name, permalink, and meta data individually. This means we need to add the following:

<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
Requests the post tile and links to it. Place this before the post content.

<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>
<?php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?>
Requests various types of information related to the post.  Place this just after the previous line.

<?php the_category(', ') ?> <?php the_tags('| Tags: ', ', ', ''); ?>
<?php edit_post_link('| Edit', '', ''); ?></p>
This calls the footer meta information for each individual post.
Place this after the content but before you close the loop.

After placing these codes my index.php looks something like this:

<?php get_header(); ?>
<?php query_posts("showposts=2");?>

	<div id="post">
	<div class="entry">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   	<span class="postname"><a href="<?php the_permalink() ?>"><?php
 the_title(); ?></a></span>

    	<p class="postinfo">

		<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> <?
php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?></p>

	<div class="posts">
    		<?php the_content(''); ?>
         	<p class="postinfo">Posted in <?php the_category(', ') ?> <?php
 the_tags('| Tags: ', ', ', ''); ?> <?php edit_post_link('| Edit', '', ''); ?>
</p>

     	</div>   

		<?php endif; ?>
	</div>
	</div>

    		<?php get_footer(); ?>

In Part 9 we’ll be discussing how to correctly markup header.php, footer.php and footer.php and in Part 10 we’ll create the other pages Wordpress needs.