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.

(Note that a few of these may not be available depending on your PHP/GD setup, check the manual)

1. Get the size of an icon file, with getimagesize() (also works on all standard image formats)
2. Apply a gaussian-blur to an image, with imagefilter()
3. Rotate an image, with imagerotate()
4. Flood-fill an area of an image, with imagefill()
5. Grayscale an image, also with imagefilter()
6. Draw polygons and arcs — maybe for mathematical diagram? — with imagepolygon() and imagearc()
7. Copy and resize a section of an image, with imagecopyresized()
8. “Sketchify” images for a pencil-illustration-style effect, also with imagefilter() (see a pattern here?)

The phpied blog has some cool demos of the imagefilter() function download one night stand in particular.

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.

In just three lines of code, you can write a web search (of sorts). You can show your users customised maps with your own special HTML-friendly markers added. You can pull in the knowledge of the world, scan the entire web and even fetch lists of items available for purchase. That’s pretty powerful. And it’s all free.

The documentation is slightly complex, and I’ve noticed quite a few developers are aware of them but haven’t bothered to take a closer look – you definitely want to examine them in detail if you’re into mashup building. Just briefly brainstorming, here are some interesting things you could achieve with the APIs:

1. Illustrating content
If you’ve got user generated content, why not use the term extraction and flickr search APIs to illustrate it too?

2. Address validation

It may not be perfect, but the APIs offer a very reasonable way to validate user-input address values.

3. Find related information / further reading
The Search APIs offer access to a massive index of the internet, covering much of the typical news outlets, the blogosphere, the wikis and, of course, the traditional content servers. Why not search the entire web to find stories documenting a particular topic or event, to provide additional information to your users?

4. Check plagiarism
When dealing with user-submitted content, plagiarism is a real problem. Users copying-and-pasting entire blocks of content can anger copyright owners and create all sorts of legal issues. Why not regularly scan the web to find sites featuring the content in your database?

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

First, you need to how regular expressions work. Stick with PCRE – the preg_* functions – they’re faster, more reliable and expressions for them are more common. The different styles of regular expressions each define a mini language for matching patterns within a block of text. Screen scraping is probably the most popular example. Consider this:

<a href="http://example.com/1">1</a>
<a href="http://example.com/2">Not 1.</a>
<a href="http://example.com/?query#someid">Yet another link.</a>

What if you wanted to programmatically extract the link URLs and text from each of these? At this level of simplicty, some basic explode()s might be enough, and when you need to be more tolerant for the data, XML parsing is probably the way to go. But for now, just looking at that, regular expressions would be the easiest way. And we can build a pattern that defines what is to be matched so that the regular expression engine (in this case, PCRE) will find all matches and give them to us.

One of the best ways to understand regular expressions in practise, I find, is to consider mod_rewrite. You’ve seen those fantastic URLs on websites – e.g. http://example.com/users/myusername – these don’t actually exist as a file, but we can use Apache’s mod_rewrite engine to “rewrite” these URLs to other URLs. We might make that /users/(some username) go to /users.php?username=(the username). The best tutorial for this, by far, is the corz.org htaccess tips and tricks guide. Have a very thorough read through this and experiment with it extensively before you go on.

Next, get equipped to test out regular expressions. You’re probably using Firefox. If you aren’t, get it. Then get the Regular Expressions Tester Firefox extension. This will be invaluable for experimenting with regular expressions – the best way to learn.

Of course, you’ll need to be familiar with the PHP functions that will provide your regular expression workhorse. Bookmark the preg_match function’s manual entry and refer back to it as you need to. The manual page has some invaluable examples which you should read through extensively.

Finally, when in doubt, keep a cheatsheet at hand. ILoveJackDaniels.com has a fantastic regular expression cheatsheet that you should also bookmark.

With all these ready, you’ll be off to a great start. Remember, the best way to learn is to practise — read through real, working code, then write your own. Once you’ve finished all this, you’ll be a regular expression whiz in no time.

Part 1 – “Tools For The Task” and “Preparation”
Part 2 – “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 – “Photoshop to XHTML in 24 Hours”
Part 4 – “Cleaning Up Your XHTML”
Part 5 – “Preloading Images with Javascript and CSS”
Part 6 – “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”

• First we’ll duplicate index.html and rename the copy index.php. We’re only keeping the original .html file for reference to make sure that the finished PHP operates and looks the same.
• Let’s open index.php in our text editor. Right now it’s just a .html renamed .php. Our job is to make make it true PHP.
• Go ahead and create some more blank documents in your theme folder. Let’s call them header.php, footer.php and sidebar.php (if you have a side bar in your theme). We’re going to divide the HTML into the major sections and make each section it’s own PHP file to be marked up separately.
• Cut everything that you consider the header of your document. Make sure all tags are closed. Below you’ll find an example of my code which is really irrelevant, your own code will look and function differently based on your unique design. Still, for the sake of a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Wonderful World of Web Design!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/preload.js"></script>
</head>

<body>
<div id="container">
	<div id="header">
    <div class="description">The Blog Title</span></div>
	</div>
    <div id="header-nav"><div class="content">
    <a href="">ADVERTISE</a>  |
    <a href="">CONTACT</a>  |
    <a href="">RSS</a></div></div>
    <div id="spacer1"></div>
    <div id="upper-menu"><div class="navigation">
    <a href="">HOME</a>
    <a href="">NEWS</a>
    <a href="">BLOG</a>
    <a href="">HIRE ME</a>
    <a href="">PORTFOLIO</a>
    <a href="">QUESTIONS</a>
    <a href="">LINKS</a>
    <a href="">POPULAR</a>
    </div>

    </div>
	<div id="right-top"></div>

 <!-- End header.php -->

• Paste your header information in to header.php. Do the same for sidebar and your footer, cutting the code from index.php and pasting it in the corresponding file.
• I use comment tags like <!– End header.php –> to write notes that help me remember what’s going on in my code.
• If you do this correctly you’ll be left with a pretty sparse index.php document. All that should be left is some That’s good because now we’re going to tell index.php where to find all the information we just moved. We do this with PHP functions like so:

<?php get_phpdocumentname(); ?>

This get_ function does exactly what it sounds like it goes and fetches a requested document and displays the contents of that document in the area requested. My index.php document looked like this:

<?php get_header(); ?>

    </div>

	<div id="post">
	  <div class="entry">

		<div class="posts">
     		</div>   

	  </div>
	</div>

<?php get_footer(); ?>

• Ofcourse, for now we’ll leave the body <div>’s empty. This is where our content will eventually go.

  You’ll notice that I have no sidebar, that’s because I call for it in the header.php document instead. Why? Because browsers read code from top to bottom and I want page to request the header and side bars to first before requesting the body.

  In the next lesson we’ll start to analyze the PHP functions needed to request and display the dynamic content of a Wordpress theme.

  ]]> http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-7-153/feed/ 9 http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/#comments Tue, 29 Apr 2008 12:37:31 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/ This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

  Part 1 – “Tools For The Task” and “Preparation”
  Part 2 – “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
  Part 3 – “Photoshop to XHTML in 24 Hours”
  Part 4 – “Cleaning Up Your XHTML”
  Part 5 – “Preloading Images with Javascript and CSS”

  ---

  Marking Up Is Hard To Do

  Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

  Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

  Anatomy of a WordPress Theme

  Before we get ahead of ourselves let’s analyze exactly what Wordpress is expecting from a theme. The Wordpress engine works primarily using separate PHP files for the different components of the core engine. The various parts of your theme will simply call for various parts of the core engine to display content. This makes it easy for you to style sections individually. It also can allow for some incredibly complex themes that are built on the Wordpress engine. Themes like the The Unstandard by Derek Punsalan and Redoable are great examples of how to rethink the Wordpress theme impressively.

  Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

  A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php).

  Here are the things Wordpress looks for a theme file:

  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

  For the most part, if you’re missing any of these parts your theme either won’t work or won’t fully function the way Wordpress wants it to. So far the only thing we’ve completed is stylesheet.css so where do the rest come from? In Part 7 we’ll create index.php and start marking up our XHTML to PHP.

  ]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/feed/ 1 http://www.developertutorials.com/blog/php/iterating-php-objects-spl-iterato-150/ http://www.developertutorials.com/blog/php/iterating-php-objects-spl-iterato-150/#comments Tue, 29 Apr 2008 12:22:17 +0000 Akash Mehta http://www.developertutorials.com/blog/php/iterating-php-objects-spl-iterato-150/ Today I’m going to take a look at object iteration, most commonly found in the Standard PHP Library, and explore using the Iterator interface to simplify looping.

  It’s a generally accepted fact that more readable code is more maintainable and easier for other developers to pick up. Simple scripts can be easily worked around these principles, but the moment we explore any complexity the intricacies of the language impede basic readability – just look at the average Perl script, for example.

  The Standard PHP Library (SPL) religiously utilises iteration for some outstanding results (and great code simplicity). PHP’s native language constructs are very readable, and by simplifying our code we can build applications faster and more effectively. The SPL demonstrates this with the power of its classes integrating with language constructs, such as the foreach loop.

  Looping is probably one of the most common elements of PHP applications. Take this simple example, for instance:

  <?php
  $vegetables = array("tomato", "carrot", "cauliflower");
  foreach ($vegetables as $vegetable) {
      print $vegetable . "\n";
  }
  ?>

  As you can see, this is a very simple example, and probably doesn’t reflect a lot of the loops in your day-to-day development. They might look a little more like this:

  <?php
  foreach (($records = $db->get($this, RECORDS_PER_PAGE)->rs->array) as $row) {
      print $row;
  }
  ?>

  That’s a bit of an exaggeration – assignments in a foreach loop is not a good idea and (thankfully) isn’t very common – but it demonstrates the fundamental problem with common uses of loops – they stop making sense.

  What if we could improve that? Consider this example:

  <?php
  foreach ($db as $row) {
      // ...
  }
  ?>

  Where $db is an object. That’s right, iterating over an object. Now, typically when we iterate over an object, we get an array of its public properties. In this case, we can control from within the object $db precisely what we get when we iterate over it, by implementing the Iterator interface.

  This can work just fine, as when you iterate over an object, you can probably write a little bit of code within that object so that it knows what you wanted in the previous more complex example. For example, if you’re running a database query then fetching the resultset, you can instead run the database query then “fetch” the entire database object. When you iterate over the database object, it now knows that you really want to iterate over the resultset – and it can do just that.

  Here’s an example of the class that $db might be an instance of:

  <?php
  class MyDatabase implements Iterator
  {
      private $data = array();
   
      public function __construct()
      {
          $this->data = array("Result 1", "Result 2");
      }
   
      public function rewind() {
          reset($this->data);
      }
   
      public function current() {
          $var = current($this->data);
          return $var;
      }
   
      public function key() {
          $var = key($this->data);
          return $var;
      }
   
      public function next() {
          $var = next($this->data);
          return $var;
      }
   
      public function valid() {
          $var = $this->current() !== false;
          return $var;
      }
  }
  ?>

  As you can see, it’s a perfectly normal class, implementing methods with names close to the standard array functions. When your object is iterated over, these Iterator methods will be called where needed. What actually happens inside the methods is up to you — in this instance, we store the data in an array, $this->data, but it could as well be a complex recordset or XML node tree. As long as calling the appropriate methods performs the action needed, our class can manage its data internally and all we have to do is iterate over it like any other PHP array.

  And just for readability, we could always go a step further:

  <?php
  $books = &$db; // $books is now our $db object
  foreach ($books as $book) {
      // ...
  }
  ?>

  Now isn’t that what you’d like to see when working with someone else’s code?

  For further reading on object iteration, check out the manual page on iterating objects. Also take a look the standard PHP library functions.

  ]]> http://www.developertutorials.com/blog/php/iterating-php-objects-spl-iterato-150/feed/ 1 http://www.developertutorials.com/blog/php/php-array_walk-run-an-array-through-a-function-128/ http://www.developertutorials.com/blog/php/php-array_walk-run-an-array-through-a-function-128/#comments Tue, 22 Apr 2008 08:41:28 +0000 Akash Mehta http://www.developertutorials.com/blog/php/functions/php-array_walk-run-an-array-through-a-function-128/ If you’ve been developing with PHP for a while, you’ve probably come across this situation in the past:

  <?php
  foreach ($somearray as &$element) {
      $element = some_function($element);
  }
  

  It’s a common sight: taking an array and running (well, walking) its elements through a particular function. Luckily, PHP provides a simple yet powerful function to overcome this: array_walk().

  Usage
  Using array walk is simple. It takes two arguments, an array of data and a callback function to pass the array to. It examines the array and calls the callback function with each element of the array, allowing you to run the entire array through the function without extracting the array yourself. Consider this:

  <?php
  function some_function(&$element, $key) {
      return $element + 1;
  }
  
  // This:
  foreach ($somearray as $key=>&$element) $element = some_function($element, $key);
  
  // becomes this:
  array_walk($somearray, "some_function");
  

  It’s cleaner, faster and more effective. It also gives your callback function more information than you might usually provide. The callback parameter can be any : “function_name”, array(‘Class_name’, ‘method_name’) or even array($object, ‘method_name’) (where $object can be $this as needed).

  Syntax
  The syntax is very simple:

  array_walk (array &$array, callback $callback[, mixed $userdata]);

  The first parameter is the array that you want to run through the function. The second is the callback – for a function, class method or object method. The third allows you to pass a third parameter to the callback function from within the current context. This can be anything at all, and along with the array element and its key/index, will be passed directly to the function without modification.

  For more details, see array_walk() in the PHP manual.

  ]]> http://www.developertutorials.com/blog/php/php-array_walk-run-an-array-through-a-function-128/feed/ 0