vZhai: Info Sharing Blog

The Latest Updates to jQuery Mobile

2012-11-07T11:07:00.001+08:00

Not too long ago, the jQuery team released jQuery Mobile 1.2. This new release has some fantastic changes! In this article, we're going to review some of the new widgets available to developers, take a look at changes made to existing widgets, and glance over a few impactful enhancements that could affect your jQuery Mobile application. Let's get started, shall we?

Firstly, we'll need to download the bits and bytes. Head over to the jQuery Mobile download page and download the option that best meets your needs. Alternately you can just use the boilerplate code provided below.
Additionally, now might be a good time to quickly discuss the Download Builder that the jQuery Mobile team is building. It's still in Alpha, but it allows you to customize your download to include only the parts of jQuery Mobile that you require, and nothing more. You can exclude specific events, transitions, form elements, or widgets that you don't care about. It's meant for the developers who are ultra-concerned with grasping the highest level of performance out of his or her application.

Widgets

The beating heart of any jQuery Mobile application are its widgets. Arguably they're the most visible part of the page, and the part that allows users to interact with the page in such an easy manner. The jQuery Mobile team has spent countless hours testing, building, and refining their widgets to make sure that they're the best they can be. In version 1.2, the team has really knocked it out of the park with a widget that developers have been asking for since the framework was first released: popup modals.

Popups

A popup modal is a small section of the page that overlays other parts of the page. They're most typically used as tooltips, or to display photos, maps, and additional content. This information is usually not important enough to warrant another page, but is still important to need displaying by itself. The way jQuery Mobile 1.2 has implemented popups is perfect. Let's learn how easy it is to add popups to a project.
A quick note, for the sake of brevity: all of the code samples below will use the following boilerplate HTML. The jQuery Mobile CSS and JS files (including jQuery) are hotlinked using the jQuery CDN for your convenience.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile 1.2</title>
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="content">
        <!-- your content goes here -->
    </div>
</body>
</html>

Adding a popup to a page in your application is a two-step process. First you'll need some means of triggering the popup. This is generally a link, or button, or something the user interacts with. To trigger element, we add the following attribute:

data-rel="popup"

Second, you need the content to be displayed. This could range from a single div to a menu, a form, or even photos. The content element gets its own attribute:

data-role="popup"

Finally, for simple link buttons, the href attribute must correspond to the id of the content to be displayed. Let's review the complete implementation.

<a href="#simplepopup" data-rel="popup">Open Popup</a>
<div data-role="popup" id="simplepopup">
    <p>This is a completely basic popup, no options set.<p>
</div>

What you'll see on the page should look something similar to this:

Tooltips

Now that you know how to create a popup, let's look at other possibilities. One common use is a tooltip; help text or expanded text shown when a user clicks on a button. Set up the code the same as before:

<a href="#tooltip" data-rel="popup" data-role="button">Find out more</a>
<div data-role="popup" id="tooltip" data-theme="e">
    <p>You found out more!.</p>
</div>

This time, we're styling the resulting content using the e swatch from jQuery Mobile to give it a more pleasant appearance. This helps us remember that popups are first class jQuery Mobile citizens, and can be treated just like anything else on the page.

Menus

Let's move on to something a bit more complicated: a menu. That's a popular approach to page navigation. Give the user the a menu right at their fingertips. So what does that look like with popups?

<a href="#menu" data-rel="popup" data-role="button">Menu</a>
<div data-role="popup" id="menu" data-theme="a">
    <ul data-role="listview" data-theme="c" data-inset="true">
        <li data-role="divider" data-theme="a">My Menu</li>
        <li>Unlinked</li>
        <li><a href="methods.html">Linked</a></li>
        <li><a href="methods.html">With count</a><span class="ui-li-count">42</span></a></li>
    </ul>
</div>

And the resulting output should resemble this:

You can also use 1.2's collapsible lists in popups. Here's a quick example:

<a href="#nestedmenu" data-rel="popup" data-role="button">Nested Menu</a>
<div data-role="popup" id="nestedmenu" data-theme="none">
    <div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="false">
            <h2>Colors</h2>
            <ul data-role="listview">
                <li><a href="#">Red</a></li>
                <li><a href="#">Blue</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-inset="false">
            <h2>Shapes</h2>
            <ul data-role="listview">
                <li><a href="#">Circle</a></li>
                <li><a href="#">Square</a></li>
            </ul>
        </div>
    </div>
</div>

And the results:

It's worth noting that data-inset="true" is required on the listview or the corners of your list will show up. Try and you'll see.

Forms

Another popular UX approach is to show a login form hovering over the top of a page. That's now possible with jQuery Mobile popups. Here's a simple username/password form.

<a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a>
<div data-role="popup" id="login" data-theme="a">
    <form style="padding:10px 20px;">
        <h3>Please sign in</h3>
        <label for="un" class="ui-hidden-accessible">Username:</label>
        <input type="js" name="user" id="un" placeholder="username" />
        <label for="pw" class="ui-hidden-accessible">Password:</label>
        <input type="password" name="pass" id="pw" placeholder="password" />
        <button type="submit" data-theme="b">Sign in</button>
    </form>
</div>

Which gives you:

By default, popups center themselves over the object which triggered them. There's an optional attribute which you'll see in the next three examples. It's data-position-to="window" and you apply it to the element which triggers the popup. Try adding that to the Login button above to see what happens.

Dialogs

A common need for web applications is the ability to interact with the user. We just reviewed one approach: a login form. But, sometimes, you need to prompt the user with questions. A dialog is a perfect solution for this; and what do you know, popups have you covered! So what does that code look like? Here's a simple example:

<a href="#dialog" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop">Dialog</a>
<div data-role="popup" id="dialog" data-overlay-theme="a" data-theme="c">
    <div data-role="header" data-theme="a">
        <h1>Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d">
        <h3>Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">No</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">Yes, Delete it</a>
    </div>
</div>

In the popup content container, note another new attribute for your use: data-overlay-theme="a". This attribute is what applies the shaded background to the dialog box. It's affected by your theme, so be careful when working with themes created with ThemeRoller.

Photos

I can't count the number of times I've seen jQuery Mobile developers ask for some better way of handling image galleries. While popups aren't the perfect solution for large numbers of images, they're great for a handful of images that need to be viewed larger. Even better, it’s incredibly easy; check it out:

<a href="#photo" data-rel="popup" data-position-to="window" data-role="button" data-transition="fade">Photo</a>
<div data-role="popup" id="photo" data-overlay-theme="a" data-theme="d" data-corners="false">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="nojs" class="ui-btn-right">Close</a><img src="http://lorempixel.com/450/300/food/" />
</div>

The above code gives you an elegant photo centered to the window, including a close window button.

How did they do that? Within the context of a popup, the anchor tag has attributes which behave slightly different than when used in other locations on the page. Specifically, the ui-btn-right class positions the image in the corner of the image rather than the side, while the data-icon and data-iconpos attributes allow you to style the button just as you would a regular button.
You can get pretty fancy with popups including, but not limited to, displaying inline video and even interactive maps. Check the jQuery Mobile documentation for popups and iframes.

Collapsible List Views

Another great new feature is the ability to combine collapsible sets with list views. Call 'em “Collapsible List Views” and you've got a brand new widget in jQuery Mobile 1.2. How do they work? I'm glad you asked. Simply create any list you like, then wrap it in a collapsible set. Collapsible List Views also support multiple lists – so get crazy!

<div data-role="collapsible" data-theme="b" data-content-theme="c">
    <h2>Favorite Spice Girl?</h2>
    <ul data-role="listview">
        <li><a href="index.html">Posh</a></li>
        <li><a href="index.html">Scary</a></li>
        <li><a href="index.html">Sporty</a></li>
        <li><a href="index.html">Baby</a></li>
        <li><a href="index.html">Ginger</a></li>
    </ul>
</div>

The code above would result in this Collapsible List View:

Enhancements

In addition to new widget types, jQuery Mobile 1.2 provides a number of useful enhancements to existing functionality. Let's take a look at some of the more valuable ones.

jQuery Support Changes

One of the biggest enhancements made in version 1.2 is the added support for jQuery 1.8. This brings some significant performance increases in the form of a completely rewritten Sizzle.js (the selector engine for jQuery), along with numerous other improvements.
The tradeoff is that the jQuery Mobile team decided that it was time to sunset support for jQuery 1.6. This may be unfortunate for some folks out there who are still using older versions of jQuery, but it’s a fair trade.

List View Autodividers

If you've ever had to manage a list of constantly changing people, places, or things in jQuery Mobile then, you've probably had to write some tricky code to display dynamic listview headers. Bummer that you spent all that time, because the jQuery Mobile team made it as easy as dropping in a single attribute.

data-autodividers="true"

That turns this list:

Into:

Note that this does not manage sorting, grouping, or filtering. For that sort of functionality, consider trying my jQuery Mobile Tinysort plugin.

Read-Only Lists

jQuery Mobile offers "read-only" list views, but it was difficult to tell that they weren't clickable. Version 1.2 removes the list gradient, making the row a flat color. This should provide a better visual cue to your users.

Better Width adjustments on Form Elements

Version 1.2 fixes a semi-annoying issue with form elements, whereby they wouldn't take up the full width of their parent element in some cases.

Additional Devices Added

You might have noticed that new devices are being added almost on a daily basis. The jQuery Mobile team does their best to test against as many of these devices as possible. Newly added to the A grade platform list are the following devices/operating systems/browsers: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox for Android, and Kindle Fire HD.

Full List of Changes

You can find a complete list of the changes made for version 1.2 on the jQuery Mobile blog.
I hope that some of these improvements will help to improve your applications. Remember that the jQuery Mobile team is on your side! If you see something that you think would be valuable, ask for it: create an issue in their Github repository, and suggest it. Better yet, fork their repo and add some code yourself!

Source: http://net.tutsplus.com/

PHP Database Access: Are You Doing It Correctly?

2012-06-19T17:59:00.001+08:00

We've covered PHP's PDO API a couple of times here on Nettuts+, but, generally, those articles focused more on the theory, and less on the application. This article will fix that!
To put it plainly, if you're still using PHP's old mysql API to connect to your databases, read on!

What?

It's possible that, at this point, the only thought in your mind is, "What the heck is PDO?" Well, it's one of PHP's three available APIs for connecting to a MySQL database. "Three," you say? Yes; many folks don't know it, but there are three different APIs for connecting:

mysql
mysqli – MySQL Improved
pdo – PHP Data Objects

The traditional mysql API certainly gets the job done, and has become so popular largely due to the fact that it makes the process of retrieving some records from a database as easy as possible. For example:

/*
 * Anti-Pattern
 */

# Connect
mysql_connect('localhost', 'username', 'password') or die('Could not connect: ' . mysql_error());

# Choose a database
mysql_select_db('someDatabase') or die('Could not select database');

# Perform database query
$query = "SELECT * from someTable";
$result = mysql_query($query) or die('Query failed: ' . mysql_error());

# Filter through rows and echo desired information
while ($row = mysql_fetch_object($result)) {
    echo $row->name;
}

Yes, the code above is fairly simple, but it does come with its significant share of downsides.

Deprecated: Though it hasn't been officially deprecated – due to widespread use – in terms of best practice and education, it might as well be.
Escaping: The process of escaping user input is left to the developer – many of which don't understand or know how to sanitize the data.
Flexibility: The API isn't flexible; the code above is tailor-made for working with a MySQL database. What if you switch?

PDO, or PHP Data Objects, provides a more powerful API that doesn't care about the driver you use; it's database agnostic. Further, it offers the ability to use prepared statements, virtually eliminating any worry of SQL injection.

How?

When I was first learning about the PDO API, I must admit that it was slightly intimidating. This wasn't because the API was overly complicated (it's not) – it's just that the old myqsl API was so dang easy to use!
Don't worry, though; follow these simple steps, and you'll be up and running in no time.

Connect

So you already know the legacy way of connecting to a MySQL database:

# Connect
mysql_connect('localhost', 'username', 'password') or die('Could not connect: ' . mysql_error());

With PDO, we create a new instance of the class, and specify the driver, database name, username, and password – like so:

$conn = new PDO('mysql:host=localhost;dbname=myDatabase', $username, $password);

Don't let that long string confuse you; it's really very simple: we specify the name of the driver (mysql, in this case), followed by the required details (connection string) for connecting to it.
What's nice about this approach is that, if we instead wish to use a sqlite database, we simply update the DSN, or "Data Source Name," accordingly; we're not dependent upon MySQL in the way that we are when use functions, like mysql_connect.

Errors

But, what if there's an error, and we can't connect to the database? Well, let's wrap everything within a try/catch block:

try {
    $conn = new PDO('mysql:host=localhost;dbname=myDatabase', $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

That's better! Please note that, by default, the default error mode for PDO is PDO::ERRMODE_SILENT. With this setting left unchanged, you'll need to manually fetch errors, after performing a query.

echo $conn->errorCode();
echo $conn->errorInfo();

Instead, a better choice, during development, is to update this setting to PDO::ERRMODE_EXCEPTION, which will fire exceptions as they occur. This way, any uncaught exceptions will halt the script.
For reference, the available options are:

PDO::ERRMODE_SILENT
PDO::ERRMODE_WARNING
PDO::ERRMODE_EXCEPTION

Fetch

At this point, we've created a connection to the database; let's fetch some information from it. There's two core ways to accomplish this task: query and execute. We'll review both.

Query

/*
 * The Query Method
 * Anti-Pattern
 */

$name = 'Joe'; # user-supplied data

try {
    $conn = new PDO('mysql:host=localhost;dbname=myDatabase', $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $data = $conn->query('SELECT * FROM myTable WHERE name = ' . $conn->quote($name));

    foreach($data as $row) {
        print_r($row);
    }
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

Though this works, notice that we're still manually escaping the user's data with the PDO::quote method. Think of this method as, more or less, the PDO equivalent to use mysql_real_escape_string; it will both escape and quote the string that you pass to it. In situations, when you're binding user-supplied data to a SQL query, it's strongly advised that you instead use prepared statements. That said, if your SQL queries are not dependent upon form data, the query method is a helpful choice, and makes the process of looping through the results as easy as a foreach statement.

Prepared Statements

/*
 * The Prepared Statements Method
 * Best Practice
 */

$id = 5;
try {
    $conn = new PDO('mysql:host=localhost;dbname=myDatabase', $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);    

    $stmt = $conn->prepare('SELECT * FROM myTable WHERE id = :id');
    $stmt->execute(array('id' => $id));

    while($row = $stmt->fetch()) {
        print_r($row);
    }
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

In this example, we're using the prepare method to, literally, prepare the query, before the user's data has been attached. With this technique, SQL injection is virtually impossible, because the data doesn't ever get inserted into the SQL query, itself. Notice that, instead, we use named parameters (:id) to specify placeholders.

Alternatively, you could use ? parameters, however, it makes for a less-readable experience. Stick with named parameters.

Next, we execute the query, while passing an array, which contains the data that should be bound to those placeholders.

$stmt->execute(array('id' => $id));

An alternate, but perfectly acceptable, approach would be to use the bindParam method, like so:

$stmt->bindParam(':id', $id, PDO::PARAM_INT);
$stmt->execute();

Specifying the Ouput

After calling the execute method, there are a variety of different ways to receive the data: an array (the default), an object, etc. In the example above, the default response is used: PDO::FETCH_ASSOC; this can easily be overridden, though, if necessary:

while($row = $stmt->fetch(PDO::FETCH_OBJ)) {
    print_r($row);
}

Now, we've specified that we want to interact with the result set in a more object-oriented fashion. Available choices include, but not limited to:

PDO::FETCH_ASSOC: Returns an array.
PDO::FETCH_BOTH: Returns an array, indexed by both column-name, and 0-indexed.
PDO::FETCH_BOUND: Returns TRUE and assigns the values of the columns in your result set to the PHP variables to which they were bound.
PDO::FETCH_CLASS: Returns a new instance of the specified class.
PDO::FETCH_OBJ: Returns an anonymous object, with property names that correspond to the columns.

One problem with the code above is that we aren't providing any feedback, if no results are returned. Let's fix that:

$stmt->execute(array('id' => $id));

# Get array containing all of the result rows
$result = $stmt->fetchAll();

# If one or more rows were returned...
if ( count($result) ) {
    foreach($result as $row) {
        print_r($row);
    }
} else {
    echo "No rows returned.";
}

At this point, our full code should look like so:

$id = 5;
  try {
    $conn = new PDO('mysql:host=localhost;dbname=someDatabase', $username, $password);
    $stmt = $conn->prepare('SELECT * FROM myTable WHERE id = :id');
    $stmt->execute(array('id' => $id));

    $result = $stmt->fetchAll();

    if ( count($result) ) {
      foreach($result as $row) {
        print_r($row);
      }
    } else {
      echo "No rows returned.";
    }
  } catch(PDOException $e) {
      echo 'ERROR: ' . $e->getMessage();
  }

Multiple Executions

The PDO extension becomes particularly powerful when executing the same SQL query multiple times, but with different parameters.

try {
  $conn = new PDO('mysql:host=localhost;dbname=someDatabase', $username, $password);
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  # Prepare the query ONCE
  $stmt = $conn->prepare('INSERT INTO someTable VALUES(:name)');
  $stmt->bindParam(':name', $name);

  # First insertion
  $name = 'Keith';
  $stmt->execute();

  # Second insertion
  $name = 'Steven';
  $stmt->execute();
} catch(PDOException $e) {
  echo $e->getMessage();
}

Once the query has been prepared, it can be executed multiple times, with different parameters. The code above will insert two rows into the database: one with a name of “Kevin,” and the other, “Steven.”

CRUD

Now that you have the basic process in place, let’s quickly review the various CRUD tasks. As you’ll find, the required code for each is virtually identical.

Create (Insert)

try {
  $pdo = new PDO('mysql:host=localhost;dbname=someDatabase', $username, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $stmt = $pdo->prepare('INSERT INTO someTable VALUES(:name)');
  $stmt->execute(array(
    ':name' => 'Justin Bieber'
  ));

  # Affected Rows?
  echo $stmt->rowCount(); // 1
} catch(PDOException $e) {
  echo 'Error: ' . $e->getMessage();

Update

$id = 5;
$name = "Joe the Plumber";

try {
  $pdo = new PDO('mysql:host=localhost;dbname=someDatabase', $username, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $stmt = $pdo->prepare('UPDATE someTable SET name = :name WHERE id = :id');
  $stmt->execute(array(
    ':id'   => $id,
    ':name' => $name
  ));

  echo $stmt->rowCount(); // 1
} catch(PDOException $e) {
  echo 'Error: ' . $e->getMessage();
}

Delete

$id = 5; // From a form or something similar

try {
  $pdo = new PDO('mysql:host=localhost;dbname=someDatabase', $username, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $stmt = $pdo->prepare('DELETE FROM someTable WHERE id = :id');
  $stmt->bindParam(':id', $id); // this time, we'll use the bindParam method
  $stmt->execute();

  echo $stmt->rowCount(); // 1
} catch(PDOException $e) {
  echo 'Error: ' . $e->getMessage();
}

Object Mapping

One of the neatest aspects of PDO (mysqli, as well) is that it gives us the ability to map the query results to a class instance, or object. Here’s an example:

class User {
  public $first_name;
  public $last_name;

  public function full_name()
  {
    return $this->first_name . ' ' . $this->last_name;
  }
}

try {
  $pdo = new PDO('mysql:host=localhost;dbname=someDatabase', $username, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $result = $pdo->query('SELECT * FROM someTable');

  # Map results to object
  $result->setFetchMode(PDO::FETCH_CLASS, 'User');

  while($user = $result->fetch()) {
    # Call our custom full_name method
    echo $user->full_name();
  }
} catch(PDOException $e) {
  echo 'Error: ' . $e->getMessage();
}

Closing Thoughts

Bottom line: if you’re still using that old mysql API for connecting to your databases, stop. Though it hasn’t yet been deprecated, in terms of education and documentation, it might as well be. Your code will be significantly more secure and streamlined if you adopt the PDO extension.

How to Process Credit Cards with PayPal Payments Pro Using PHP

2012-06-19T17:52:00.001+08:00

PayPal is one of the most popular payment processing platforms available today for many reasons. Its ease of use and its connection to the eBay platform are just the tip of the iceberg. While one of its most popular features is the ability to simply sign in to your PayPal account to submit payments, merchants using PayPal can also accept credit cards directly just like a traditional merchant account solution would provide.

PayPal calls this solution Payments Pro, and I’m going to show you exactly how you can process credit cards directly with PayPal’s API using their Payments Pro web service API’s.

Step 1: Setup the Directory Structure

The first thing I like to do with any project is to create a basic structure organized for the project. In this case, our structure is very simple as our project will consist of only 2 files:

As you might have guessed, we’ll be storing our configuration information in config.php, and we’ll actually handle the processing code in process-credit-card.php.

Step 2: Setup the Config File

Our /includes/config.php file will house our values for the PayPal API information we need including the end-point URL, API version, and our API username, password, and signature that we’ll be using.

// Set sandbox (test mode) to true/false.
$sandbox = TRUE;

// Set PayPal API version and credentials.
$api_version = '85.0';
$api_endpoint = $sandbox ? 'https://api-3t.sandbox.paypal.com/nvp' : 'https://api-3t.paypal.com/nvp';
$api_username = $sandbox ? 'SANDBOX_USERNAME_GOES_HERE' : 'LIVE_USERNAME_GOES_HERE';
$api_password = $sandbox ? 'SANDBOX_PASSWORD_GOES_HERE' : 'LIVE_PASSWORD_GOES_HERE';
$api_signature = $sandbox ? 'SANDBOX_SIGNATURE_GOES_HERE' : 'LIVE_SIGNATURE_GOES_HERE';

Reviewing the config.php code, you can see that first we set a variable for $sandbox. For now, we’ll leave this to TRUE because we want to interact with PayPal’s sandbox (test) servers for development purposes. You’ll need to remember to change this to FALSE when you’re ready to move your project to a live server.
Then, based on the value of $sandbox we’re setting values to other variables for our API information. You’ll just want to fill in those placeholders with your own details accordingly. Now we’re ready to build our credit card processing script.

Step 3: Create an API Request

Now we can begin to build our process-credit-card.php page. The first thing we need to do here is include our config file.

// Include config file
require_once('includes/config.php');

Next, we need to build a name-value-pair string that includes all of the data we need to send PayPal in order to process this payment. A name-value-pair string looks just like something you might see when passing data via URL parameters. We just need to make sure our parameter names are in all caps.

PARAM1=value1&amp;PARAM2=value2&amp;PARAM3=value3…etc.

So, you might be thinking to yourself “How do I know what to use for my variable names in my string?” The good news is PayPal provides very good documentation on this. We can see all of the possible variables that we can pass PayPal including customer details, order item details, and credit card information. Some of this information is required in order to process a payment, but many of the variables available are optional. For demonstration purposes, we’ll keep this pretty simple and just pass the required information.
We’ll store all of our request parameters in an array so that we can loop through this array to easily generate our NVP string. All requests require the following parameters by default:

METHOD – The name of the API call you’re making.
USER – The API username
PWD – The API password
SIGNATURE – The API signature
VERSION – The API version

Then you can refer to the PayPal documentation for any API request you’d like to make to see what other parameters should be included. For the sake of this demonstration, our array will be built as follows.

// Store request params in an array
$request_params = array
     (
     'METHOD' => 'DoDirectPayment',
     'USER' => $api_username,
     'PWD' => $api_password,
     'SIGNATURE' => $api_signature,
     'VERSION' => $api_version,
     'PAYMENTACTION' => 'Sale',
     'IPADDRESS' => $_SERVER['REMOTE_ADDR'],
     'CREDITCARDTYPE' => 'MasterCard',
     'ACCT' => '5522340006063638',
     'EXPDATE' => '022013',
     'CVV2' => '456',
     'FIRSTNAME' => 'Tester',
     'LASTNAME' => 'Testerson',
     'STREET' => '707 W. Bay Drive',
     'CITY' => 'Largo',
     'STATE' => 'FL',
     'COUNTRYCODE' => 'US',
     'ZIP' => '33770',
     'AMT' => '100.00',
     'CURRENCYCODE' => 'USD',
     'DESC' => 'Testing Payments Pro'
     );

You’ll notice we’re using our config variables from config.php, and then I’m simply loading static data for the other values. In a standard project, though, you’ll most likely be populating these values with form data, session data, or some other form of dynamic data.
Now we can simply loop through this array to generate our NVP string.

// Loop through $request_params array to generate the NVP string.
$nvp_string = '';
foreach($request_params as $var=>$val)
{
 $nvp_string .= '&'.$var.'='.urlencode($val);
}

The value of $nvp_string is now:

METHOD=DoDirectPayment&amp;amp;USER=sandbo*****e.com&amp;amp;PWD=12***74&amp;amp;SIGNATURE=AiKZ******6W18v&amp;amp;VERSION=85.0&amp;amp;PAYMENTACTION=Sale&amp;amp;IPADDRESS=72.135.111.9&amp;amp;CREDITCARDTYPE=MasterCard&amp;amp;ACCT=5522340006063638&amp;amp;EXPDATE=022013&amp;amp;CVV2=456&amp;amp;FIRSTNAME=Tester&amp;amp;LASTNAME=Testerson&amp;amp;STREET=707+W.+Bay+Drive&amp;amp;CITY=Largo&amp;amp;STATE=FL&amp;amp;COUNTRYCODE=US&amp;amp;ZIP=33770&amp;amp;AMT=100.00&amp;amp;CURRENCYCODE=USD&amp;amp;DESC=Testing+Payments+Pro

This string is what we’ll send to PayPal for our request.

Step 4: Send the HTTP Request to PayPal

Now that our NVP string is ready to go we need to send this to the PayPal server to be processed accordingly. To do this, we’ll use PHP’s CURL methods.

// Send NVP string to PayPal and store response
$curl = curl_init();
  curl_setopt($curl, CURLOPT_VERBOSE, 1);
  curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
  curl_setopt($curl, CURLOPT_TIMEOUT, 30);
  curl_setopt($curl, CURLOPT_URL, $api_endpoint);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl, CURLOPT_POSTFIELDS, $nvp_string);

$result = curl_exec($curl);
curl_close($curl);

Here you can see that we’ve setup CURL with a few simple options and we’re using our $api_endpoint and $nvp_string variables accordingly.
This data will be sent over to PayPal and we will receive the API response back in our $result variable so that we can see the result and send the user to a successful or failure page based on whether or not the call succeeded or not.

Step 5: Parse the API Response

The value that we get back in $result from the previous step will be an NVP string just like the one we generated and sent to PayPal. When we run our current script we get a successful response back that looks like this:

TIMESTAMP=2012%2d04%2d16T07%3a59%3a36Z&amp;CORRELATIONID=9eb40cd84a7d3&amp;ACK=Success&amp;VERSION=85%2e0&amp;BUILD=2764190&amp;AMT=100%2e00&amp;CURRENCYCODE=USD&amp;AVSCODE=X&amp;CVV2MATCH=M&amp;TRANSACTIONID=160896645A8111040

One very simple way to parse this result is to use PHP’s parse_str() function. This will load all of the response data into PHP variables matching the names and values returned in the response. For example, if we do the following:

// Parse the API response
  $nvp_response_array = parse_str($result);

We would end up with access to the following PHP variables:

$TIMESTAMP
$CORRELATIONID
$ACK
$VERSION
$BUILD
$AMT
$CURRENCYCODE
$AVSCODE
$CVV2MATCH
$TRANSACTIONID

We can then proceed to use these variables to present information back to our customer, populate values in email receipts we’d like to generate, update database information, or anything else we need to do once an order is completed.
The $ACK value is what will tell us whether or not the API call was successful or not. Values for $ACK can be:

Success
SuccessWithWarning
Failure
FailureWithWarning

TIMESTAMP=2012%2d04%2d16T08%3a08%3a52Z&amp;CORRELATIONID=590d41dbb31e0&amp;ACK=Failure&amp;VERSION=85%2e0&amp;BUILD=2764190&amp;L_ERRORCODE0=10527&amp;L_SHORTMESSAGE0=Invalid%20Data&amp;L_LONGMESSAGE0=This%20transaction%20cannot%20be%20processed%2e%20Please%20enter%20a%20valid%20credit%20card%20number%20and%20type%2e&amp;L_SEVERITYCODE0=Error&amp;AMT=100%2e00&amp;CURRENCYCODE=USD

parse_str()

$TIMESTAMP
$CORRELATIONID
$ACK
$VERSION
$BUILD
$L_ERRORCODE0
$L_SHORTMESSAGE0
$L_LONGMESSAGE0
$L_SEVERITYCODE0
$AMT
$CURRENCYCODE

$ACK

Additional Data Parsing Option

// Function to convert NTP string to an array
function NVPToArray($NVPString)
{
 $proArray = array();
 while(strlen($NVPString))
 {
  // name
  $keypos= strpos($NVPString,'=');
  $keyval = substr($NVPString,0,$keypos);
  // value
  $valuepos = strpos($NVPString,'&') ? strpos($NVPString,'&'): strlen($NVPString);
  $valval = substr($NVPString,$keypos+1,$valuepos-$keypos-1);
  // decoding the respose
  $proArray[$keyval] = urldecode($valval);
  $NVPString = substr($NVPString,$valuepos+1,strlen($NVPString));
 }
 return $proArray;
}

Array
(
    [TIMESTAMP] => 2012-04-16T08:15:41Z
    [CORRELATIONID] => 9a652cbabfdd9
    [ACK] => Success
    [VERSION] => 85.0
    [BUILD] => 2764190
    [AMT] => 100.00
    [CURRENCYCODE] => USD
    [AVSCODE] => X
    [CVV2MATCH] => M
    [TRANSACTIONID] => 6VR832690S591564M
)

Array
(
    [TIMESTAMP] => 2012-04-16T08:18:46Z
    [CORRELATIONID] => 2db182b912a9
    [ACK] => Failure
    [VERSION] => 85.0
    [BUILD] => 2764190
    [L_ERRORCODE0] => 10527
    [L_SHORTMESSAGE0] => Invalid Data
    [L_LONGMESSAGE0] => This transaction cannot be processed. Please enter a valid credit card number and type.
    [L_SEVERITYCODE0] => Error
    [AMT] => 100.00
    [CURRENCYCODE] => USD
)

Conclusion

Responsive Web Design: Layouts and Media Queries

2012-04-26T23:04:00.001+08:00

With the growing number of Smartphone produced in the last three years and the diversity of screen sizes it’s practically impossible to ignore users that browse on a mobile device. Whether they use an Android phone, Windows Mobile phone, a BlackBerry device or an iPhone, whether they are on a tablet, on a Smartphone or on a big screen, each user deserves the best experience possible. As designers, it is our goal to provide those users a nice experience browsing the websites we created, whatever the device used to browse is.
Today most of the clients want their website to be mobile compatible, so this is particularly challenging. Creating a version for each device is impossible, due to the number and diversity of those devices, but also simply because we don’t know what will be created tomorrow. That’s where the concept of “Responsive Webdesign” comes to the rescue.

A responsive website is a website that will respond and adapt to the user’s behavior and screen size. The idea is to resize and reorder the design, adapt images, typography, columns, etc., based on screen - browser size, resolution and orientation instead of providing each device a specific website.

A Look at 3 Different Types of Layout

Basic Fluid Layout

Fluid layout is based on a system of relative units instead of absolute pixels. This kind of layout has been around for a while now, and most of the designers use fluid grids created in percentage to achieve such layouts.
The idea is pretty simple: instead of giving the layout rigid width in pixels, we will give it relative ones in percentage. The fluid layout based websites usually take the whole browser width, hence the 100% in this example.
You can see a demo of a fluid design here.

Data JavaScript credit: Andreas Bovens
The style.css gives us common styles for the page (color, typo), but let’s take a look at our fluid.CSS file :

#header {
    width: 100%;
    margin: 0;
    padding: 0;
}
#content {
    float: left;
    width: 60%;
    margin: 0 0 20px 0;
    padding: 0;
}
#content .inner {
    margin-right: 2%;
}
.sidebar{
    float: left;
    margin: 0 0 20px 1%;
    padding: 0;
}
#bar1{
    width:20%;
}
#bar2{
    width:18%;
}
#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
}

Our header and footer have a 100% width, so they’ll take the whole screen available. The main content has a 60%, and our sidebars 20% and 18% so that we will be able to create a design that will fit the whole space available.
This design adapts perfectly on big screens, but we can see that the sidebar content tend to become hard to read when we resize too small.

Adaptive Layout

The adaptive layout is based on a pretty simple idea: instead of using percentage we will give our layout fixe sizes, but we will adapt those sizes depending of the width of the browser/viewport, thus creating a layout with different “break points”.
For each of those break point, we will use media queries (will come back to explain them in detail in the second part of the article) to adapt the layout of our website so that content is not too hard to read.
You can see and example of adaptive layout here.

The HTML and style.css did not change; all we changed was the structure of the page. Let’s take a closer look at our CSS file.
The "normal" website uses this CSS:

body{
    width:1280px;
    margin:0 auto;
}
#header {
    width: 100%;
    margin: 0;
    padding: 0;
}
#content {
    float: left;
    width: 800px;
    margin: 0 0 20px 0;
    padding: 0;
}
#content .bloc{
    margin-right: 10px;
}
.sidebar{
    float: left;
    margin: 0 0 20px 20px;
    padding: 0;
    width:220px;
}
#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
}

I gave the header and footer a 100% width, but the content has a fixed width. Now the good part, the break points with media queries:

/* Media queries */
@media screen and (max-width: 1200px) {
    body{
    width:1000px;
    margin:0 auto;
    }
    #content {
    width: 700px;
    }
    .sidebar{
    width:280px;
    }
}

@media screen and (max-width: 980px) {
body{
    width:850px;
    margin:0 auto;
    }
    #content {
    width: 550px;
    }
    .sidebar{
    width:280px;
    }
}

@media screen and (max-width: 750px) {
    body{
    width:600px;
    margin:0 auto;
    }
    #content {
    width: 400px;
    }
    .sidebar{
    width:190px;
    margin: 0 0 20px 10px;
    }
}

@media screen and (max-width: 540px) {
    body{
    width:450px;
    margin:0 auto;
    }
    #content {
    width: 450px;
    }
    #content .bloc{
    margin:0px;
    }
    .sidebar{
    width:450px;
    margin: 0 0 10px 0;
    }
}

@media screen and (max-width: 380px) {
    body{
    width:360px;
    margin:0 auto;
    }
    #content {
    width: 360px;
    }
    #content .bloc {
    margin:0px;
    }
    .sidebar{
    width:360px;
    margin: 0 0 10px 0;
    }
}

For each break point given by a media query, I changed the size of the body, the content, and the sidebar. Under 540px, the text in the sidebar was too hard to read, so I gave the sidebar the same size as the content, what has the effect of putting the sidebars under the content.
This nice thing about adaptive layout is the possibility to modify and adapt not only the size of the blocs, but the layout and there place on the page.
The big difficulty is then to choose those break points. A first technique could be to base the break points on most "common" device width. Chris Coyier from CSStricks put a nice list of media queries together. Another way to choose the break points it to actually test the design at different screen sizes and see when it gets ugly or when user can’t really read the text easily, and put break point at those size.
Live example of adaptive layout :
Foodsense

Responsive Layout

We could define the responsive layout, as a mix between the fluid and adaptive layouts. It will use the relative units of the fluid layout and the break points of the adaptive one.
Here you can see the demo of our previous example, in responsive layout.

You can see here how fluid the design is: using percentage enables us to create very smooth transition between the different break points of our design.
Here is our stylesheet for the "normal" version:

#page{
    max-width:1280px;
}
#header {
    width: 100%;
    margin: 0;
    padding: 0;
}
#content {
    float: left;
    width: 60%;
    margin: 0 0 20px 0;
    padding: 0;
}
#content .bloc {
    margin-right: 2%;
}
.sidebar{
    float: left;
    margin: 0 0 20px 1%;
    padding: 0;
}
#bar1{
    width:20%;
}
#bar2{
    width:18%;
}
#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
}

What’s important here is the use of max-width (instead of width for an adaptive layout). It’s this property that enables us to create this smooth transition. Using a max-width, we won’t have to use as many break points as for an adaptive layout, and all the other sizes will be given in a relative unit (percentage for our example).
And the CSS for the media queries:

/* The media queries*/
@media screen and (max-width: 1000px) {
    #bar1,
    #bar2{
    width:39%;
    }
    .sidebar{
    float: left;
    margin: 0 0 20px 1%;
    padding: 0;
    }
}

@media screen and (max-width: 540px) {
    #bar1,
    #bar2{
    clear:both;
    width:100%;
    }
    .sidebar{
    float: left;
    margin: 0 0 20px 1%;
    padding: 0;
    }
    #content {
    clear:both;
    width:100%;
    }
    #content .bloc {
    margin:0;
    }
}

All the other size will be once again given in percentage, relative to the max-width of our body.
Note that for screen size under 540px, we once again gave the sidebars and the content a 100% width, and place the sidebars under the content using some clear: both.
The advantage of the responsive layout is that you won’t have to use too many break points. Since the size are given in percentage, they will adapt automatically, so the major role of the break points will be to be place where design breaks, to re-order our layout (putting sidebars under content in our example) and give the user a more pleasant reading.
Fore Fathers Group

Media Queries: Create and Define Break Points

Media queries where introduced in the CSS3 specifications. Put in a simple way, media queries enables the web designer to create conditionals stylesheets based on width, height, but also orientation, color, etc. There’s a huge list of media queries available on the official w3c website but we will only use some of them in our case. Here is a list of the most commonly used media queries and what they do :

Media Query Utilisation

Media Query	Use
min-width: … px	Used when the viewport’s width is bigger or equal to width
max-width: … px	Used when the viewport’s width is smaller or equal to width
min-device-width: … px	Used when the device’s width is bigger or equal to width
max-device-width: … px	Used when the device’s width is smaller or equal to width
orientation : portrait // orientation: landscape	Target orientation
-webkit-min-device-pixel-ratio : 1.5	Used to target high density device on android and ios

As for print style sheets, media queries can be used as external or internal styles sheets. An external style sheet is easier to organize, it is not downloaded by browsers which don’t support it, but it uses extra http request. An internal style sheet on the other hand does not require extra http request, but the whole stylesheet is downloaded for browsers even if they do not support media queries, and it can be harder to organize. Both have then pro and cons, you’ll have.
You already saw the internal syntax in the example above:

body {
    background: gray;
}
@media all and (max-width:500px) {
body {
        background: blue;
    }
}

And here is the external syntaxes:

<link rel="stylesheet" type="text/CSS"  media="screen and (max-device-width: 480px) " href="mobile.CSS" />

Some "tricks" Worth Knowing About Media Queries

Cascade Matters

Yeah that’s right, as for any peace of CSS code, cascade matters.
Consider the following example:

#container{
background:rgba(111, 78, 152, 0.9); /*violet */
color:rgb(1, 1, 1);

@media all and (min-width:500px) {
    #container{
    background: rgba(255, 0, 0, 0.9); /* red */
    color: white;
    }
}
@media all and (min-width:700px) {
   #container{
    background: rgba(0, 0, 255,0.9); /*blue */
    font-family: serif;
    }
}

See the example on jsfiddle.
If the width of our browser is bigger than 500px, the color of the text gets white, and the background red. If we enlarge the screen up to more than 700px, the background gets blue, but the color of the text stays white because it inherited the color of the min-width:500px media query applied before (700 being, well, bigger than 500).

Creating Stacked Media Queries

Consider the following example :

#container{
    background:rgba(111, 78, 152, 0.9); /*violet */
    padding:10px 5px;
    color:rgb(1, 1, 1);
}

@media all and (min-width:500px) and (max-width:699px) {
   #container{
   background: rgba(255, 0, 0, 0.9); /* rouge */
   font-family: serif;
   }
}
@media all and (min-width:700px) {
   #container{
   background: rgba(0, 0, 255,0.9); /*bleu */
   color: white;
   font-family: serif;
   }
}

See the example on jsfiddle.
The first media query will only be applied for screen between 500px and 699px, and the second for screen bigger than 700px. In the case of stacked media queries, since property is only applied for a certain width, they are not herited. In our example, if we also want to apply a serif font the layout bigger than 700px, we will have to repeat this property.
You’ll need a viewport meta tag to make the media queries work. The viewport meta tag enables you to take control of the viewport of the device. Basically, if no viewport is set, mobile device will try to fit the whole page on the screen, resulting in very small websites.
The viewport meta tag looks like this:

<meta name="viewport"  content="initial-scale=1, width=device-width">

We basically tell the device, that we will be using the device width as the width of our page, and that there will be no zooming on the page when we first launch it.

It’s Not Only About the Mobile!

In my examples, I showed some media queries used for mobile optimization, tablets and smaller screens. But I wanted as a conclusion, to emphasize the fact that media queries are not only about mobile optimization. We tend to see more and more mobile device, but also more and bigger screens.
We know have an xbox that can connect to internet, some of the box our internet providers provide us are equipped with a browser, and even some television are able to connect to internet. Maybe tomorrow you will get a web browser on your fridge, who knows. If we use responsive webdesign to optimize for smaller screens, we can also use them to optimize for bigger ones.
Let's remember: responsive webdesign is about adapting layout to the user's browser size, orientation, whatever that size might be!

Some Useful Resources:

Media queries for browser which don’t support them: Github Respond
Mobile hardboiler template : HTML5boilerplate Mobile
Testing responsive design: Responsive Design Tester and Responsivepx

Conclusion

As you can see, responsive webdesign is not that hard to use and enables web designers to create nice layouts that will adapt to many devices and screen sizes. Your now it’s your turn: did you ever used responsive design? In what kind of projects? Do you have some advice and special tips? How do you define your break points? Let us know in the comments.

15 Stunning jQuery Lightbox Plug-ins for Your Upcoming Designs

2012-04-01T09:28:00.001+08:00

If you see a website built on jQuery using images, they must have played with a lightbox in that context. That’s the power of the lightbox, it can transform any simple image library into an attractive and effective gallery. It’s an important and popular contribution from the jQuery side to the design community.
Thanks to the awesome jQuery community who make these stunning lightbox plug-ins, giving huge scope for designers to showcase images on websites. There is a huge collection of plug-ins each giving a different look and style to images.
We collected 15 stunning jQuery lightbox plug-ins for your reference. Hope you’ll find it worth having a look.

Stunning jQuery Lightbox Plug-ins

Lightview jQuery Plug-in

Lightview was built to change the way you overlay content on a website.

TopUp

TopUp is an easy to use JavaScript library for unobtrusively displaying images and Web pages in a Web 2.0 approach of pop-up. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.

Highslide Lightbox Plug-in

Highslide JS is an image, media and gallery viewer written in JavaScript.

Color Box

A lightweight customizable lightbox plug-in for jQuery 1.3+

Lightbox 2

Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to set up and works on all modern browsers.

prettyPhoto

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also supports videos, flash, YouTube, frames and Ajax. It’s a full blown media lightbox.

Slimbox 2

Slimbox 2 is a 4 KB visual clone of the popular Light box 2 script by Lokesh Dhaka, written using the jQuery JavaScript library.

Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable.

Pirobox Extended V.1.0.

One of the most important things with this plug-in is the ability to open any kind of file, from inline content to .swf files, from simple images to .pdf files.
Other things are: automatic image resizing and drag and drop.

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

jQuery Super Box

jQuery Super box! Is a script which allows you to display windows with the lightbox effect.
This script is a plug-in for jQuery (1.3.x).

Fancy Box

Fancy Box is a tool for displaying images, HTML content and multimedia in a Mac-style "light box" that floats overtop of web page.

Pirobox Extended V.1.1.

Pirobox Extended V.1.1 advanced version, Zoom In option with dragable image viewer for large dimension images.

jQuery Lightbox Plug-in

JQuery lightbox plug-in is simple, elegant, and unobtrusive, no need for extra markup, and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

Ceebox

An overlay pop-up script for easily embedding flash video, displaying images, or showing HTML (either external sites via iframe or content on your own site via AJAX).

Conclusion

Do you use any of these lightboxes in your website design work? Do you have a favorite lightbox plug-in? If you do and we haven't listed it here, please share the link with us in the comments below. Your comments and opinions are always very welcome.

Written by: Carol Francis for Onextrapixel - Web Design & Development Online Magazine | One comment

WordPress Multisite Beyond Basics: Essentials and Domain Mapping

2012-02-29T09:36:00.001+08:00

"Today we will be discussing a few very important aspects of WordPress Multisite. If you are new to WordPress Multisite please go through the WordPress installation tutorial first to get an overall idea of the Multisite feature in WordPress. In this tutorial I shall be discussing a few key things essential for WordPress Multisite installation, along with some common troubleshooting tips. Finally I shall discuss WordPress Multisite Domain Mapping in detail.

Key Things to Know About WordPress Multisite Installation

Installing WordPress Multisite Using Plugin

You can install WordPress Multisite using two methods. One is using the plugin Enable Multi-Site and another is manual installation. It’s recommended to use manual installation since the installation changes will then be transparent and can be easily altered later.

Changing From Sub-Directory to Sub-Domain

In case you want to change your installation type from sub-directory to sub-domain, please use the following steps:

You need to delete all the sites which were created under your main site
Enable the sub-domain option from the wp-config.php file by modifying the following code:
```
define( 'SUBDOMAIN_INSTALL', true );
```
Finally update your Permalinks

Since you will need to delete all your sites it’s recommended to make the decision carefully while choosing between sub-domain and sub-directory during installation.

Keeping a Default Theme for All Your New Sites

If you want to keep a default theme for all your newly created sites then please go to your wp-config.php file and add the following line of code below the specified line:

// Below this line
 define('WPLANG', '');
 // Add this line
 define('WP_DEFAULT_THEME', 'classic');

Replace ‘classic’ with the folder name of the theme you like.

Add Yourself to All Your Sites

The different sites created will only be visible under My Sites if you have been added as a user for that site. If you are a Network Admin then please add yourself as a regular user for all your created sites so that you can manage them straight from your dashboard.

Let Users Define Custom CSS

Generally the users are not able to edit the themes for their sites but once you (as a Network Administrator) install and activate the Custom User CSS plugin then the site owners can design their themes by defining custom CSS.

Common WordPress Multisite Troubleshooting

Created Sub-Domains Not Working

Your hosting platform should support the Wildcard DNS feature. Please check with your hosting provider prior to installing WordPress Multisite.
To create a Wildcard DNS entry please login to your Control Panel provided by your host and look for the Domain section. Under Domain click on the Subdomain option. This is the place to enable sub-domains for your website.
Once you click on the Subdomain option in the control panel, under Create a Subdomain enter an asterisk ‘*’ in the Subdomain field and then click on Create. The Document Root should point to the root directory of your WordPress installation.

Created Sub-Directories Not Working

The Apache mod_rewrite module should be supported by your hosting provider. This is required in the creation of multiple sites. If you are using WAMP you can enable it by going to Apache > Apache modules > mod_rewrite.

Network Cannot Be Enabled Error

This error occurs if the Site URL is not the same as the WordPress URL, so under WordPress’ Admin Dashboard Settings > General please ensure that they are the same prior to installing Multisite.

Wildcard Sub-Domain Incorrect Error

In order to solve this problem please go to your hosting provider’s control panel where you have defined the wildcard DNS and then update the Document Root of your sub-domain to point to the correct location.

My Uploaded Media Not Working

All the uploaded media including images are located under your created blogs.dir folder. Please check your .htaccess file if the following line of code is in the same format or not. Also ensure that mod_rewrite is enabled for your server.

# uploaded files
 RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]

If you find any other issue with WordPress Multisite please feel free to refer to the Official Multisite Support Forum, it contains hundreds of solutions for your common Multisite problems.

Domain Mapping

One of the coolest parts of WordPress Multisite installation is the mapping of domains to turn your network sites into unique domains that carry their own identities. Using Domain Mapping lets you define a custom domain for your blog/site instead of the default address you get when you sign up or create a new site. For example, using a sub-domain install, if you create a new site you will have the URL newsite.parentsite.com. But using Domain Mapping you can turn it into www.newsite.com. Thus Domain Mapping can be used to point external domains to your network sites.

Domain Mapping hides the fact that the site is a part of a Multisite network.

Let’s discuss Domain Mapping in detail.

Step 1 A Little Bit of Your Host cPanel

Before going for the Domain Mapping let’s do a bit of backend work from our cPanel. Please login to your host’s cPanel. Generally the URL of your cPanel will look something like http://www.hostname.com/cpanel or http://www.hostname.com:2082 . Once you log in, you will find two options under the Domains section named Addon Domains and Parked Domains.

Here we will be using the Parked Domains option since we have our WordPress installation in the root directory. The Addon Domain option can be used if you are utilizing WordPress outside the root directory. Under Parked Domains enter the name of the new domain you want to park on your primary domain and then click on Add Domain. The parked domain should automatically point to the root directory of your installation which is generally public_html.

The new domain name should be registered prior to parking.

If you are using the Addon Domains option then you are probably not using your Primary Domain for mapping purposes. After clicking the Addon Domains option fill in all the required details in the window and click on Add Domain.

Step 2 The DNS Settings

After your new domain has been parked, you need to be sure that the DNS Settings are properly configured for your domain. For this you should have your DNS / Name Server information. This can usually be found in the Account Information section of your host’s cPanel. Once you have that info you need to login to your registrar’s website where the domain was registered. Here we have used Go Daddy for registration. Once you login, under My Account > Domain select the required domain name to open the domain editor and then click on Set Nameservers option under the Nameserver section.

Here you can use either of the four options to set up your Name Server.

I want to park my domains: This option will park your domain on GoDaddy’s parked servers.
I want to forward my domains: This option will forward your domain to another URL.
I have a hosting account with these domains: This option is used if the domain is hosted with GoDaddy.
I have specific nameservers for my domains: This option is used if your domain is hosted by another company. Here you need to enter the Name Servers provided by your hosting company. We will be using this option for this tutorial.

Once done click on the OK button.

If the nameserver info is changed it may take some time to propagate.

Although I have used GoDaddy and Host Gator in this tutorial, these options are very similar to any other vendor’s interface.

Step 3 WordPress MU Domain Mapping Plugin Installation

Now you need to manually install the WordPress MU Domain Mapping plugin in order to activate your domain mapping. Please download the plugin and extract the files. Copy all files (except the sunrise.php file) to your wp-content > plugins folder. Then copy the sunrise.php file to your wp-content folder.
Open your wp-config.php file and enter the following line of code under the code where you have enabled your multisite feature.

define('WP_DEBUG', false);
define('WP_ALLOW_MULTISITE', true);

define('SUNRISE', 'on'); // Add this line here:

define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', false );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'localhost' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

/* That's all, stop editing! Happy blogging. */

Save the changes.
After that you will be able to see the Domain Mapping option under the Settings menu of your Network Admin dashboard.

Step 4 Mapping The External Domain to One Of Your Child Sites

Now you are ready to map the external domain to one of your child sites. For this please click on the Settings > Domain Mapping option of your Network Admin Dashboard.
Under Server IP Address put the IP address of your web server. You may contact your host for this address or visit this site to find your site’s IP address.

Finally click on Save.
Next go to the Dashboard of one of your child sites for which you want to map the domain.

Then under Tools > Domain Mapping add the external domain which we have registered. Check the Primary Domain For this Blog checkbox to make it a primary domain for this site. Finally click on Add.

If your domain name includes a hostname like "www", "blog" or some other prefix before the actual domain name you will need to add a CNAME record for that hostname in your DNS pointing at this blog URL. For this please log in to your host cPanel and click on Advanced DNS Zone Editor under the Domains section and set up your CNAME record.

That’s it you have successfully mapped an external domain to your site. To verify please check the URL by visiting your child site.

Step 5 Final Steps

If you don’t want to utilize the original sub-domain URL of your child site any more, you may remove all the traces of the URL from the Network Admin Dashboard. For this go to Sites > All Sites and Edit the Site which you have mapped. In each of the tabs search for the old URL and replace it with the new URL.

In order to redirect users who type the old URL, please log into your cPanel and click on Redirects under the Domain section. Here you need to select the Type, the URL to be redirected and the URL to which it will be redirected. Finally click on Add.

That’s it for now, in my next tutorial I shall be explaining the WordPress Multisite Database in detail using phpMyAdmin and some really cool functions to be used in WordPress Multisite. Thanks a lot for reading."

How to Include JavaScript and CSS in Your WordPress Themes and Plugins

2012-02-29T09:22:00.001+08:00

"Knowing the proper way to include JavaScript and CSS files in your WordPress themes and plugins is very important for designers and developers. If you don’t adhere to best practices, you run the risk of conflicting with other themes and plugins, and potentially creating problems that could have been easily avoided. This article is intended as a reference for playing nicely with others.

Best Practices Make Everyone Happy

If you’ve ever developed a theme or plugin for WordPress, or worked with one that someone else has created, you’ve probably come across several different methods for including JavaScript and CSS. While there are several methods that may appear to work in a specific set of circumstances, there is one primary method recommended in the WordPress Codex. This preferred way will ensure your theme or plugin works in all cases, assuming others also code the correct way.
There’s also some misunderstanding about what exactly the Codex says about this, which I will help clarify.

What’s in the Box?

When you download WordPress, a selection of common JavaScript libraries are already included that you can use for your JavaScript development. A list of included libraries can be found in the WordPress Codex wp_enqueue_script article.
All those libraries are included, but by default WordPress only loads the ones it needs to, and only when it needs them in the admin. If you write JavaScript that utilises one of these libraries, you need to tell WordPress that your script needs the library loaded first.

Telling WordPress About Your Script and What It Needs

Some of the things to think about when you’re coding JavaScript for WordPress are:

Is there an included library I can use?
Can I use the version that’s included?
Do I need to load my script in the front-end and in the admin?
Which front-end and admin pages do I need to load my script on?

Answering these questions helps you know what you need to do to register and load your script. This is done using a WordPress function called wp_register_script, and here is its usage according to the WordPress Codex:

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

So what are these variables and do we need them every time? (This is covered on the Codex page, so I’ll be brief and use plain English)

$handle – what you’ll use to refer to this particular script wherever you might need to enqueue it, and you have to include this variable at the very least
$src – the path to the source file within your plugin or theme
$deps – an array containing the $handle for any other scripts your script needs to run (i.e. a dependency)
$ver – the version number for your script, which can be used for cache-busting. By default, WordPress will use its own version number as the version number for your script
$in_footer – do you want your script to load in the footer? Set this to true or false. It is false by default, so it loads in the header where wp_head() is, and if you specify true it will load where wp_footer() appears in the theme

What Is “Cache-Busting”?

Browsers remember what scripts and stylesheets they’ve downloaded for a particular site based on the URL of the script and stylesheet. If you change the URL, even just by adding a querystring, the browser assumes it’s a new file and downloads it.

Ok, So Let’s Try Some Examples

Here is the most basic example for loading a custom script:

function wptuts_scripts_basic()
{
 // Register the script like this for a plugin:
 wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
 // or
 // Register the script like this for a theme:
 wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );

 // For either a plugin or a theme, you can then enqueue the script:
 wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_basic' );

First, we register the script, so WordPress knows what we’re talking about. The way to find the path for our JavaScript file is different whether we’re coding a plugin or a theme, so I’ve included examples of both above. Then we queue it up to be added into the HTML for the page when it’s generated, by default in the <head> where the wp_head() is in the theme.
The output we get from that basic example is:

<script type="text/javascript" src="http://yourdomain.com/wp-content/plugins/yourplugin/js/custom-script.js?ver=3.3.1"></script>

Now if your script relies on one of the libraries included with WordPress, like jQuery, you can make a very simple change to the code:

function wptuts_scripts_with_jquery()
{
 // Register the script like this for a plugin:
 wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ), array( 'jquery' ) );
 // or
 // Register the script like this for a theme:
 wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ) );

 // For either a plugin or a theme, you can then enqueue the script:
 wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_jquery' );

Note: By default, jQuery is loaded with noConflict to prevent clashes with other libraries (such as Prototype). See the noConflict section of the Codex if you don’t know how to deal with that.
See what I did there? You just add an array with the ‘jquery’ handle as a dependency. It uses an array here, because your script could have multiple dependencies. If your script uses jQuery and jQuery UI, you’d add jQuery UI to your dependency array, like array( 'jquery', 'jquery-ui-core' )
So now the output has changed, and we can see that jQuery has also been added into the <head> of the page:

<script type='text/javascript' src='http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://yourdomain.com/wp-content/plugins/yourplugin/js/custom-script.js?ver=3.3.1'></script>

Let’s try an example with all the bells and whistles:

function wptuts_scripts_with_the_lot()
{
 // Register the script like this for a plugin:
 wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-core' ), '20120208', true );
 // or
 // Register the script like this for a theme:
 wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery', 'jquery-ui-core' ), '20120208', true );

 // For either a plugin or a theme, you can then enqueue the script:
 wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_the_lot' );

Ok, so I’ve now added a version and specified that this script needs to be loaded in the footer. For the version number, I’ve chosen to use today’s date because it’s easy to keep track of, but you can use any version numbering you like. The output for this one is slightly different too, jQuery is output in the <head> and our script along with jQuery UI is output just before </body>, like this:

<head>
...
<script type='text/javascript' src='http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
...
</head>
<body>
...
<script type='text/javascript' src='http://yourdomain.com/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.8.16'></script>
<script type='text/javascript' src='http://yourdomain.com/wp-content/plugins/yourplugin/js/custom-script.js?ver=20120208'></script>
</body>

Getting Your Priorities Straight

Some people may prefer not to use the proper enqueuing methods because they feel they have less control over the order in which scripts are loaded. For example, in a theme that uses modernizr, the theme author might want to make sure modernizr is loaded early on.
Something I haven’t mentioned earlier is more detail on how the add_action function works, as this is where we can exercise a little influence over the order of things. Here’s the usage of the function according to the WordPress Codex page:

add_action( $tag, $function_to_add, $priority, $accepted_args );

Note that often, and up until now in this article, only the $tag and $function_to_add parameters are used. The $priority parameter defaults to 10, and the $accepted_args parameter defaults to 1. If we want our scripts or styles to be enqueued earlier, we simply lower the value for $priority from the default. For example:

function wptuts_scripts_important()
{
 // Register the script like this for a plugin:
 wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
 // or
 // Register the script like this for a theme:
 wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );

 // For either a plugin or a theme, you can then enqueue the script:
 wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_important', 5 );

The output will be the same as we’ve seen previously, but it will occur earlier in the HTML document.

Overriding Default Libraries and Using Content Delivery Networks

There may be times when you want to use a different version of a library that’s included with WordPress. Perhaps you want to use a cutting-edge version or you don’t want to wait for the next release of WordPress before using the latest stable version of jQuery. Another reason might be that you want to take advantage of Google’s CDN version of a library.
It’s important to note that this should only be done on plugins or themes used on sites that you will be personally maintaining. Any plugins or themes that you release for public use should use the libraries included with WordPress.
“Why?!”, I hear you ask. For the simple reason that you don’t control those sites. You don’t know what other plugins and themes might be used there, and you don’t know how often they will update your plugin or theme. Using the libraries packaged with WordPress is the safest option.
Having said that, if you are wanting to do this on a site you control, here’s how it’s done:

function wptuts_scripts_load_cdn()
{
 // Deregister the included library
 wp_deregister_script( 'jquery' );

 // Register the library again from Google's CDN
 wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false );

 // Register the script like this for a plugin:
 wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ), array( 'jquery' ) );
 // or
 // Register the script like this for a theme:
 wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ) );

 // For either a plugin or a theme, you can then enqueue the script:
 wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

So first of all, I deregister the included version of the library, otherwise conflicts between different versions could be introduced. Then register the alternate version, using the same handle, and I’ve chosen to specify null as the version (it’s already in the URL!) and specified not in the footer. The rest of our code is the same, because we were depending on whatever script used the ‘jquery’ handle. The output we get now looks like:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='http://yourdomain.com/wp-content/plugins/yourplugin/js/custom-script.js?ver=3.3.1'></script>

Note: One of the reasons this is a bad idea to do in a plugin or theme for public release, is that all other plugins and themes used on this site will now have to use this version of jQuery. Also, the newly registered version of jQuery doesn’t have noConflict set, so if any other plugin or theme scripts use Prototype for example, this will break things.

Don’t Be Greedy

So far we haven’t mentioned anything about how to do all this in the admin, only on the front-end. The primary difference is what action to use. Instead of add_action( 'wp_enqueue_scripts', 'wptuts_scripts_basic' ); which we use for the front-end, the action for the admin is add_action( 'admin_enqueue_scripts', 'wptuts_scripts_basic' );
Something that’s important to do for both the front-end and admin is be selective about which pages you load your scripts on. If your plugin or theme has a script that only does something on one front-end or admin page, such as the theme’s options page, or maybe a page with a specific widget, you only need to load your script on that page. No point clogging things up and loading scripts on pages where they’re not being used!
There’s a great example in the WordPress Codex on how to load scripts only on plugin pages. Because plugins and themes can vary a lot in how they’re written, I won’t go into specifics here on how to be choosy about which pages you load scripts on, but it was important to mention so you’re aware of it when you’re coding.

That’s Scripts, Now Styles

The process for styles is almost exactly the same as the process for scripts. It is done using a WordPress function called wp_register_style, and here is its usage according to the WordPress Codex:

wp_register_style( $handle, $src, $deps, $ver, $media );

Note that the only difference there between wp_register_script and wp_register_style is that instead of an $in_footer parameter, we have a $media parameter. This parameter can be set to any of the following: 'all', 'screen', 'handheld', and 'print', or any other W3C recognised media type.
So an example of how you might enqueue a style would be:

function wptuts_styles_with_the_lot()
{
 // Register the style like this for a plugin:
 wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
 // or
 // Register the style like this for a theme:
 wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), '20120208', 'all' );

 // For either a plugin or a theme, you can then enqueue the style:
 wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );

This is a fairly comprehensive example, utilising most of the parameters, and the output it produces looks like:

<link rel='stylesheet' id='custom-style-css'  href='http://yourdomain.com/wp-content/plugins/yourplugin/css/custom-style.css?ver=20120208' type='text/css' media='all' />

So, Why Doesn’t Everyone Already Do Things This Way?

Good question, and the other question I guess you might ask is, “What makes you think this is the ‘right’ way and not just your preference?”. Essentially the answer is that this is the approach recommended by WordPress. It ensures that any combination of plugins and themes should be able to work together happily and without doubling up.
I’ve seen a few themes and frameworks around the place that use <script></script> and <link /> tags in their header.php, and even footer.php, files to load the scripts and styles for the theme itself. There’s really no reason to do things this way. As I’ve demonstrated above, it’s perfectly possible to prioritise scripts and styles and nominate whether they load in the header or footer from the comfort and safety of your functions.php. The benefit being that your theme / framework will work with a wider range of other plugins / child themes.
One example was loading jQuery using the <script></script> tags, which might appear to work nicely, but this can actually cause jQuery to be loaded twice! Loading jQuery in this way will not stop WordPress from loading its version of jQuery for other plugins, as WordPress’ version is in noConflict mode by default, and a plugin may specify it as a dependancy. So now you’ll have jQuery working for both noConflict mode and $, and also probably break any plugin that uses the Prototype library.

Conclusion

WordPress is a fantastic system, and it has been developed with a lot of thought. If there’s a mechanism made available to do something, it’s often a good idea to use it. When developing your plugins and themes, try to remember to code thoughtfully and for playing nicely with others.
What do you think about the use of wp_enqueue_script and its associated functions and actions? Do you know of any examples where it’s being done incorrectly? Do you know of any reason not to follow the advice above?"

Quick Tip: Add Extra Contact Methods to User Profiles

2012-02-29T09:10:00.001+08:00

"If you Google “add extra fields to WordPress user profile” you’ll find all sorts of involved coding examples for adding extra inputs to the user profile page so you can capture additional user information. But if all you want to do is expand the default contact methods section then there’s a much simpler way to go.

The user_contactmethods Filter

The user_contactmethods filter allows you to set and unset the contact info fields on the user profile page. The great thing about using this method is that WordPress looks after the creation and updating of the fields.
Let’s add fields for Twitter and Facebook info. Put this in your functions.php file:

add_filter('user_contactmethods', 'my_user_contactmethods');

function my_user_contactmethods($user_contactmethods){

 $user_contactmethods['twitter'] = 'Twitter Username';
 $user_contactmethods['facebook'] = 'Facebook Username';

 return $user_contactmethods;
}

Here is what you’ll get:

If you want to remove some fields, just unset them from the array:

function my_user_contactmethods($user_contactmethods){

 unset($user_contactmethods['yim']);
 unset($user_contactmethods['aim']);
 unset($user_contactmethods['jabber']);

 $user_contactmethods['twitter'] = 'Twitter Username';
 $user_contactmethods['facebook'] = 'Facebook Username';

 return $user_contactmethods;
}

To display the user’s info, simply use the get_user_meta function.

echo get_user_meta(1, 'twitter', true);

This will show the Twitter username for the user with an ID of 1. The true argument causes the data to be returned as a single value as opposed to an array.
That’s all there is to it!"

Secure Your WordPress Against User-Agents and Bots

2012-02-29T09:07:00.001+08:00

"Lately there have been a lot of WordPress sites compromised only due to the bots that roam the world wide web! There are a lot of plugins out there which can protect your WordPress baby by blocking these “roguish” bots!
In this article you will be learning an easy and useful method of adeptly configuring your .htaccess file to filter these bots which can infect your website and can eat up your server resources. So get your .htaccess file ready for editing!

Step 1 Preparing the Code

The code mainly consists of bot names. I have added the most famous bots in here that I can think of. If there is some bot missing, please mention it in the comments.
The code is pretty straightforward. Go ahead and copy the code below and paste it in your .htaccess file.

# Bot Blocker
<IfModule mod_setenvif.c>
 SetEnvIfNoCase User-Agent ^$ keep_out
 SetEnvIfNoCase User-Agent (pycurl|casper|cmsworldmap|diavol|dotbot) keep_out
 SetEnvIfNoCase User-Agent (flicky|ia_archiver|jakarta|kmccrew) keep_out
 SetEnvIfNoCase User-Agent (purebot|comodo|feedfinder|planetwork) keep_out
 <Limit GET POST PUT>
   Order Allow,Deny
   Allow from all
   Deny from env=keep_out
 </Limit>
</IfModule>

Step 2 Testing the Code

To see whether the code is doing its job, I using recommend this website Bots VS Browsers. This website is a good place to simulate these types of attacks. Once on their website all you have to do is select any bot from the code, which you just added to your .htaccess file, and use that as the user agent. Enter the URL of your site and hit enter. If you see a “403 Error” this means that the code is doing its job. If not the code must’ve gotten messed up while being copied into your .htaccess file, so try again.

Step 3 Adding More Bots

Now you are familiar with the code and how to test it, we can add more bots to the code. You must have noticed the repetition in the code, and by using the same logic, you can add a dozen more bots to be blocked by setting the same parameters. Cool huh!

SetEnvIfNoCase User-Agent (i-IS-evilBOT) keep_out

As you can see in the code above, now I am blocking the “i-IS-evilBOT” (which I just made up). Other than that the name of the bot is not case sensitive and you can add it as per your liking. Go to the Bots VS Browsers page and this time enter the user agent which I just created, and voila, you’ll see that this user agent which was added to my .htaccess file is also blocked! You can add as many bots as you want to be blocked separated with a pipe character “|”

Conclusion

I said in the beginning that there are many plugins which can do the same thing and you can avoid this editing. But by manually editing the .htaccess file you can effectively block bad user-agents and bots with better efficiency and better site performance!"

Using the Envato API with WordPress

2012-02-29T08:58:00.001+08:00

"Today we are going to discuss how to use the Envato API in WordPress and create a WordPress shortcode that promotes our Envato Marketplace Items inside our WordPress site. We will combine the powerful Envato API, WordPress’ flexibility and a little bit of creativity, to build an amazing plugin for our site.

Let’s Set Our Goal

In this tutorial we are going to focus on:

Some basic knowledge about the Envato API
How to use API result data inside WordPress
Build a WordPress Shortcode that promotes Envato Marketplace items in our WordPress site.

So let’s get into the first one!

Step 1: Understanding the Envato API

Envato provides an API that allows developers to get some information about Envato Marketplace items, users info, popular projects and so on. All possible queries are listed in the official documentation. In this article we discuss the public API only.
The Envato Public API has the following structure.

http://marketplace.envato.com/api/edge/set.json

The word set must to be replaced with an option listed in the set column of the API documentation. So if we want all information about a marketplace item we have to replace set with item:the_item_id. The final request URL will be:

http://marketplace.envato.com/api/edge/item:1263846.json

You can try to insert the URL above in your web browser and see the returned data.
We can also concatenate more than one set option in a single request to get more data. For example we want the item data and its author information. So the previous URL will become:

http://marketplace.envato.com/api/edge/item:1263846+user:evoG.json

The Envato API returns JSON, so in the next paragraph we are going to show how to manage it in WordPress.

Step 2: How to Use API Results in WordPress

In this tutorial we are not going to discuss how to create a WordPress plugin, but we are going to focus on some techniques to use the API in WordPress:

Send the API request
Manage the result data (the JSON string)

The function below fetches the data from the Envato server and returns a PHP array that contains all the informations we want.

/**
* @param String $item_id - The ID of an Envato Marketplace item
* @returns Array - The item informations
*/
function WPTP_get_item_info( $item_id ) {

 /* Set the API URL, %s will be replaced with the item ID  */
 $api_url = "http://marketplace.envato.com/api/edge/item:%s.json";

 /* Fetch data using the WordPress function wp_remote_get() */
 $response = wp_remote_get( sprintf( $api_url, $item_id ) );

 /* Check for errors, if there are some errors return false */
 if ( is_wp_error( $response ) or ( wp_remote_retrieve_response_code( $response ) != 200 ) ) {
  return false;
 }

 /* Transform the JSON string into a PHP array */
 $item_data = json_decode( wp_remote_retrieve_body( $response ), true );

 /* Check for incorrect data */
 if ( !is_array( $item_data ) ) {
  return false;
 }

 /* Return item info array */
 return $item_data;

}

We can improve the function above. To prevent stress on the Envato API server we can cache item data and request the info again after a timeout. WordPress offers us some functions to implement this feature. Let’s add it.

/**
* @param String $item_id - The ID of an Envato Marketplace item
* @returns Array - The item informations
*/
function WPTP_get_item_info( $item_id ) {

 /* Data cache timeout in seconds - It send a new request each hour instead of each page refresh */
 $CACHE_EXPIRATION = 3600;

 /* Set the transient ID for caching */
 $transient_id = 'WPTP_envato_item_data';

 /* Get the cached data */
 $cached_item = get_transient( $transient_id );

 /* Check if the function has to send a new API request */
 if ( !$cached_item || ( $cached_item->item_id != $item_id ) ) {

  /* Set the API URL, %s will be replaced with the item ID  */
  $api_url = "http://marketplace.envato.com/api/edge/item:%s.json";

  /* Fetch data using the WordPress function wp_remote_get() */
  $response = wp_remote_get( sprintf( $api_url, $item_id ) );

  /* Check for errors, if there are some errors return false */
  if ( is_wp_error( $response ) or ( wp_remote_retrieve_response_code( $response ) != 200 ) ) {
   return false;
  }

  /* Transform the JSON string into a PHP array */
  $item_data = json_decode( wp_remote_retrieve_body( $response ), true );

  /* Check for incorrect data */
  if ( !is_array( $item_data ) ) {
   return false;
  }

  /* Prepare data for caching */
  $data_to_cache = new stdClass();
  $data_to_cache->item_id = $item_id;
  $data_to_cache->item_info = $item_data;

  /* Set the transient - cache item data*/
  set_transient( $transient_id, $data_to_cache, $CACHE_EXPIRATION );

  /* Return item info array */
  return $item_data;

 }

 /* If the item is already cached return the cached info */
 return $cached_item->item_info;

}

Now the core function of our WordPress plugin is ready. We have used some WordPress functions that help us to save time. All information about them is explained in the official WordPress Codex.

wp_remote_get() – Retrieves a URL using the HTTP GET method
wp_remote_retrieve_response_code() – Checks that there are no errors inside the raw response
wp_remote_retrieve_body() – Retrieves the body of an already retrieved HTTP request.
set_transient() – Caches data
get_transient() – Gets cached data

Step 3: Build WordPress Shortcode

In the next steps we are going to code a useful WordPress plugin that allows us to display some informations about an Envato Marketplace item. All code below is well commented so you can easily understand each line. For more details about Writing a WordPress Plugin and the WordPress Shortcode API check out the online documentation in the WordPress Codex.

Let’s start

Let’s write the header informations for our plugin

<?php
/*
Plugin Name: WordPress Tutsplus Envato Item Info
Plugin URI: http://wp.tutsplus.com
Description: Display some informations about Envato Marketplace items
Version: 1.0
Author: Michele Ivani
Author URI: http://evographics.net
*/

Add the WordPress shortcode

Now we write the code to add the shortcode and its functionalities.

<?php
/**
* Add the shortcode using the WordPress function add_shortcode()
* We used as shortcode tag "wptp-envato-item"
*/
add_shortcode( 'wptp-envato-item', 'WPTP_add_shortcode' );

/**
* Hook to run when the shortcode is found
* @param Array $atts - shortcode attributes
* @param String $content - shortcode content (not necessary for our plugin)
* @return String - plugin HTML code
*/
function WPTP_add_shortcode( $atts, $content = null ) {

 /* Default shortcode attributes  */
 $atts = shortcode_atts( array(
  'item_id' => ''
 ), $atts );

 extract( $atts );

 /* Validation */
 if ( empty( $item_id ) ) {
  return "<p>Please insert an Envato Marketplace Item ID.</p>";
 }

 /* Get data from the API*/
 $item = WPTP_get_item_info( $item_id );

 /* Validation - Check if something went wrong */
 if ( $item === false ) {
  return "<p>Oops… Something went wrong. Please check out the item ID and try again.</p>";
 }

 /* Format the $item array */
 $item = $item['item'];
 extract( $item );

 /* Prepare the Plugin HTML */
 $html = '';

 $html .= '
 <div class="wptp_envato_item">

  <div class="wptp_title">'.$item.'</div>

  <div class="wptp_wrap">

   <div class="wptp_top">

    <div class="wptp_rating">

     <span class="wptp_desc">rating</span>'.

     WPTP_get_stars($rating)

    .'</div> <!-- end wptp_rating -->

   </div> <!-- end wptp_top -->

   <div class="wptp_middle">

    <div class="wptp_sales">

     <span class="wptp_img_sales"></span>

     <div class="wptp_text">

      <span class="wptp_num">'.$sales.'</span>
      <span class="wptp_desc">sales</span>

     </div> <!-- end  wptp_text -->

    </div> <!-- end wptp_sales -->

    <div class="wptp_thumb">
     <img src="'.$thumbnail.'" alt="'.$item.'" width="80" height="80"/>
    </div> <!-- end wptp_thumb -->

    <div class="wptp_price">

     <span class="wptp_img_price"></span>

     <div class="wptp_text">

      <span class="wptp_num"><span>${body}lt;/span>'.round($cost).'</span>
      <span class="wptp_desc">only</span>

     </div> <!-- end wptp_text -->

    </div> <!-- end wptp_price -->

   </div> <!-- end wptp_middle -->

   <div class="wptp_bottom">

    <a href="'.$url.'" target="_blank"></a>

   </div> <!-- end wptp_bottom -->

  </div> <!-- end wptp_wrap -->

 </div> <!-- end wptp_envato_item -->'; 

 return $html;
}

Star ratings function

The WPTP_add_shortcode() function above has the WPTP_get_stars() procedure that coverts the rating number to HTML stars. Let’s implement it.

<?php
/**
* Convert the rating number to HTML stars
* @param String $rating - Envato Item rating
*/
function WPTP_get_stars( $rating ) {

 /* If item rating is null the function prints a message */
 if ( ( int ) $rating == 0 ) {
  return '<div class="wptp_not_rating">Not rate yet</div>';
 }

 /* Else if rating is >= 1 the function converts it to HTML stars and returns them as a string */
 $return = '<ul class="wptp_stars">';
 $i=1;
 while ( ( --$rating ) >= 0 ) {
  $return .= '<li class="wptp_full_star"></li>';
  $i++;
 }

 if ( $rating == -0.5 ) {
  $return .= '<li class="wptp_full_star"></li>';
  $i++;
 }

 while ( $i <= 5 ) {
  $return .= '<li class="wptp_empty_star"></li>';
  $i++;
 }

 $return .= '</ul>';

 return $return;

}

Include CSS

When the shortcode functions are completed, we have to include the style.css file that styles our plugin.

<?php
/**
* Add the CSS style file
*/
add_action( 'wp_print_styles', 'WPTP_add_css' );

/**
* Attach the plugin CSS file to the WordPress site
*/
function WPTP_add_css() {
 /* Register style */
 wp_register_style( 'WPTP_css', plugins_url( 'style.css', __FILE__ ) );

 /* Enqueue style */
 wp_enqueue_style( 'WPTP_css' );
}

Step 4: Write CSS Rules

The style.css file is inside the same directory as the main plugin file and it contains all the CSS rules.

/* WordPress Tutsplus Envato Item Info - CSS Rules*/

/* Main layout and typography */
.wptp_envato_item {
 font-family: "Helvetiva Neue", Arial, sans-serif;
 margin: 20px 0;
}

.wptp_wrap { width: 210px; }

.wptp_text { display: block; }

.wptp_num {
 display: block;
 font-size: 24px;
 font-weight: 300;
 margin: 0;
 padding: 0;
 line-height: 24px;
 color: #66696d;
}

.wptp_num span {
 font-size: 14px;
 vertical-align: super;
}

.wptp_desc {
 display: block;
 font-size: 12px;
 font-weight: 300;
 margin: 0;
 padding: 0;
 line-height: 12px;
 color: #96999d;
}

.wptp_not_rating {
 color: #66696d;
 font-size: 13px;
 font-weight: bold;
}

.wptp_title { font-size: 14px; font-weight: 300; color: #66696d; margin-bottom: 10px; }

/* Stars rating section */

.wptp_rating {
 width: 82px;
 text-align: center;
 margin: 0 auto 10px auto;
}

.wptp_stars {
 margin: 0;
 padding: 0;
 list-style: none;
}

.wptp_stars li {
 margin-left: 2px;
 display: inline-block;
 vertical-align: middle;
 width: 13px;
 height: 13px;
}

.wptp_stars li.wptp_full_star { background: url(icons-sprite.png) 0px -64px ; }

.wptp_stars li.wptp_empty_star { background: url(icons-sprite.png) -14px -64px ; }

/* Sales and Price sections */
.wptp_sales, .wptp_thumb, .wptp_price {
 display: inline-block;
 vertical-align: middle;
}

.wptp_sales {
 text-align: right;
 margin-right: 10px;
}

.wptp_sales .wptp_text {
 width: 52px;
}

.wptp_img_sales {
 background: url(icons-sprite.png) 0px 0px;
 width: 32px;
 height: 32px;
 display: block;
 margin: 0 0 12px 20px;
}

.wptp_img_price {
 background: url(icons-sprite.png) 0px -32px ;
 width: 32px;
 height: 32px;
 display: block;
 margin-bottom: 7px;
}

.wptp_price {
 text-align: left;
 margin-left: 10px;
}

.wptp_price .wptp_text { width: 34px; }

/* Purchase button section */
.wptp_bottom a {
 display: block;
 width: 78px;
 height: 33px;
 background: url(icons-sprite.png) -32px 0px;
 margin: 10px auto 0 auto;
}

Conclusion

That’s it, now we can upload the plugin to our Worpdress site and use the power of WordPress shortcodes to display some info about Envato Marketplace items. For more details about Writing a WordPress Plugin and the WordPress Shortcode API check out the online documentation on the WordPress Codex.
I’m Michele Ivani and I hope this tutorial was helpful for your WordPress development. Thanks so much for reading."

How to Build an E-Commerce Website Using WordPress: Part 2

2012-02-07T10:56:00.003+08:00

"This is the second and final part of the WordPress E-Commerce tutorial. Here we will go through the final steps of completing our WordPress e-commerce web site. You will be shown with the process of adding products to your site, using different widgets to enhance your site, using different reports to keep track of the sales and efficient use of shortcodes.

Once done with the wp-ecommerce settings, adding your products and selling becomes child’s play.

Before We Move On

Before we dive straight into the process, let’s look at a few changes we made to the e-commerce site since part 1.
1. We have installed the latest version of Liquorice theme, i.e Liquorice 2.2 by Nudge Design.
2. We have updated WordPress to the latest WordPress 3.3 version.
3. Under Settings -> Store -> Shipping we have edited the Flat Rate option and put $ 0.00 under all the fields. This is done since we will use different shipping rates for different products (without any base rates). Putting $ 0.00 keeps this feature enabled. If you want to keep a Base rate to be added to the individual shipping cost of each product, you may enter your Base rates here.

Now our site looks like….

Adding Products

Lets discuss a few useful options before we add our first product.
1. The Product -> Coupons page lets us add special discount coupons for the products. Here you can specify the Coupon Code, Discount, Coupon Expiry Date and other conditions as per your requirements.

2. The Product -> Variations options lets you add variations to your products.
Supose you are selling T-Shirts and you want to specify its variations in Size or Color. This options lets you define your Variations Set first and then define the different variations under it. You can also set a price for each of the variations.

3. The Product -> Product Tags options lets you define your own product tags useful for searching a product while using the Product Tags widget.

Adding Product Categories

Before adding a product lets add our product categories from the Products -> Categories page.
While adding a category you need to specify the Name, Parent Category (if any) and Description. You may specify a Thumbnail image and also restrict a few countries from accessing this product. As of now we have added three categories- Flowers, Confectioneries and Chocolates.

Adding Your First Product

The Products -> Add New option lets you add products to your e-commerce site.
Here you need to specify the Product Name, Product Description, Product Tags and categorize your product under the created Categories. The Variations option lets you add your created Variations to this product.

Now you need to add the Price, Stock and Taxes(if any) of this product. While adding the Price, you can also specify a Sale Price to show a discounted price to your customers, which will increase the customer’s interest.

The Product Download option is used if you are selling downloadable products.
Please upload Product image by clicking the Manage Products Images link. Here you have the option to upload the image form your local hard disk, URL or using your WordPress Media Library. You can also Drag and Drop your images in this page.

The most important part is specifying your shipping options. Here at first you need to specify a Weight for your product and then specify the Local and International Shipping Charges. You also have the option to disregard the shipping charges.

After making all the changes click on Publish.
Now your product appears under the Products -> Products option. You can edit/delete the product from here.

Lets add two more products to our site.

Lightbox effect Image of products.

In the same way you can add different products to your site. You can also use the Settings -> Store -> Import option to upload products in a batch using a comma delimited text file.. After adding the products you can upload the images and insert the additional details.

Using a Few Essential Widgets

Under the Appearance -> Widgets, you will find many useful widgets. You just need to drag and drop it in the area of the page where you want to place it. Lets discuss a few of these one by one.
1. Latest Products– Using the Latest Products widget will display the recently added products on your sidebar or the area where you are placing this widget.
2. Products Categories – Using this widget will show all your product categories in your sidebar. The customer can search for products using those categories.
3. Product Specials – This widget displays those products that is on Sale in your site, i.e if the product has any discounted price or the Table Rate Price.
4. Product Tags- This widget displays the specified product tags in your sidebar so that customer can search for their required products using those Tags.
5. Price Range – This widget adds the price range of the products in your sidebar through which the customer can search for the products using different price ranges.

6. Shopping Cart – If you have selected the Widget option for your Cart Location , you can use this widget to display the shopping cart in your sidebar.

7. Text- This wizard is very helpful if you want to display any special ad on your website. You can also copy paste html snippets in this widget.

Reporting

Once the products have been purchased, you can see the purchase reports under the Sales Summary, Sales by Quarter and Sales by Month. Under the Sales Summary you will get to know the current month’s sales as well as the Total Income. The Sales by Quarter displays the sales by Financial Quarters and Sales by Month displays Last four months of sales on a per product basis.

Under Dashboard -> Store Sales, you will get a summary of the sales for the Current Month. It is through this screen that you will be able to see all the sales details and also process the orders. You can change the Sales Status and also add anew Tracking IDs to each of the products. Clicking on the Details->Items displays the invoice. You can also email the customer the purchase receipt from this page.

That’s it your e-commerce site is ready for the first sale.While checking out, the system automatically asks for you Login Credentials or Registers you if you are a new customer.

Importance of Shortcodes

Introduction
A shortcode is a specific code in WordPress that lets you do great things using very little effort. The other name of Shortcode is Shortcut, you can embed files or create objects using just one line of shortcode which otherwise would have required lots of ugly codes.
Here are the details of a few important shortcodes used in our site.
productspage shortcode helps in displaying the complete list of products and their presentation in the website. This is a very important shortcode in Wp e-commercerce that is used within Products Pages, Products Categories and single Product Templates.
shoppingcart shortcode displays the checkout page or the checkout template in the site.
transactionresults shortcode displays the transaction page which shows the customers the status and the summary of their purchase.
userlog shortcode displays the My Account page of the site. Its is used by already registered customers to see their details regarding purchase history, downloads and account details.
Some other examples of shortcodes-
[wpsc_products product_id='288'] – Displays the product which has ID of 288 [buy_now_button product_id='198'] – Displays a PayPal buy now button for the product(ID-198). [add_to_cart=112] – Displays an add to cart button for the product(ID-112).

Conclusion

I hope you have enjoyed both the e-commerce tutorials.This is only the tip of the iceberg of what can be done with the Wp e-commerce plugin. In the future I shall try to bring more tutorials on WordPress e-commerce."

How to Build an E-Commerce Website Using WordPress: Part 1

2012-02-07T10:56:00.001+08:00

"Today we will be creating a simple but powerful e-commerce site using one of the most popular WordPress plugins called WP e-Commerce. Using this plugin we will be creating a website which sells holiday gifts!

Knowing WP e-Commerce Plugin

WP e-Commerce is a powerful shopping cart plugin for WordPress developed by GetShopped.org. Using this plugin in WordPress lets users buy your products and services online. Given below are some of the features of this amazing plugin.

Easy to install.
Works with any WordPress theme.
Supports all kind of WordPress Widgets.
Template modification is very easy.
Instant support community.
All the popular payment gateways supported.
100% Search Engine friendly.
Can be used to promote products on social networking sites.
Supports multiple languages.
Can be integrated with Google.
Supports multiple currencies.
Multi shipping options.
SSL security integration and many more.

You can start selling your products, downloads and services right away.

There are also additional features for premium customers. You can go through all of these features by clicking here.

Prerequisites of installing WP e-Commerce

Before installing and activating the plugin lets discuss some core pre requirements.
1. WordPress development environment must be ready in your system.You can either host your site locally or using a web hosting service. You can also use BitNami for WordPress, which is a great combined tool for WordPress development and testing.
2. Please log in to your WordPress admin and go to Post -> All Posts and remove (trash) the default post from the list.
3. Please go to Posts -> Categories and create categories relevant to your products. Here we will create Bakery Items, Confectionaries and Flowers. While creating the categories you just need to provide the name and a short description.We have changed the Uncategorized category to Bakery Items.

4. Please go to Pages -> All Pages and remove (trash) the default page from there.
5. You can customize and keep the current theme or go to Appearance -> Themes to install a new one that suits your e-commerce site. You can also use third party themes for your e-commerce site.
6. On the Appearance menu click on Header and upload your site’s header image. You may need to crop the image while uploading.

7. Under the Settings -> General change the following things.

Site Title to Christmas Shopping
Tagline to Gift n Enjoy
Select the Anyone can Register option.

Please click on Save Changes after changing these options.

8. Please go to Settings-> Permalinks. Select Custom Structure and enter /%postname%/. Finally Save the changes done. Permalinks helps you to create customized urls for your pages instead of the default ones.

9. In the Settings -> Discussions page, uncheck all the options and click Save Changes. This will prevent any type of comment in your e-commerce site.

Installing WP-eCommerce

This plugin can be installed either manually or from the WordPress plugin menu.
Lets install it using the easiest method that is by using the WordPress plugin menu.
Please go to Plugins -> Add New and Search for WP e-commerce. In the list generated locate the WP e-commerce plugin and click on Install Now.

After the plugin is installed, click on Activate Plugin to activate the plugin.

That’s it the plug has been installed and ready to use.
After the plugin is installed, you will see a Products menu in your dashboard and a Store option under Settings. The Products menu is used for adding different products to your site and the Store option is used for the plugin settings.

In your dashboard you will also find three new items which shows- Sales by Quarter, Sales by Month and Sales Summary.

A few more additional changes before configuring the plugin

Please go to Settings -> Reading and under Front page displays select A static page and choose the Products Page as your front page. This will ensure that when customers visits your site, the products page will be displayed by default.

Defining a Contact Us page for your site.

We shall use the Contact Form 7 plugin to create a Contact Us page for the site.
For this please go to Plugins -> Installed Plugins and Activate the Contact Form 7 plugin. After activation please click on the plugin settings.

In the plugin’s settings page you can create a customized contact us form by using different types of options available there. Under the Mail option enter your email address beside the To: field. Under Messages you can use your own error messages. Finally copy the generated short code and paste it into your post, page or text widget content. In our case we have copied the code [contact-form-7 id="18" title="Contact form 1"] to a newly created page named Contact Us.

Finally our site looks…

Lets set up the WP-eCommerce plugin before adding products

Please go to Settings -> Store. Here you can set the different options for the plugin.

1. General

a) Select a Base Country/ Region.
b) Select the markets you are selling products to.
c) Set the amount of time the items in a customer's cart are kept reserved.
d) Select a Currency Type and Currency Sign Location.

Finally click Update.

2. Presentation

a) Select Add to Cart under Button Type.
b)You can enable additional options from Show Product Ratings, Show Stock Availability, Display Fancy Purchase Notifications, Display per item shipping etc. For now we will only enable the Display per item shipping: option.

c) Under Gird View Settings we will enter 3 products per row and select Display Description, Display "Add to Cart" Button and Display "More Details" Button options.
d) Under Shopping Cart Settings select Cart Location as Widget. and enable Display "+ Postage & Tax":

e) You can set the product image thumbnail format from the Thumbnail Settings.
f) You may enable other options as per your requirements. As of now we shall keep the other options as default.
Finally click Update.

3. Admin

a) The first three options are used for downloadable products like software, music, games etc.
b) Under Purchase Log Email and Purchase Receipt – Reply Address: enter your email address.
c) Enter your name against Purchase Receipt – Reply Name:
d) Set Terms and Conditions if any.

e) You can edit the Purchase Receipt and Admin Report formats under the Custom Messages.

f) Tracking responses can also be created from this page.
Finally click Update.

4. Taxes

Here you can define the tax rules according to your requirements. You can also define the tax per item.

5. Shipping

a) We will enable the Use Shipping option since we are selling Christmas Gifts.
b) By selecting the Enable Free Shipping Discount, you can provide shippings discounts to customers.

c) Under Shipping Modules we have selected and edited the Fixed Rate shipping option and provided the shipping rates for the customers of different countries.
d) Under External Shipping Calculators we have selected UPS as our shipping gateway and provided all the details.
Please note: You need to have a UPS account in order to use this option. You can also use other shipping options.

Finally click Update.

6. Payments

Here you can define the payment gateway for the customers. Among the various options available, we will use the Test Gateway and PayPal Payments Standard 2.0. The PayPal Payments Standard 2.0 option can be used if you have a PayPal account. This lets customers buy products using PayPal. We will also use the Test Gateway option as a means of manual payment. After selecting and editing the payment options you need to provide all the details.

Finally click Update when done.

7. Checkout

a) Under Misc Checkout Options enable Users must register before checking out, Enable Shipping Same as Billing Option: and Force users to use SSL options.
b) The Form Fields define the Customer's checkout form. You can create a new form or use the default one. You can change the field's Name, Type and Mandatory options. You can also Drag and Drop, Delete different fields based on your requirements.

Finally click Save Changes after its done.

8. Marketing

This option is used to share and broadcast your products among different social networking sites, RSS and Google Merchant Center. For now we shall select the Show Share This, Customer Survey and Facebook Like options.

Click Update when done.

9. Import

The import option is used to upload products automatically using a csv file. We shall come to this later.

In the next part of this Tutorial I shall explain how to add products and use different widgets/plugins in your e-commerce site."

The Ultimate Quickstart Guide to Speeding Up Your WordPress Site

2012-02-07T10:42:00.001+08:00

"Give your site a boost! Implement crucial optimization techniques that will improve not only your ySlow score, but your Google rank too. In this tutorial we will cover all aspects of W3 caching, ySlow, Google page speed, CSS sprites & htaccess rules, to achieve a high ySlow score like i have done on my blog.

Before We Begin

A quick note before we start, although this tutorial will cover everything in as much detail as is required, there will (wherever possible) be shortcuts, to save you some time.

Step 1: Install the Necessary Components

Install a Caching Plugin: First off, whatever caching plugin you are using, switch it off NOW! Unless it is the mighty W3 Total cache, as that is what we will be working with here. (Ok, so that came on a bit strong, but I’ve used a lot of the caching plugins and W3 is my favorite. If you’re using another for any reason, that’s probably fine – we’ll move along with the W3 recommendation though.) Head over to your “Add new” plugins section within the WordPress, search “W3 Total Cache” download it, install it but don’t switch it on… well not yet anyway.
Install a Database Manager Plugin: Next you will need another plugin called “WP-DBmanager” again search and install this making sure you have no other database plugins installed.
Before we go ahead and start improving your site lets first see what were dealing with. Open up Google chrome or install it if you don’t have it already. Once you are in chrome install the ySlow plugin HERE once installed you will see a new icon in the top right of your screen. Click it. (Ensuring you are on the homepage of your site)
ySlow will then check your site, tell you what’s good, what’s bad and everything in between. We want to focus first on everything that is below a grade B. Below i will run through every W3 setting you need to improve your sites load time.

Step 2: Switch on W3 Total Cache

Once W3 Total Cache is switched on you will see a new sidebar tab called “Performance” click it. Now obviously we will run though all the different sections of W3 but to save you some time you could import the W3 settings file, bundled in the “source files” & jump to step 2C.
This is where all the settings for W3 sit. Let’s first look at the “General Settings”, you will want to tick the following boxes (to enable):

Page Cache (select “Disk: Enhanced” in the drop down) – Caching pages will reduce the response time of your site and increase the scale of your web server.
Minify (Select “Manual”, leave the other settings) – Minification can decrease file size of HTML, CSS, JS and feeds respectively by ~10% on average.
Do not tick Database cache (we will sort this later via a different method)
Object cache (select “Disk” in the drop down) – Object caching greatly increases performance for highly dynamic sites (that use the Object Cache API).
Browser Cache – Enable HTTP compression and add headers to reduce server load and decrease file load time.
Leave CDN, Varnish & cloudflare untouched. (again to do this quick upload the settings file included in the “source files” via the option at the bottom of the “General Settings”)

Step 2B: Get Cracking with Minify

Click the “Minify” tab/link at the top of the W3 panel/page. In the “HTML & XML” section make sure that the first three boxes are checked. Then click the “Help” button at the top.

Once this popover loads up you will be faced with a list of javascript files, followed by stylesheets that your site is linking to. Essentially we want to try and tick everything EXCEPT:

Jquery files
Google ads (or any ads for that matter)
Any stats.wordpress.js files (you will have these if you have jetpack installed

However for CSS you can pretty safely select all of them. Now this isn’t an exact science as this is minifying your theme files (Don’t worry it’s non destructive) and there are alot of different themes all employing a wide range of different files, plugins and functions. Basically preview your changes before submitting them.
Minify is one of the biggest improvements you will be integrating, once you have selected all your files (and done the same with every theme, if you are using more than one) then click “Apply & close”, directly followed by “Save all settings” (Deploy it if your site still looks/works the same).

Step 2C: Head Over to Browser Cache…

Once your in the “Browser Cache” tab/page you will need to change the “Expires header lifetime” to 691200 seconds. This will immediately boost your ySlow score.
Now head back to “General Settings” and click “empty all caches”, then go to your homepage and run the ySlow test again, you should see a nice improvement.

Step 3: Let’s get back to that pesky Database optimization

Below the “Performance” sidebar tab in the WordPress backend there should be another tab with the name “Database” (if not then go back and activate it).

Now this is very simple you need to do three things, backup, repair, optimize.
To backup click the “Backup DB” then at the bottom click “Backup” (Don’t worry about gzipping).
Next up we want to repair your database (just incase) so go to the “Repair DB” in the sidebar. Click the “Repair” button at the bottom.
Lastly, optimize it. Click the “Optimize DB” sidebar button & yep you’ve guessed it, click the “Optimize” button at the bottom.
To avoid this process again pop into the “DB Options” sidebar tab. At the bottom there will be an “Automatic Scheduling” section. Ensure that backups are done EVERY DAY (you can’t be too careful) then set it to optimize say every few days and repair once a week. Then save the changes.

Step 4: CSS Sprites

Now in ySlow you will probably have noticed in the “Make fewer HTTP requests” section a string of text that says something like “This page has 10 external background images. Try combining them with CSS sprites.”
Imagine the savings if all those little images could be just one image… It would sure speed things up. For this we are going to use a free tool called “Spriteme” so head on over to the site HERE (do so in a new tab though, again make sure your site is on the homepage).

Once you have both your homepage open in one tab and spriteme open in another drag the “SpriteMe” text onto the tab that has your site in it. A box will appear in the top right of the tab/window. You’ll want to click the “make sprite” button that resides within the “Suggested Sprites” box. Once it does it’s magic download the image it has created and upload it to somewhere on your site (preferably within the theme you are using).

Now click the “export CSS” button in the top right of the “SpriteMe” popover, copy & paste the css code it has given you ( that’s right ALL of it) directly into the bottom of your themes “style.css” or anywhere it is going to be used instead of the default code (as we don’t really want to overwrite the default theme code). You will need to ensure the second “background-image: url” is changed from “http://www.jaredhirsch.com” to where ever you saved the sprite image from earlier.
Once you have done this please once again “empty all caches” in the “Performance” sidebar tab.

Step 5: Optimize Those Images (compression)

For the most part i personally always use Photoshop to compress my images before uploading but for many of you this is not an option as you don’t have photoshop. So here i will assist you in how to decrease the file size of you images.
First off you will want to make sure any theme images are optimized and you can do this buy grabbing all of them and whacking them in this fantastic little app called “ImageOptim“
Once your theme images are nice an compressed you may want to look at plugins such as “Smush.it” for WordPress that will optimize images you may use in posts and the like.

Step 6: GZIP-APPAGE!!!

This is most certainly a crucial optimization technique. To enable PHP GZIP compression, edit the php.ini (example locations such as in /etc/ or /usr/local/lib) with any text editor such as vi, and locate the following directive: zlib.output_compression
The default value is Off, change the setting to On to make the line looks like below:
zlib.output_compression = On
Restart Apache HTTPD server after the change. Every web pages produced by PHP will now be compressed before sending over Internet to the web browser to decode.
PHP also has a directive which can be used to adjust the compression level. To set the compress level, use the following line in php.ini, with valid values between 1 and 9, where 1 is least compress and 9 is most compress. Default compression level is 6, which provides the best compression without degrading server performance.
zlib.output_compression_level = 6
Previously, PHP compression is achieved by entering <?php ob_start(“ob_gzhandler”); ?> code at the beginning of each PHP scripts. The method is not recommended as each and every scripts have to be changed. zlib enabling in php.ini will apply to all PHP scripts on the web server without exclusion.
If it’s impossible to modify php.ini file, or does not have control over php.ini especially on a shared hosting, the PHP GZIP compression can also be setup via .htaccess file, typically located on the root of the website. To enable PHP GZIP compression via Zlib, just add the following line to the .htaccessfile. Note that each website has to be changed individually.
php_flag zlib.output_compression on
The disadvantage of enabling GZIP compression via PHP is that only web pages generated by PHP scripts will be compressed by GZIP encoding. All external CSS or JavaScript files will not be compressed. For the ability to enable GZIP compression on all file types, uses mod_deflate or mod_gzip on HTTPD web server instead.
Do check and verify that GZIP compression is running properly

Step 7: Tidbits

As we come towards the end of this tutorial i just want to run through a few last things. Now that your images have been crushed and sprites have been made you may want to clear both your browser cache and once more “empty all caches” in the “Performance” sidebar tab.
Now let’s head back, log out of WordPress load up your sites homepage and do a ySlow test. Again it should have risen, in the CDN section of ySlow you have the option to “Add as CDN” on some components. Doing this will boost your grade even further.

If you do want to properly add a dedicated CDN may i suggest you follow this TUTORIAL.
Now Fingers crossed you should be looking at a grade A test score and if you compare this with Google’s own page speed report test you will see a very healthy score.
One section of ySlow that i haven’t covered is the “Cookie free domain” which is when the browser makes a request for a static image and sends cookies together with the request, the server doesn’t have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.
If your domain is www.example.org, you can host your static components onstatic.example.org. However, if you’ve already set cookies on the top-level domain example.org as opposed to www.example.org, then all the requests to static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.
Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies. On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact. Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it’s best to use the www subdomain and write the cookies to that subdomain.
I won’t go into this but the above should give you a fair idea. I will go over this in depth in a later tutorial. This does improve the score but it’s not completely essential.

Conclusion

These are the steps i take when building websites and they do a great deal of difference when it comes to improving the speed and allowing for fast response times. For those of you needing more info or that would like some help carrying out the procedures please comment below or send me a message via my author profile."

The WordPress Theme Files Execution Hierarchy

2012-02-07T10:20:00.001+08:00

"This article will show the WordPress theme file execution hierarchy. In short, we’ll look at which files get served up when you load a page in WordPress. You might already know that detail post is served by single.php and detail page is served by page.php, but WordPress will search for different files depending on a variety of factors, so we’ll be looking at how this works!

First thing we should establish is this: without index.php and style.css your theme is no longer a valid WordPress theme… so it stands to reason that if all you have is those two files, each page will you try to load will be served up by index.php. Take a quick peek at this “cheatsheet” to see what I’m referring to:

Notice that the flow for each page types will end up with the index.php. That is the reason why index.php is required file for the WordPress theme. If we are missing any other files in WordPress theme (for instance, if there is no “search.php” file included in the theme), then index.php will be served instead.
Now let’s look at some details about the execution order. I am going to show you the flow in which WordPress will search for files in your active theme folder. I hope this will be useful when you create a WordPress theme from now on:
I will go through each type of files one by one and will show the execution hierarchy for the same.

Home Page

This is the first and most important page of any website. So WordPress has provided the scope to customize the page. Let’s have a look at the file hierarchy for the home page.

front-page.php
home.php
index.php

While serving the home page, WordPress will search for front-page.php. If that is not found, it will use home.php. If home.php exists, it’ll use that. If not, it will simply default to using index.php.

WordPress Post Detail

single-[post-type].php
single.php
index.php

WordPress can have as many post types as we need. So this will be easier to get different design for all/some post types. By default ‘post’ is the main and default post type of the WordPress.
So for example, if your custom post type is product then it will be single-product.php
To know more how to add new post types in WordPress you can refer to this link.

WordPress Page Detail

[custom-template].php
page-[slug].php
page-[id].php
page.php
index.php

Just the same as with post types, we can have a different page layout using the custom page template. So WordPress first searches for the files of the selected Page template (if it exists).
If none are found, it will search for the file with the slug of the current page. Basically, if the slug is aboutus, then it will search for the file page-aboutus.php in active theme folder.
WordPress will search for the files with the ID just like searching for the files with slug.

Category Page

category-[slug].php
category-[id].php
category.php
archive.php
index.php

From the above flow, you can understand that how you can have different templates used for the category page. For instance, you could have a custom page based on slug and id, and then use a default “category.php” file for the rest of your categories..

Tag Page

tag-[slug].php
tag-[id].php
tag.php
archive.php
index.php

This will be same case as the category. You can have different pages for tag slug and tag id also.

Taxonomy Page

taxonomy-[tax]-[term].php
taxonomy-[tax].php
taxonomy.php
archive.php
index.php

Here goes the different file hierarchy for the taxonomy Pages.

Author Page

author-[author-nicname].php
author-[author-id].php
author.php
archive.php
index.php

Here you come to know that you can have different designs based on users also. Same as category and tags we can have different files based on slug and ID of the user.

Attachment Page

[mime-type].php
attachment.php
single.php
index.php

Here you can see that you can have different page layout for different types of attachment. These can be differentiate from the mime type of the attached file.

Date Page

date.php
archive.php
index.php

For the date specific layout we can create date.php in theme folder. Then the flow goes to archive.php and then at last index.php.

Archive Page

archive.php
index.php

As we come downwards to the type of files, number of files are reduced in the hierarchy. So this are the basic or we can say most used files in any WordPress themes.

Search Page

search.php
index.php

You can customize your search result with the search.php first. If search.php is not available then index.php will be served.

404 Page

404.php
index.php

In the case of page or post not found, WordPress will search for 404.php then if not found then it will serve index.php.

Conclusion

You can obviously use this information in a wide range of ways to load up custom templates for various pages… In many cases, even if you’re using an existing theme, you can get a custom solution without modifying the existing files. You will just need to create new file and give it a new name using the information above.
Share your thoughts and any additional file which can be included above hierarchy."

The Ultimate Guide to Implementing Facebook Comments on your Blog

2012-02-07T10:17:00.001+08:00

"Using Facebook Comments on your blog offers your readers a way to instantaneously comment on posts, as well as to share them without having to do any work. If you think this type of commenting system will suit your audience, read on to find out how you can implement it the right way.

Step 1: Create A Facebook App

Before you actually generate the Facebook Comments code and implement it on your blog, you need to create an app for your site.

Go to developers.facebook.com
Click Apps
Click Create New App
Enter an App Display Name and Namespace

On the next screen, you’ll see your newly created app’s App ID and App Secret Key. You won’t need the secret key, but the App ID will be used later. Take note of it.

Below these keys, go ahead and fill out the Contact Email and App Domain (your blog’s domain). Go down and click on Website. Fill in the same domain that you used for the App Domain. Click Save Changes.

Step 2: Insert the Facebook Comments Code into Your Theme

In this tutorial, we’ll be implementing Facebook Comments alongside the default WordPress comment system instead of replacing it. If you want, you can head over to the Facebook Comments code generator to get the code you’ll need for inserting the comment system; however, I’ve included it here so you can just copy it. You’ll need to customize a few parts of it, however; I’ll note which parts those are for each block.
The code block below should be placed in your theme’s header.php file. Find the opening <body> tag and paste the block directly below it. On the 6th line, replace “Your App ID Here” with your App ID.

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your App ID Here";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

While you’re still in your header.php file, go up into the <head> section and paste this block of code somewhere. It will ensure that the Facebook Commenting system on your blog posts knows it’s owned by the app you created before. Replace the “Your App ID Here” bit with your App ID (leave the quotes in place).

<meta property="fb:app_id" content="Your App ID Here"/>

The next code block should be placed in your theme’s comments.php file. Since we’re implementing Facebook Comments alongside WordPress comments, you’ll just be pasting it where you want the Facebook Comments box to appear, and you won’t be deleting any of the original code.

<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="2" data-width="470" data-colorscheme="light" data-mobile="false"></div>

If you generate your Facebook Comments code from the link I gave you earlier, instead of just grabbing it from this tutorial, remember to change the data-href attribute from the original URL to <?php the_permalink() ?>, otherwise Facebook Comments won’t work.
You can also edit the data-num-posts, data-width, and data-colorscheme attributes to your liking. The first defines how many comments will be shown on each post before a user needs to click “See More”, the second defines the width of the commenting system (set it to something slightly smaller than your content area’s width), and the last is the color scheme, which can be set to “light” or “dark”.

Step 3: Display the Combined Facebook and WordPress Comment Count

Your theme most likely has several areas where it will show the number of comments there are on a post. By default, it will only show the number of WordPress comments. Since you’re implementing Facebook Comments alongside WordPress comments now, you’ll want to display the sum of the comments from both systems on each post.
To do this, first open up your theme’s functions.php file. Paste the code shown below at the bottom of the file and save it.

// Get combined FB and WordPress comment count
function full_comment_count() {
global $post;
$url = get_permalink($post->ID);

$filecontent = file_get_contents('https://graph.facebook.com/?ids=' . $url);
$json = json_decode($filecontent);
$count = $json->$url->comments;
$wpCount = get_comments_number();
$realCount = $count + $wpCount;
if ($realCount == 0 || !isset($realCount)) {
   $realCount = 0;
}
return $realCount;
}

Note: This code was built off of a function written by Viceprez on the WordPress Stack Exchange. I’ve simply added a couple of lines to his original function that add in the WordPress comment count. Thanks Viceprez!

Now that you have the function added to your theme, you can use it to replace the original comment count functions used throughout your theme. In my theme, the comments are called using this code:

<?php comments_popup_link('0','1','%'); ?>

Your theme may use this function to display the comment count, or it may not. Once you’ve found whatever does display it, replace it with this code:

<?php echo full_comment_count(); ?>

There will likely be several places within your theme that you’ll need to insert this code. Here’s a list of the most common ones:

The comments.php file
Near the top of your single.php file
The index.php – it’ll be located in the loop that calls each post
Any archive files like archive.php, category.php, author.php, etc. In this, it’ll be located in the loop that calls each post as well.
On search.php
On page.php if you allow comments on pages

If the comment count in your comments.php is diplayed as a sentence, instead of just a number, you can use the code below instead of the one line function call in order to allow for words like “no comments” and “one comment”. I’ve customized mine to be more inviting – I’d recommend that you do the same instead of being generic

<?php
 $commentCount = full_comment_count();
 if ( $commentCount == 0 ) {
  echo '<h5>No comments yet - you should start the discussion!</h5>';
 }
 else if ( $commentCount == 1 ) {
  echo '<h5>One comment so far - add yours!</h5>';
 }
 else {
  echo '<h5>' . $commentCount . ' comments so far - add yours!</h5>';
 }
?>

Step 4: Get Immediate Notifications of New Comments

The last part of the tutorial will show you how to get Facebook Notifications whenever someone comments on your blog.
First, you’ll need to access your comments moderation panel. You can do that by pasting the following URL into your browser, substituting “Your App ID Here” with your App ID. You might also want to add this page to your bookmarks once you’re at it.
https://developers.facebook.com/tools/comments/?id=Your App ID Here
Once you’re at your comments moderation panel, hit the Settings button in the top right corner. A window will come up, and you should see a Moderators field in the middle of it. Simply add yourself as a moderator, and you’ll start getting notications whenever someone comments on a blog post.

Conclusion

If you’ve followed all the steps in this tutorial, your blog should now have Facebook Comments implemented right alongside the default WordPress comment system. I believe this is an ideal setup, as it gives your readers the best of both worlds; Facebook Comments is probably the most convenient commenting system out there, if a reader is signed in to Facebook (they most likely are), then there’s absolutely no authentication or identification fields to fill out. They can just comment away. However, if a reader doesn’t want to use Facebook, or wants to add their link or get CommentLuv benefits, you can still let them use WordPress comments.
You also now have a comment count for each post that shows the sum of the comments from each system, and since you’re a moderator for your app, you’ll get immediate notifications of new comments. I hope you enjoy your new and improved commenting solution!"

Creating a Filterable Portfolio with WordPress and jQuery

2012-02-07T10:11:00.002+08:00

"Learn in this tutorial how to make a filterable Portfolio with jQuery integrated with WordPress, remember that this portfolio kind can make a big difference on your themes!

Step 1: Introduction

You can use the code from this tutorial in any theme that you’ve created or are creating, we’ll follow simple steps and in my case, I’ll use the default Twenty Eleven theme and running on WordPress 3.3. Okay, let’s work!

You can use the code used in this tutorial in any theme that you’ve created or are creating.

Step 2: Creating the Project Item on Admin

We’ll need to create a section on Admin bar called Project, in this section you’ll create all the portfolio entries with their respective thumbnail and demo link.
Open the functions.php file and at the end, let’s create a function to register the Project item. (You can see the complete function at the end of this step)

add_action('init', 'project_custom_init');   

/* SECTION - project_custom_init */
function project_custom_init()
{
 // the remainder code goes here
}
/* #end SECTION - project_custom_init --*/

In this code we are using the add_action function so that when WordPress begins to load our function will be called.
Inside the project_custom_init function lets add the code that registers a Custom Post Type called Project.

// The following is all the names, in our tutorial, we use "Project"
 $labels = array(
  'name' => _x('Projects', 'post type general name'),
  'singular_name' => _x('Project', 'post type singular name'),
  'add_new' => _x('Add New', 'project'),
  'add_new_item' => __('Add New Project'),
  'edit_item' => __('Edit Project'),
  'new_item' => __('New Project'),
  'view_item' => __('View Project'),
  'search_items' => __('Search Projects'),
  'not_found' =>  __('No projects found'),
  'not_found_in_trash' => __('No projects found in Trash'),
  'parent_item_colon' => '',
  'menu_name' => 'Portfolio'
 );

 // Some arguments and in the last line 'supports', we say to WordPress what features are supported on the Project post type
 $args = array(
  'labels' => $labels,
  'public' => true,
  'publicly_queryable' => true,
  'show_ui' => true,
  'show_in_menu' => true,
  'query_var' => true,
  'rewrite' => true,
  'capability_type' => 'post',
  'has_archive' => true,
  'hierarchical' => false,
  'menu_position' => null,
  'supports' => array('title','editor','author','thumbnail','excerpt','comments')
 );

 // We call this function to register the custom post type
 register_post_type('project',$args);

The code above will add an item on the Admin menu called Portfolio and it will be in this section that we’ll create all the portfolio items.
Now, inside the function, let’s add more code.

// Initialize Taxonomy Labels
 $labels = array(
  'name' => _x( 'Tags', 'taxonomy general name' ),
  'singular_name' => _x( 'Tag', 'taxonomy singular name' ),
  'search_items' =>  __( 'Search Types' ),
  'all_items' => __( 'All Tags' ),
  'parent_item' => __( 'Parent Tag' ),
  'parent_item_colon' => __( 'Parent Tag:' ),
  'edit_item' => __( 'Edit Tags' ),
  'update_item' => __( 'Update Tag' ),
  'add_new_item' => __( 'Add New Tag' ),
  'new_item_name' => __( 'New Tag Name' ),
 );

 // Register Custom Taxonomy
 register_taxonomy('tagportfolio',array('project'), array(
  'hierarchical' => true, // define whether to use a system like tags or categories
  'labels' => $labels,
  'show_ui' => true,
  'query_var' => true,
  'rewrite' => array( 'slug' => 'tag-portfolio' ),
 ));

Attention to the ‘hierarchical’ argument on the register_taxonomy function, if you type true you will have a system like categories for your portfolio items, but if you type false you will have a system like tags. I prefer the category style system.
Oh yeah! The project_custom_init() function is finished! See below for the full code of this function.

add_action('init', 'project_custom_init'); 

 /*-- Custom Post Init Begin --*/
 function project_custom_init()
 {
   $labels = array(
  'name' => _x('Projects', 'post type general name'),
  'singular_name' => _x('Project', 'post type singular name'),
  'add_new' => _x('Add New', 'project'),
  'add_new_item' => __('Add New Project'),
  'edit_item' => __('Edit Project'),
  'new_item' => __('New Project'),
  'view_item' => __('View Project'),
  'search_items' => __('Search Projects'),
  'not_found' =>  __('No projects found'),
  'not_found_in_trash' => __('No projects found in Trash'),
  'parent_item_colon' => '',
  'menu_name' => 'Project'

   );

  $args = array(
  'labels' => $labels,
  'public' => true,
  'publicly_queryable' => true,
  'show_ui' => true,
  'show_in_menu' => true,
  'query_var' => true,
  'rewrite' => true,
  'capability_type' => 'post',
  'has_archive' => true,
  'hierarchical' => false,
  'menu_position' => null,
  'supports' => array('title','editor','author','thumbnail','excerpt','comments')
   );
   // The following is the main step where we register the post.
   register_post_type('project',$args);

   // Initialize New Taxonomy Labels
   $labels = array(
  'name' => _x( 'Tags', 'taxonomy general name' ),
  'singular_name' => _x( 'Tag', 'taxonomy singular name' ),
  'search_items' =>  __( 'Search Types' ),
  'all_items' => __( 'All Tags' ),
  'parent_item' => __( 'Parent Tag' ),
  'parent_item_colon' => __( 'Parent Tag:' ),
  'edit_item' => __( 'Edit Tags' ),
  'update_item' => __( 'Update Tag' ),
  'add_new_item' => __( 'Add New Tag' ),
  'new_item_name' => __( 'New Tag Name' ),
   );
  // Custom taxonomy for Project Tags
  register_taxonomy('tagportfolio',array('project'), array(
  'hierarchical' => true,
  'labels' => $labels,
  'show_ui' => true,
  'query_var' => true,
  'rewrite' => array( 'slug' => 'tag-portfolio' ),
   ));

 }
 /*-- Custom Post Init Ends --*/

If you go to the Admin now, you will see a new item on menu called Portfolio like the image below:

Let’s create a new function that will ensure nice messages are shown when the user, for example, creates a new item on portfolio or something like this.
The code below must be typed below our last function and not inside it.

/*--- Custom Messages - project_updated_messages ---*/
 add_filter('post_updated_messages', 'project_updated_messages');

 function project_updated_messages( $messages ) {
   global $post, $post_ID;

   $messages['project'] = array(
  0 => '', // Unused. Messages start at index 1.
  1 => sprintf( __('Project updated. <a href="%s">View project</a>'), esc_url( get_permalink($post_ID) ) ),
  2 => __('Custom field updated.'),
  3 => __('Custom field deleted.'),
  4 => __('Project updated.'),
  /* translators: %s: date and time of the revision */
  5 => isset($_GET['revision']) ? sprintf( __('Project restored to revision from %s'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
  6 => sprintf( __('Project published. <a href="%s">View project</a>'), esc_url( get_permalink($post_ID) ) ),
  7 => __('Project saved.'),
  8 => sprintf( __('Project submitted. <a target="_blank" href="%s">Preview project</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
  9 => sprintf( __('Project scheduled for: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Preview project</a>'),
    // translators: Publish box date format, see http://php.net/date
    date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
  10 => sprintf( __('Project draft updated. <a target="_blank" href="%s">Preview project</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
   );

   return $messages;
 }

 /*--- #end SECTION - project_updated_messages ---*/

This function creates custom messages for when a user modifies the portfolio post, see a message example on image below:

You can see that with only this code you can add tags/categories to your portfolio and create new portfolio items! But let’s add more one feature, good idea? Sure!

Adding a Demo URL Meta Box

In this step, we’ll add a meta box on the portfolio item creation screen where the user can paste a url to the website or other page.
Let’s create three functions to add this meta box where we will save our URL for the portfolio item. The code goes below the last function that we’ve created.

/*--- Demo URL meta box ---*/

 add_action('admin_init','portfolio_meta_init');

 function portfolio_meta_init()
 {
  // add a meta box for WordPress 'project' type
  add_meta_box('portfolio_meta', 'Project Infos', 'portfolio_meta_setup', 'project', 'side', 'low');

  // add a callback function to save any data a user enters in
  add_action('save_post','portfolio_meta_save');
 }

 function portfolio_meta_setup()
 {
  global $post;

  ?>
   <div class="portfolio_meta_control">
    <label>URL</label>
    <p>
     <input type="text" name="_url" value="<?php echo get_post_meta($post->ID,'_url',TRUE); ?>" style="width: 100%;" />
    </p>
   </div>
  <?php

  // create for validation
  echo '<input type="hidden" name="meta_noncename" value="' . wp_create_nonce(__FILE__) . '" />';
 }

 function portfolio_meta_save($post_id)
 {
  // check nonce
  if (!isset($_POST['meta_noncename']) || !wp_verify_nonce($_POST['meta_noncename'], __FILE__)) {
  return $post_id;
  }

  // check capabilities
  if ('post' == $_POST['post_type']) {
  if (!current_user_can('edit_post', $post_id)) {
  return $post_id;
  }
  } elseif (!current_user_can('edit_page', $post_id)) {
  return $post_id;
  }

  // exit on autosave
  if (defined('DOING_AUTOSAVE') == DOING_AUTOSAVE) {
  return $post_id;
  }

  if(isset($_POST['_url']))
  {
   update_post_meta($post_id, '_url', $_POST['_url']);
  } else
  {
   delete_post_meta($post_id, '_url');
  }
 }

 /*--- #end  Demo URL meta box ---*/

I won’t explain in details this code because you can learn about meta boxes in this tutorial: Reusable Custom Meta Boxes or just do a little search through the WordPress Codex or on Google.
The code above just creates one meta box with one field where the user can type a URL. We need all these functions, the first just initializes the meta box, the second is the meta box code, and the last is a function to save the data.
Ok! After this, we can go on to next step and work on the front-end, because the back-end is done! We’ll then add the content after.

Step 3: Creating the Portfolio Page template

Now we’ll work to show our portfolio entries to the user! But first let’s create some categories and then add some items to the portfolio.
In this tutorial I’ll use a two column portfolio layout, with some adjustments on markup and CSS you can create a lots of layouts!
A few tips to create a portfolio item

Create the tags/categories first
In the “Add New Project” page you’ll have an editor like the post/page editor, then just type all the text and images that your user will see when they click on the “More Details” link
To add thumbnails we’ll use the Featured Image that is a default WordPress feature
In this tutorial I’ll use images with 400px x 160px (width and height), but feel free to use one that you like and that fits in your layout
Use http:// before the links on the meta box so you don’t get a 404 not found error

Ok, the first thing that we’ll need to do now is create a new Page Template called “Portfolio 2 Columns”, so let’s go!

Creating the Page Template

First, duplicate the page.php file. Then, rename it to page_portfolio_2c.php.
We need to edit this new file and paste the code below on the file’s first line:

<?php
/*
Template Name: Portfolio 2 Columns
*/
?>

This will show a new option on the page creation screen, but remember that this code MUST be pasted on the file’s first line!
Now just erase all the content inside content div, in this tutorial, I’m using the Twenty Eleven theme and after erasing, I have this code in my file:

<?php
/*
Template Name: Portfolio 2 Columns
*/
?>

<?php
get_header(); ?>

  <div id="primary">
   <div id="content" role="main">

    <?php // I removed all the lines here ?>

   </div><!-- #content -->
  </div><!-- #primary -->

<?php get_footer(); ?>

If you are using your own theme, then erase all the lines that get content from your page, like the_content() for example. We’ll create some custom code, so don’t leave other code here, in the portfolio page we just need your projects!
Now, go to WordPress Admin and create a new Page called “Portfolio” and don’t forget to select “Portfolio 2 Columns” in the Template field, like the image below.

Just add a title and leave the content blank, we don’t need it.
If you try to access the page now you’ll get only the header, footer and blank content. So, let’s add life to our filterable portfolio!

Step 4:The jQuery Filterable Portfolio

Let’s talk a little about the plugin that we’ll use to make the portfolio.

The plugin

In this tutorial I’ll make use of a plugin called Filterable, this plugin was created by GetHifi.
This plugin was written without jQuery’s compatibility mode, so I just changed it and the version that works fine with WordPress is in the Source Code file for this tutorial.
The plugin is a little old, to be more exact, it’s from 2009, but it’s on MIT License, so you can use on premium themes, commercial sites and wherever you like.
Just download the modified script that is on Source Code (link on tutorial top) and let’s begin! If you like, visit the homepage to get more details about it.

How Filterable works

Using Filterable is very simple! The first step is use the right markup, the plugin expects markup like the example below:

<ul id="portfolio-filter">
  <li><a href="#all">All</a>
  <li><a rel="jquery" href="#jquery">jQuery</a>
  <li><a rel="webdesign" href="#webdesign">Webdesign</a>
 </ul>

Here we have the filter items, when we click on one of these links, then all the magic will happen. Important: all the entries will need a class with the same text in the ‘href’ and ‘rel’ attributes.
And now, we have the portfolio items markup:

<div id="portfolio-wrapper">
  <ul id="portfolio-list">

   <li class="portfolio-item all webdesign">
    <!-- ALL CUSTOM MARKUP HERE -->
   </li>

   <li class="portfolio-item all jquery">
    <!-- ALL CUSTOM MARKUP HERE -->
   </li>

  </ul>
  <div class="clearboth"></div>
 </div>

Important: What really matters here is that all the items (li) must be inside a (ul), in other words, must be wrapped. Note that we use a div too, we use it because we’ll ‘float’ the li elements, so it is important to have another wrapper and a clear div to avoid structure breaking problems.
After this, we’ll need to call the filterable script in our functions.php file and initialize the filterable portfolio by calling the filterable() function, like the code below:

<script>
  jQuery(document).ready(function() {
   jQuery("#portfolio-list").filterable();
  });
 </script>

But for now, we’ll add our custom markup inside the li, but, we’ll need to generate all the filters and class names with PHP to get all the categories, portfolio entries and all the other details from WordPress! Let’s work!

Creating the Portfolio Filter

Let’s back to the page_portfolio_2c.php file and write the portfolio filter. The code actually is something like the code below:

<?php
/*
Template Name: Portfolio 2 Columns
*/
?>

<?php
get_header(); ?>

  <div id="primary">
   <div id="content" role="main">

    <!-- WE'LL ADD OUR CODE HERE, INSIDE CONTENT DIV -->

   </div><!-- #content -->
  </div><!-- #primary -->

<?php get_footer(); ?>

We need get all the terms/categories from WordPress, edit some names to use inside the class attribute and print a ul for the required template.
We’ll type the following code inside the #content div:

<?php
  $terms = get_terms("tagportfolio");
  $count = count($terms);
  echo '<ul id="portfolio-filter">';
  echo '<li><a href="#all" title="">All</a></li>';
   if ( $count > 0 )
   {
    foreach ( $terms as $term ) {
     $termname = strtolower($term->name);
     $termname = str_replace(' ', '-', $termname);
     echo '<li><a href="#'.$termname.'" title="" rel="'.$termname.'">'.$term->name.'</a></li>';
    }
   }
  echo "</ul>";
 ?>

The code above will generate a ul with the default element ‘All’, and do a loop on terms to print all other categories that have entries. Let’s do a more detailed explanation:
First, we create a variable called $terms, and we use the get_terms() function that returns an array with all terms. As a parameter, the function requires a string or an array of strings with the taxonomy name(s), we pass tagportfolio, that was the name we used in our functions.php file. You can get more detailed info under get_terms() in the WordPress Codex.
Then, we create a variable called $count and use the count() function to get the total number of elements in the array, we print the default markup and the All item.
After that, we verify if the $count variable is greater than zero, if yes, we have at least one category with items to print.
Inside if, we create a foreach loop to get all array values, and create a different li element for each element in the $terms array.
Inside foreach, we create a variable called $termname to store the term name, remember that we change the text to lower case, because this variable will be used inside the class attribute. Then, we just replace any white space with a - using the str_replace function, this line will enable you to use categories/terms with more than one word, like “WordPress Themes” for example. And last, we print an li element and use our variables to print the data in the right place.
If you test now, you’ll see a categories/terms list with the names that you created in WordPress Admin. Now, let’s work on the items.

Displaying the Portfolio Items

Now let’s display the portfolio items, we need do it following the required template shown above.
We’ll do it just adding the code below:

<?php
 $loop = new WP_Query(array('post_type' => 'project', 'posts_per_page' => -1));
 $count =0;
?>

<div id="portfolio-wrapper">
 <ul id="portfolio-list">

  <?php if ( $loop ) :

   while ( $loop->have_posts() ) : $loop->the_post(); ?>

    <?php
    $terms = get_the_terms( $post->ID, 'tagportfolio' );

    if ( $terms && ! is_wp_error( $terms ) ) :
     $links = array();

     foreach ( $terms as $term )
     {
      $links[] = $term->name;
     }
     $links = str_replace(' ', '-', $links);
     $tax = join( " ", $links );
    else :
     $tax = '';
    endif;
    ?>

    <?php $infos = get_post_custom_values('_url'); ?>

    <li class="portfolio-item <?php echo strtolower($tax); ?> all">
     <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( array(400, 160) ); ?></a></div>
     <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
     <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
     <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Live Preview →</a> <a href="<?php the_permalink() ?>">More Details →</a></p>
    </li>

   <?php endwhile; else: ?>

    <li class="error-not-found">Sorry, no portfolio entries found.</li>

  <?php endif; ?>

 </ul>

 <div class="clearboth">
</div>

A lot of lines of code, no? But don’t worry, I’ll explain the code for you.
The first step is create a custom query, we do it with WP_Query function, I pass as parameter the custom post type “project”, that we created on functions.php file. This query will get all the projects that you’ve created.
Then, I do a loop like we do normally with post exhibition, for example.
Inside the while, we do the same process used on filter creation, but here we create a array called links where we’ll store all the terms of the post. Note that now, beyond the taxonomy name we pass the post ID in get_the_terms().
Then, we use join and create a unique string with all array elements, if the post terms are “WordPress” and “Design”, the $tax variable will be equal to “wordpress design”, we’ll use this to add the right classes to allow the portfolio to be filterable. If the post doesn’t have terms, we just set $tax being equal to a blank string.
After this, we create a variable called $infos where we’ll get the demo url from our Custom Post Field created in the functions.php file
Then, we just print the template markup and make use of functions like get_the_excerpt(), the_post_thumbnail (note that you can change the dimensions to fit your layout, if you for example, would like to create a three column portfolio.)
If you update the page, you will see all the items listed, but the filter still doesn’t work. Let’s fix it!

Using Filterable in WordPress

Now, let’s use our plugin. Did you already download it? If yes, copy and paste the filterable.js file inside the js/ folder.
In the functions.php file, let’s add the jQuery library to the ‘head’ tag first. To do it we’ll use a custom function and the wp_enqueue_script function.

function enqueue_filterable()
 {
  wp_register_script( 'filterable', get_template_directory_uri() . '/js/filterable.js', array( 'jquery' ) );
  wp_enqueue_script( 'filterable' );
 }
 add_action('wp_enqueue_scripts', 'enqueue_filterable');

Now, back to the page_portfolio_2c.php file and below the last code added but inside the content div, add the following code:

<script>
  jQuery(document).ready(function() {
   jQuery("#portfolio-list").filterable();
  });
 </script>

This only links the plugin to the page and calls the filterable() function to make our portfolio filterable.

Full Code

<?php
/*
Template Name: Portfolio 2 Columns
*/
?>

<?php
get_header(); ?>

  <div id="primary">
   <div id="content" role="main">

   <?php
     $terms = get_terms("tagportfolio");
     $count = count($terms);
     echo '<ul id="portfolio-filter">';
     echo '<li><a href="#all" title="">All</a></li>';
     if ( $count > 0 ){

      foreach ( $terms as $term ) {

       $termname = strtolower($term->name);
       $termname = str_replace(' ', '-', $termname);
       echo '<li><a href="#'.$termname.'" title="" rel="'.$termname.'">'.$term->name.'</a></li>';
      }
     }
     echo "</ul>";
   ?>

   <?php
    $loop = new WP_Query(array('post_type' => 'project', 'posts_per_page' => -1));
    $count =0;
   ?>

   <div id="portfolio-wrapper">
    <ul id="portfolio-list">

    <?php if ( $loop ) :

     while ( $loop->have_posts() ) : $loop->the_post(); ?>

      <?php
      $terms = get_the_terms( $post->ID, 'tagportfolio' );

      if ( $terms && ! is_wp_error( $terms ) ) :
       $links = array();

       foreach ( $terms as $term )
       {
        $links[] = $term->name;
       }
       $links = str_replace(' ', '-', $links);
       $tax = join( " ", $links );
      else :
       $tax = '';
      endif;
      ?>

      <?php $infos = get_post_custom_values('_url'); ?>

      <li class="portfolio-item <?php echo strtolower($tax); ?> all">
       <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( array(400, 160) ); ?></a></div>
       <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
       <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
       <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Live Preview →</a> <a href="<?php the_permalink() ?>">More Details →</a></p>
      </li>

     <?php endwhile; else: ?>

     <li class="error-not-found">Sorry, no portfolio entries for while.</li>

    <?php endif; ?>

    </ul>

    <div class="clearboth"></div>

   </div> <!-- end #portfolio-wrapper-->

   <script>
    jQuery(document).ready(function() {
     jQuery("#portfolio-list").filterable();
    });
   </script>

   </div><!-- #content -->
  </div><!-- #primary -->

<?php get_footer(); ?>

Step 5: Some style

Now that we’ve coded everything that we need, let’s add some CSS to our style.css file, if you have other files just add the code there.

/* CLEARFIX
----------------------------------------------- */

.clearboth {
 display: block;
 margin: 0;
 padding: 0;
 clear: both;
}

/* PORTFOLIO FILTER STYLE
----------------------------------------------- */

#portfolio-filter {
 list-style-type: none;
}

#portfolio-filter li {
 display: inline;
 padding-right: 10px;
}

#portfolio-filter li a {
 color: #777;
 text-decoration: none;
}

#portfolio-filter li .current,
#portfolio-filter li:hover {
 color: #084a9a;
}

/* PORTFOLIO LIST STYLE
----------------------------------------------- */

#portfolio-wrapper {
 padding-bottom: 25px;
}

#portfolio-list {
 list-style-type: none;

}

#portfolio-list .portfolio-item {
 width: 400px;
 float: left;
 margin-right: 5px;
}

#portfolio-list .portfolio-item h3 a {
 color: #084a9a;
 text-transform: uppercase;
 font-weight: bold;
}

#portfolio-list .portfolio-item .excerpt
{
 text-align: justify;
 font-size: 14px;
 line-height: 18px;
 padding-right: 15px;
 margin-bottom: 5px;
}

#portfolio-list .portfolio-item .excerpt a {
 color: #555;
}

#portfolio-list .portfolio-item .excerpt a:hover {
 text-decoration: none;
}

Now, if you test again you’ll get a nice filterable portfolio! Wow, all the work is done!

Conclusion

And it’s done! Now you know how to create an amazing filterable portfolio with a free jQuery plugin that you can use in any work that you do.
I hope that you enjoy the content, thank you very much for reading!"

Using WordPress Multisite: A Network of Websites at Your Fingertips

2012-02-06T17:49:00.001+08:00

"Today, we will look at the basics of WordPress MS – or for those users that have been using WordPress for a while – Multisite or WordPress MU. WordPress MS is a feature that many users are unaware of, and one that is often confusing to install and configure. But no more! In this tutorial, we will walk through installing WordPress MS, becoming familiar with the network admin, and integrating useful plugins for your Multisite network.

Introduction

WordPress Multisite is a feature that since WordPress version 3 has been included discreetly right into the install itself. It is a feature that packs a huge punch, allowing 1000s of blogs to exist virtually within one, single WordPress install. It is a great idea for large-scale sites that use multiple sub-domains, blog networks, social networks, or even internal networking for businesses or organizations. While this feature has been around for almost as long as WordPress itself, it is just now getting the attention it deserves – even from WordPress devs.

What We Will Do

In this tutorial we will:

take an in-depth look at WordPress MS (aka Multisite or WordPress MU)
install WordPress MS and learn about the different installation options
create new sites with MS
look at some useful plugins to combine with WordPress MS
examine projects that could benefit from MS

By the end of this tutorial series, you should be extremely familiar with what WordPress MS is, how to install it, how to create new sites, and how to use it most effectively for your next project.

What Exactly is WordPress MS?

In a nutshell, Multisite enables a single WordPress install to act like a network of sites centered around a single domain (http://yoursite.com). It allows for either new sub-domains (http://subdomain.yoursite.com) or sub-directories (http://yoursite.com/subdomain), and it does all this virtually, which means you do not need to create new folders. Instead, by just adding some code to wp-config.php and .htaccess, you have thousands of sites right at your fingertips.
Multisite also allows for easy network management through a single admin dashboard which a user with appropriate permissions can access via any network site’s admin bar. Multisite is by no means “new”. It has been around for almost as long as WordPress itself, although previously it was developed separately. Since WP 3.0 it has been included together with WordPress, and, as I mentioned above, it seems like it will only get more user-friendly as the WordPress devs seem to be paying some particular attention to it in 2012.
Next, let’s look at installing Multisite on a typical WordPress install.

Installing WordPress Multisite

For many people, installing Multisite can be a nightmare. I hope to alleviate that by taking you step-by-step through both a sub-directory and sub-domain install. Let me say first, that it is by far easier to install Multisite on a new install, even though it is still possible to do it on an older install with pre-existing content. However, there could possibly be permalink issues.
With that said, the following steps assume that you have completed a standard install of WordPress. However, the steps can apply to a new or previous install.

Activating the Network Setup Menu Item

In order to even begin the process of installing Multisite, you need to open your wp-config.php file, and right above

/* That’s all, stop editing! Happy blogging. */

add the following:

/** Allow Multisite **/

define(’WP_ALLOW_MULTISITE’, true);

The first line simply is a comment that will help us keep our code tidy. Next, we tell our WordPress install to allow Multisite functionality. Once you have edited and saved the file, you should now see the following in your “Tools” submenu:

If you are using a previous WordPress install with active plugins, you will get a notice in Network Setup to deactivate all of your plugins before you continue.

Configuring the Network from the Dashboard

The first screen in “Network Setup” will look like this:

From this screen, you have the following items to configure:

Site Addresses – From here you will select whether to use sub-domains or sub-directories. If you choose to work with sub-domains, you should verify with your host if it is possible.
Network Title – The title for your network.
Admin E-Mail Address – The admin contact for your new network.

The server address should already be filled in to display how your new permalinks will appear.

If this is a pre-existing install, you will receive a note saying that only sub-domains are possible due to possible permalink conflicts. If you are installing on a localhost, you will only be allowed to install via sub-directories.

After you have configured these settings, click install, and you should see the following screen:

Finishing the Multisite Install

Now, let’s look step-by-step at the instructions given on the “Enabling the Network” page. Before you dig into this, I would strongly suggest that you backup your wp-config.php and .htaccess files. This will save a lot of headache in the future.

Create a new directory named blogs.dir, and place that in your root folder’s wp-content folder. This folder must be writable by the web server, as it will be used to store all of our network’s uploaded media.

Add the following code for a subdomain install:

define( ’SUBDOMAIN_INSTALL’, true );
 $base = ’/’;
 define( ’DOMAIN_CURRENT_SITE’, ’yoursite.com’ );
 define( ’PATH_CURRENT_SITE’, ’/’ );
 define( ’SITE_ID_CURRENT_SITE’, 1 );
 define( ’BLOG_ID_CURRENT_SITE’, 1 );

and this for a sub-directory install

define( ’MULTISITE’, true );
 define( ’SUBDOMAIN_INSTALL’, false );
 $base = ’/’;
 define( ’DOMAIN_CURRENT_SITE’, ’yoursite.com’ );
 define( ’PATH_CURRENT_SITE’, ’/’ );
 define( ’SITE_ID_CURRENT_SITE’, 1 );
 define( ’BLOG_ID_CURRENT_SITE’, 1 );

to wp-config.php right above:

/* That’s all, stop editing! Happy blogging. */

Make sure to change yoursite.com to the URL of your site – make sure it is without WWW. Broken down, this code identifies this as a sub-domain or sub-directory install, and sets your main site’s ID as 1. Every site has an ID, and it is important to note these as you start to work with plugins and build custom queries.

Add the authentication keys provided to wp-config.php. This will help secure your install.

Finally, you want to add the following code to your .htaccess file:

RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]

  # uploaded files
  RewriteRule ^files/(.+) wp-includes/ms-files.php?file=$1 [L]

  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]
  RewriteRule . index.php [L]

This code will replace any other WordPress code that you find in .htaccess.

For another reference on setting up a WordPress Multisite network, be sure to visit the “Create a Network of WordPress Sites” page in the Codex.

Things to Note with Multisite Installs

Multisite is easiest to install on a fresh WordPress install with the sites as sub-directories. That isn’t to say don’t install it any other way, just to point out the easiest path.
If you use Multisite, then you can not give WordPress it’s own folder. It must be installed in the root folder of your site. Editor’s Note: This is not 100% correct, for further information and clarification, see Andrea_R’s comment below.
Your web host may not allow for the creation of sub-domains. Be sure to check this out before attempting a sub-domain install.
You must activate the network feature from the WordPress dashboard. Simply adding the code to wp-config.php and .htaccess is not enough.

Navigating the Network Admin

In order to access the Multisite admin dashboard in WordPress 3.0 and later, simply hover over My Sites in the admin bar at the top of the browser window, and click on Network Admin.

Once in the dashboard, the menu looks like this:

The Network Admin menu has the following submenus:

Sites – From here you can create new network sites, visit admin dashboards, delete sites, and edit site settings.
Users – This submenu allows you to manage users by creating, editing, and deleting them. You can also see which users have registered on specific sites.
Themes – With Multisite, themes are managed from the network. Themes must be installed, activated, and edited from within the network admin dashboard. They can still be switched in the site dashboard.
Plugins – Just like themes, plugins are installed and activated on the network from this dashboard. Plugins can still be activated and set up in the site dashboard.
Settings – This submenu lets you set the network name, admin email, registration settings, welcome emails, initial site settings, and upload settings. This is a great submenu to configure if you are using Multisite as a blog engine or social network.
Updates – From this submenu, you can do network-wide updates on WordPress core, plugins, and themes.

Next, I want to walk you through creating your first network site. If you are familiar with using WordPress, everything else should seem pretty normal, with the exception of having to go through a network dashboard to activate plugins and themes instead of a normal site dashboard.

Creating a New Site

From the network dashboard, navigate to Sites –> Add New.
Next, you will need to specify the site address, site title, and an admin email. The screen will look like this:
Once added, you will see a message at the top verifying the site’s creation. You can now visit the site’s dashboard, or edit the site’s settings from the network dashboard. Two emails will also be sent. Once will go to the network’s overall admin notifying them of the new site, and one will go to the site’s new admin, notifying them of their login credentials.

And that’s how easy creating sites can be in WordPress MS! Now, let’s look at some plugins.

Indispensable Plugins for WordPress MS

Here is a list of some plugins that I suggest using on MS installs, and, as always, if you have others to add throw them in!

WordPress MU Sitewide Tags Pages
This plugin allows you to create a specific blog on the network where ALL recent posts on the network can be found. From within the plugin, you can also specify this to be on the main site that you set up in the initial Multisite install. The max number of posts to display can be set as well.
Multipost MU / ThreeWP Broadcast
This plugin allows users that create content on different blogs to "broadcast" their posts to other blogs on the network. In addition to post content, categories, tags, and custom fields can also be broadcasted. To ease publishing to multiple blogs, blog groups can be created.
More Privacy Options
This plugin allows you to set the privacy level of each blog from within the network dashboard site’s settings panel. The options are:
Domain Mapping
This plugin allows users to use their own domain names on your Multisite network. This plugin does require a knowledge of adding and editing plugin files and a basic understanding of how servers work and your specific server settings. A great tutorial for setting up this plugin can be found on Otto’s blog, “WordPress 3.0 Multisite Domain Mapping Tutorial“.
Multisite User Management
This plugin allows admins to set the default role of each, individual network blog. Once activated, a list of blogs appears on the network settings page. This plugin is different than the New Blog Defaults plugin, as it targets the individual sites as opposed to every new blog. For instance, if you want one site to allow all default users editor capabilities and another to have subscriber capabilities, then this is the plugin you are looking for.
New Blog Defaults
This plugin creates defaults for any new blog created on the network. Once activated, a new menu appears under the network Settings submenu. From here, you can edit any of the normal WordPress settings: general blog settings, reading settings, writing settings, permalink settings, discussion settings, privacy settings, and media settings. You can also choose a site’s default theme, and set other options like categories, links, and initial user settings.
Extended Super Admins
This plugin allows for the creation of specific user classes with specific roles. The plugin, once activated, can be found under the main network Settings submenu. The capabilities list is extensive.

Projects that Could Benefit from WordPress MS

Now that I’ve outlined how to install Multisite, how to create new sites, and what plugins to use, I thought it would be great to put some ideas down about possible projects that could benefit from Multisite. As always, if you have other ideas or Multisite installs that you’ve worked with before, feel free to add them in the comments.

Blog networks
Social networks
Internal networks for organizations or companies
Educational sites
Sites that span cities, customer groups, or other various groups
Any other WP site that may need the option for multiple sites within one install

Conclusion

This year holds some exciting things for Multisite, and as more and more users discover how to implement it, this currently under-used feature could soon become one of the core features WordPress is known and used for. I hope that you have learned how to install Multisite, how to navigate the network admin, and how to find plugins that can improve the functionality of your networks. Overall, I hope that you feel more comfortable using Multisite in your projects, and that, if you’ve never used it, you’ll take the plunge and play around with it.
Thanks for reading!"

How to Integrate prettyPhoto with Post Images in your Themes

2012-02-06T15:54:00.001+08:00

"prettyPhoto is a lightbox plugin made by Stéphane Caron. Today we’re going to learn how to ship the plugin with your WordPress themes.

Introduction

Giving a built-in lightbox option instead of making users download a plugin has many benefits for theme authors. For me it’s being able to theme the lightbox to suit my WordPress themes. It’s also a nice feature to have available to your theme’s users, of course you should also give them an option to disable the functionality. With that said let’s get to it.

Step 1 Download prettyPhoto and set up directory structure

Head over to margins for-errors.com and download the plugin. Once you’ve got it we’re going to create a new directory structure for the plugin to make things easier for ourselves.
First let’s delete a few things we don’t need. In the images folder delete everything apart from the prettyPhoto folder and it’s contents. In the root folder, delete the file xhr_response.html and index.html. Now move jquery.prettyPhoto.js from the js folder to the root plugin folder and delete the js folder.
Finally, rename the folder to prettyPhoto and upload the folder to your theme’s directory, you probably already have a js or scripts directory so upload to that, for this tutorial let’s presume it’s in your-theme/js

Step 2 Add the scripts to your theme (Updated: See comments below)

Before we load up the plugin files in our theme we need to load jQuery. We’re going use the Google hosted version of jQuery using the method shared on Digging into WordPress, so let’s add the snippet to our functions.php.

if (!is_admin()) {
 add_action("wp_enqueue_scripts", "register_scripts", 11);
}
function register_scripts() {
 wp_deregister_script('jquery');
 wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
 wp_enqueue_script('jquery');

 wp_register_script('prettyPhoto_script', (get_bloginfo('stylesheet_directory')."/js/prettyPhoto/jquery.prettyPhoto.js"));
 wp_enqueue_script('prettyPhoto_script');
 wp_register_script('customprettyPhoto_script', (get_bloginfo('stylesheet_directory')."/js/prettyPhoto/customprettyPhoto.js"));
 wp_enqueue_script('customprettyPhoto_script');
}

You might want to consider the advantages and disadvantages of using a CDN to serve jQuery. WordPress does ship with a copy of jQuery but using Google’s hosted version may benefit your site’s performance. If you’re a theme author I would stick with using the shipped version. Check out the discussion on another tutorial to help you make up your own mind.
You’ll notice we’ve added another file called customprettyPhoto.js. This is where we’ll be making the plugin play nice with our post images and initialising it. So let’s create that file and put it in your prettyPhoto directory. OK, let’s initialise prettyPhoto.

<script>
 $(document).ready(function(){
   $("a[class^='prettyPhoto']").prettyPhoto();
 });
</script>

We need to add a line of jQuery to add the required prettyPhoto class prettyPhoto to the anchor tags that surround our post images. Since we’re talking jQuery let’s use it to accomplish this. Add the following right after $(document).ready(function(){ where we make sure the page is loaded.

$('.entry-content a').has('img').addClass('prettyPhoto');

Replace .entry-content with whatever class name or ID you’ve wrapped your post content with and you should have successfully added the class to all links that wrap your post images. If you had a look at the documentation for prettyPhoto you will see it says to use a rel attribute but instead we’ve used a class. Doing so prevents validation errors in our HTML because rel attributes can only have certain allowed values according to the HTML5 spec.
Next we want to enable prettyPhoto’s description option. We have to overcome one small hurdle which is that prettyPhoto wants us to add title attributes to our anchor tags that will be used for the descriptions but WordPress adds titles to image tags. To solve this we’ll write a couple lines of jQuery that will take the image title tag and set the same title on the anchor tag that wraps the image.

$('.entry-content a img').click(function () {
 var desc = $(this).attr('title');
 $('.entry-content a').has('img').attr('title', desc);
});

Here we fire a function when the user clicks on a post image. We grab the image’s title tag and attach it to the anchor. This step makes it a lot easier for your theme’s users to add descriptions. If you want to disable the functionality altogether just make sure to set each anchors title to be empty, if it’s totally missing, as in there isn’t even an empty title, prettyPhoto will just display “undefined” instead.

Step 3 Add the prettyPhoto CSS to your theme

We need to add the CSS for prettyPhoto to the theme. Back to your functions.php file and add the following line to the top:

wp_enqueue_style('prettyPhoto', get_bloginfo('stylesheet_directory').'/js/prettyPhoto/css/prettyPhoto.css');

Since we kept the images and CSS in their original folders and relative to each other as they were originally we don’t need to worry about broken images.

Step 4 Captions and Titles

Let’s look at how to add captions and titles that our prettyPhoto will use. Looking at the image above we can see the relationship between the post image alt tag and link title tag we can set when adding an image to a post or page.

Finishing Up

And that’s it, we’ve successfully added prettyPhoto to our theme. Make sure to read the plugin documentation for more uses and options. PrettyPhoto can handle more than just images, it works with videos, ajax and more. It also ships with a handful of themes that may suit your theme out of the box or at least give you a good starting point."

7 Simple Rules: WordPress Plugin Development Best Practices

2011-12-02T13:25:00.001+08:00

"We’ve been talking a lot about “Best Practices” here on Wptuts lately. Today, we’ll cover some important best practices for creating a WordPress plugin. From security tips to namespacing tricks, follow these rules and you’ll do no wrong. Whether you’re a budding new plugin developer or a time-tested veteran, these simple rules and suggestions will make you a better developer (and the community will thank you for it!)

Rule 01: Have a Strategy

Yes, a strategy. Try this checklist:

Is my plugin just for fun/demonstration purposes or for everyday use in the real world?
Am I writing it to contribute to the community, to promote myself or to earn income?
Can I afford the time to offer support to users?
Have similar plugins already been written? Check the WordPress Plugin Repository.

These questions are important because they impact on how seriously you need to take issues such as coding standards, updates, security, support and documentation. Even if you’re just writing a plugin for your own use or for the use of your colleagues, you need to think hard about how you’re going to go about it so that you don’t make a rod for your own back.

Rule 02: Use Consistent and Clear Coding Standards

Which do you prefer, this?

function parsefile($imagedata,$file){
if(!in_array($imagedata['mime'], array('image/jpeg','image/png','image/gif'))){
 $result['error']='Your image must be a jpeg, png or gif!';
 }elseif(($file['size']>200000)){
 $result['error']='Your image was '.$file['size'].' bytes! It must not exceed '.MAX_UPLOAD_SIZE.' bytes.';
 }
 return $result;
}

Or this?

/*
processes the uploaded image, checking against file type and file size
*/
function parse_file($image_data, $file){

 if(!in_array($image_data['mime'], unserialize(TYPE_WHITELIST))){

   $result['error'] = 'Your image must be a jpeg, png or gif!';

 }elseif(($file['size'] > MAX_UPLOAD_SIZE)){

   $result['error'] = 'Your image was ' . $file['size'] . ' bytes! It must not exceed ' . MAX_UPLOAD_SIZE . ' bytes.';

 }

 return $result;

}

Simple things like consistent spacing, indenting, informative variable naming and succinct comments are a good place to start. That’s the only difference in the examples above. WordPress has an excellent guide to coding standards. If you code to a standard your code will be easier to understand, edit and debug.

Use Namespacing

There are two ways to construct a WordPress plugin: as a bunch of functions or as a class. Keep in mind that the functions in your plugin get thrown into the global namespace with all the other non-namespaced functions, which means that if you have a function named plugin_init then it’s probably going to conflict with the same function written by someone else at some point. The obvious way to fix this issue is to prefix the function name with something unique. I like to use the first letters of my plugin name, so if I had a plugin called My Great Plugin, I would call the above function mgp_plugin_init, and the same for the rest of my functions.
But a better way is to create a class for your plugin, that way all functions will be namespaced under the name of the class and even better, you can now use short, common method (function) names.

class my_class{

 function hello_world(){

   return 'Hello World!';

 }

 function goodbye_world(){

   return 'Goodbye World!';

 }

}

Then you could access your class methods under the its own namespace:

$my_new_plugin = new my_class();

echo $my_new_plugin->hello_world();

echo $my_new_plugin->goodbye_world();

Rule 03: Take Security Seriously

Making your plugin secure is the single most important step to take, but many developers discount security or relegate it to the status of an afterthought. Don’t make that mistake.

Sanitize inputs, escape outputs

You should especially make yourself familiar with:

If you use a function such as wp_insert_post, WordPress will sanitize that data for you. Similarly, if you use the database methods $wpdb->insert or $wpdb->update, WordPress will sanitize the data. But if you choose to access the database more directly with something like $wpdb->get_result, then you should use wpdb->prepare to prevent sql injections of malicious code.
Instead of:

$admin_posts = $wpdb->get_results(
 "SELECT ID, post_title FROM $wpdb->posts WHERE post_status = 'publish' AND post_author = 1"
 );

You would use:

$admin_posts = $wpdb->get_results($wpdb->prepare(
 "SELECT ID, post_title FROM $wpdb->posts WHERE post_status = %s AND post_author = %d",
 'publish', 1
 ));

In the above example, %s is a placeholder for string input (publish) and %d is a placeholder for numeric input (1). You can use as many placeholders as you need.

Use Nonces for Form and URL Verification

It’s important to know that when a form or url is posted back to WordPress, that it was your WordPress site that actually generated it and not some third party or malicious agent. To take care of this aspect of security, we use nonces. A nonce is a number used once.
For a form, we generate a nonce field using wp_nonce_field that will be included in our form as a hidden field:

wp_nonce_field('my_nonce', 'my_nonce_submit');

Because it’s now a hidden field in our form, it’ll come back to us when the form is submitted. We can then check that the nonce is valid using wp_verify_nonce:

wp_verify_nonce($_POST['my_nonce_submit'], 'my_nonce') )

That will return true if the nonce verifies.
For a url (links in emails, browser urls), you can create a nonced url with wp_nonce_url:

$nonced_url = wp_nonce_url('http://my_site.com?action=register&id=123456', 'register_nonce');

That would create a url like this…
http://my_site.com?action=register&id=123456&_wpnonce=250d696dc6
…which you could send in a registration confirmation email. You would then check the incoming url for a nonce with the same id using the check_admin_referer function and proceed with verification if true.

if($_GET['action'] == 'register'){

 if(check_admin_referer('register_nonce')){

   if(verify_id($_GET['id'])){

     echo 'Registration verified!';

   }

 }else{

   echo 'Registration verification FAILED!';

 }
}

Rule 04: Access Web Services Intelligently

The internet is full of web services providing us with everything from weather forecasts to stock quotes to the latest tweets from Twitter. The most efficient way for a plugin to access remote data is to use the HTTP API which will handle your request in the background, using the most efficient of the five possible remote methods that PHP exposes. It’s like a one-stop shop for webservice access.
This uses the wp_remote_get method (a wrapper function of the HTTP class) to get a page body:

$page_data = wp_remote_get('http://site.com/page');

if($page_data['response']['code'] == 200){

 $body = $page_data['body'];

}

Same with wp_remote_post to login:

$args = array(
 'login' => 'login_name',
 'password' => 'my_password'
 );

$response = wp_remote_post('http://site.com/login', $args);

Rule 05: Internationalization

This doesn’t have to be a big deal but is essential if you want to reach the widest audience possible. At a minimum all you need do is prepare your plugin with the _e() and __() functions and worry about the texdomain afterwards.
It’s all explained very well in this wp.tutsplus article by Tom McFarlin and here at the WordPress codex.

Rule 06: Load Only What You Need

When you go away overnight, you don’t take as much with you as you would if you were going on vacation for a month. So treat your plugin the same way: only load the stylesheets, javascript and other scripts that you need for that page or section of the site. At the very least, don’t load admin scripts on the frontend and vice-versa.

if(is_admin()){

 //load my plugin stuff for the admin pages

}else{

 //load my plugin stuff for the frontend

}

Rule 07: Tidy Up After Yourself

When you activate a plugin, you will see a deactivate link appear in the plugins admin page. But deactivating only stops the plugin from functioning. After deactivation, you then get a delete link. The delete link is the key to tidying up after yourself. It should really be called uninstall.
If you create a file named uninstall.php in the same directory as you plugin, the code in this file will be run when the user clicks delete.

if(defined('WP_UNINSTALL_PLUGIN') ){

 //delete options, tables or anything else

}

The above code checks for the WP_UNINSTALL_PLUGIN constant which WordPress sets when you hit delete. Then you can proceed to delete any options or custom tables that your plugin created when it was activated.

Bonus Tips

Turn on debug

The WordPress debugger will find errors in your code that while they may not crash you plugin should still be corrected to make sure that you’re doing things correctly. So, turn on WordPress debug by placing this in your /wp-config.php:

define('WP_DEBUG', TRUE);

Study the WordPress function library

WordPress often has functions that will solve a programming task in one function that you may have written many lines of code to achieve. Check out the function library to make sure you’re not writing more code than you need to.

Get some peer review

Getting others to look at your code is a strong form of quality control. Other users will find faults that you haven’t noticed in your own testing. Don’t be afraid to post your code: everyone makes mistakes.

Don’t use deprecated functions!

WordPress is full of outdated functions that while still supported for current versions may not be in future releases. You may have used code from an old tutorial. Look it up in the WordPress codex to see if it is marked as deprecated. There will be a link to the newer function.

Use a good WordPress code forum

If you have a problem, ask others. There are plenty of forums for WordPress solutions. One of my favorites is WordPress Answers from the wonderful Stack Exchange network.

Take some pride in your work!

It’s easy to release a plugin with a rider that you take no responsibility for the effects of your code. Now, that’s a necessary given: you can’t be responsible for how your plugin will be used. But you can take a professional pride in how you go about your work. Always do your best. Your reputation will be the better for it."

Changing the Fonts of Your WordPress – Part 2: Theme Integration

2011-12-02T13:17:00.001+08:00

"WordPress continually proves itself time, time, and again that it has very few limitations, and is rapidly pushing itself to being, if not the best, but certainly the most versatile CMS available. Out of the box it is certainly not perfect, but you can change it however you want. In the previous tutorial, we went over how to add fonts to your theme via a plugin. Now, we’ll integrate font options directly into the theme’s options.

Again, we will be using Google Web Fonts because it’s easy, fast and, most importantly, free. With Google Web Fonts there is no need to worry about using the proper font formats, everything is handled by Google.

Step 1 Add a Settings Page

First, make sure you have a theme options page. If you don’t know how to make one, I suggest reading Create a Settings Page by Jarkko Laine. In this tutorial, I’m going to assume that you know the basics and build from there. So let’s go into our functions.php file and add a simple typography settings page:

add_action( 'admin_menu', 'my_fonts' );
function my_fonts() {
   add_theme_page( 'Fonts', 'Fonts', 'edit_theme_options', 'fonts', 'fonts' );
}

Step 2 Add the Form

Now that we’ve added a settings page, we have to code the callback function we’re using to render the page itself, which would be typography. All we need is a basic form that shows a dropdown of all the fonts that users can choose from and allow them to change it.

function fonts() {
?>
   <div class="wrap">
       <div><br></div>
       <h2>Fonts</h2>

       <form method="post" action="options.php">
           <?php wp_nonce_field( 'update-fonts' ); ?>
           <?php settings_fields( 'fonts' ); ?>
           <?php do_settings_sections( 'fonts' ); ?>
           <?php submit_button(); ?>
       </form>
   </div>
<?php
}

Okay, we’ve added our fonts form to the page, just some basic settings_fields, but WordPress has no idea. Now we use the admin_init action to initialize our settings and add the callbacks:

add_action( 'admin_init', 'font_init' );
function font_init() {
   register_setting( 'fonts', 'fonts' );

   // Settings fields and sections
   add_settings_section( 'font_section', 'Typography Options', 'font_description', 'fonts' );
   add_settings_field( 'body-font', 'Body Font', 'body_font_field', 'fonts', 'font_section' );
}

All we’re doing here is creating a settings section for our fonts forms and the field for a single font, you can add more if you want, in this tutorial I’m only going over the body tag. Just add more by copying that field and replace body with something else like h1. We also now have a setting called fonts, where we will be storing our font data/options. Let’s go ahead and define the callback functions, font_description and body_font_field.

function font_description() {
   echo 'Use the form below to change fonts of your theme.';
}
function body_font_field() {
   $options = (array) get_option( 'fonts' );
   $fonts = get_fonts();

   if ( isset( $options['body-font'] ) )
       $current = $options['body-font'];
   else
    $current = 'arial';

   ?>
       <select name="fonts[body-font]">
       <?php foreach( $fonts as $key => $font ): ?>
           <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>
       <?php endforeach; ?>
       </select>
   <?php
}

We have to get the font options that we just made in the init action and the fonts we have available, get_fonts(). Set the current font in the form to whatever is in the options, otherwise it’ll default to Arial. Then, use a foreach loop to go through our array of available fonts. You can also add a description or make it a brief tutorial on how to use it.

Step 3 Getting the Fonts

As you noticed in the previous snippet of code, we need to define the get_fonts() function to retrieve the fonts we need. You can either include the Google Webfonts or just stick with the basic CSS fonts. We’ll just use an array to store all of the fonts, and then distinguish them by their font name. You can do this with any fonts, but for the purposes of this tutorial, we’ll just be using Arial, Ubuntu and Lobster.

function get_fonts() {
   $fonts = array(
       'arial' => array(
           'name' => 'Arial',
           'font' => '',
           'css' => "font-family: Arial, sans-serif;"
       ),
       'ubuntu' => array(
           'name' => 'Ubuntu',
           'font' => '@import url(http://fonts.googleapis.com/css?family=Ubuntu);',
           'css' => "font-family: 'Ubuntu', sans-serif;"
       ),
       'lobster' => array(
           'name' => 'Lobster',
           'font' => '@import url(http://fonts.googleapis.com/css?family=Lobster);',
           'css' => "font-family: 'Lobster', cursive;"
       )
   );

   return apply_filters( 'get_fonts', $fonts );
}

Note: You are not limited to only using Google Webfonts. If you want to use a custom font that is hosted on your FTP or on Amazon S3, then replace @import with @font-face and change the url to where your font file is hosted.

Step 4 Add the CSS

Before you apply any of fonts in your CSS, you should remove all instances of Google Webfonts of in your CSS files. This way when we make the import call to get the Ubuntu font, we’re not wasting an extra 100 ms getting the Lobster font too.
Now that we have all of our fonts set, we have to create a wp_head action that adds the styling to your WordPress. If you are using this script for multiple tags, simply duplicate the code, just changing “body” to whichever tag you’re editing.

add_action( 'wp_head', 'font_head' );
function font_head() {
   $options = (array) get_option( 'fonts' );
   $fonts = get_fonts();
   $body_key = 'arial';

   if ( isset( $options['body-font'] ) )
       $body_key = $options['body-font'];

   if ( isset( $fonts[ $body_key ] ) ) {
       $body_font = $fonts[ $body_key ];

       print_ '<style>';
       echo $body_font['font'];
       echo 'body { ' . $body_font['css'] . ' } ';
       echo '</style>';
   }
}

We start by checking if a font is chosen in our options, if not, then set the font to our default, Arial. Now we print out the style tag, the import statement and our CSS code.

What You Get in the End

This is what you should’ve ended up with:

The final font options page.

Full Source Code

For anyone who is having some trouble putting it all together. Here is the full source code, ready to just paste into the functions.php file:

<?
// Changing the Fonts of Your WordPress - Part 2: Theme Integration
// Tutorial on WP Tuts
// by Fouad Matin
// Please credit this tutorial, by putting a link back to http://wp.tutsplus.com/tutorials/changing-the-fonts-of-your-wordpress-site-part-2-theme-integration/
// Enjoy!
add_action( 'admin_menu', 'my_fonts' );
function my_fonts() {
   add_theme_page( 'Fonts', 'Fonts', 'edit_theme_options', 'fonts', 'fonts' );
}
function fonts() {
?>
   <div class="wrap">
       <div><br></div>
       <h2>Fonts</h2>

       <form method="post" action="options.php">
           <?php wp_nonce_field( 'update-fonts' ); ?>
           <?php settings_fields( 'fonts' ); ?>
           <?php do_settings_sections( 'fonts' ); ?>
           <?php submit_button(); ?>
           </form>
       <img style="float:right; border:0;" src="http://i.imgur.com/1qqJG.png" />
   </div>
<?php
}

add_action( 'admin_init', 'my_register_admin_settings' );
function my_register_admin_settings() {
   register_setting( 'fonts', 'fonts' );
   add_settings_section( 'font_section', 'Font Options', 'font_description', 'fonts' );
   add_settings_field( 'body-font', 'Body Font', 'body_font_field', 'fonts', 'font_section' );
   add_settings_field( 'h1-font', 'Header 1 Font', 'h1_font_field', 'fonts', 'font_section' );
}
function font_description() {
   echo 'Use the form below to change fonts of your theme.';
}
function get_fonts() {
   $fonts = array(
       'arial' => array(
           'name' => 'Arial',
           'font' => '',
           'css' => "font-family: Arial, sans-serif;"
       ),
       'ubuntu' => array(
           'name' => 'Ubuntu',
           'font' => '@import url(http://fonts.googleapis.com/css?family=Ubuntu);',
           'css' => "font-family: 'Ubuntu', sans-serif;"
       ),
       'lobster' => array(
           'name' => 'Lobster',
           'font' => '@import url(http://fonts.googleapis.com/css?family=Lobster);',
           'css' => "font-family: 'Lobster', cursive;"
       )
   );

   return apply_filters( 'get_fonts', $fonts );
}
function body_font_field() {
   $options = (array) get_option( 'fonts' );
   $fonts = get_fonts();
   $current = 'arial';

   if ( isset( $options['body-font'] ) )
       $current = $options['body-font'];
   ?>
       <select name="fonts[body-font]">
       <?php foreach( $fonts as $key => $font ): ?>
           <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>
       <?php endforeach; ?>
       </select>
   <?php
}
function h1_font_field() {
   $options = (array) get_option( 'fonts' );
   $fonts = get_fonts();
   $current = 'arial';

   if ( isset( $options['h1-font'] ) )
       $current = $options['h1-font'];

   ?>
       <select name="fonts[h1-font]">
       <?php foreach( $fonts as $key => $font ): ?>
           <option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>
       <?php endforeach; ?>
       </select>
   <?php
}

add_action( 'wp_head', 'font_head' );
function font_head() {
   $options = (array) get_option( 'fonts' );
   $fonts = get_fonts();
   $body_key = 'arial';

   if ( isset( $options['body-font'] ) )
       $body_key = $options['body-font'];

   if ( isset( $fonts[ $body_key ] ) ) {
       $body_font = $fonts[ $body_key ];

       echo '<style>';
       echo $body_font['font'];
       echo 'body  { ' . $body_font['css'] . ' } ';
       echo '</style>';
   }

   $h1_key = 'arial';

   if ( isset( $options['h1-font'] ) )
       $h1_key = $options['h1-font'];

   if ( isset( $fonts[ $h1_key ] ) ) {
       $h1_key = $fonts[ $h1_key ];

       echo '<style>';
       echo $h1_key['font'];
       echo 'h1  { ' . $h1_key['css'] . ' } ';
       echo '</style>';
   }
}
?>

Conclusion

By now, you should know how to add a font settings page, get fonts from the Google Webfonts directory, and apply those fonts to the theme. If you have any additional suggestions or questions regarding custom typography, feel free to leave a comment!"

Top WordPress Plugins from CodeCanyon: November Edition

2011-11-18T10:42:00.001+08:00

"WordPress is a powerful content management system, and the vast array of plugins available certainly helps. CodeCanyon has long been a great place to find top WordPress plugins. From content and security to galleries and sliders, there’s plenty to choose from. Here’s a quick rundown of some of the most popular WordPress plugins available at CodeCanyon.

1. UberMenu

UberMenu is a user-friendly, highly customizable mega menu ( or mega drop down menu ) WordPress plugin. It works out of the box with the WordPress 3 Menu Management System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

2. uBillboard Slider

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch. This has enabled us to integrate many features that you have been requesting during the first year.

3. WordPress Video Gallery

The most advanced stock video gallery in the world! Now as a WordPress plugin!

4. Styles with Shortcodes

This plugin lets you customize content faster and easier than ever before by using Shortcodes. Choose from 100 built in Shortcodes!

5. Lightbox Evolution

Lightbox Evolution is a tool for displaying images, html content, maps, and videos in a “lightbox” style that floats overtop of web page. Using Lightbox Evolution, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

6. Font Uploader

This plugin lets you upload your own font files and apply them to any element of your website without requiring a knowledge of html or css.

7. Custom Backgrounds

With WordPress 3.0 a new feature was introduced called custom backgrounds for WordPress themes. This feature gives you the ability to add custom backgrounds on your site, which will give your site a unique touch.

8. WordPress Email Newsletter

Easily send mass emails to your existing wordpress user database.

9. 5 Second Google Maps

Simple Google Maps integration with no API keys, no setup and no code editing.

10. Special Recent Posts

It’s the perfect solution for online magazines or simple blogs and it comes with more than 60+ customization options.

11. Security Ninja

Years of industry’s best practices on security combined in one plugin! Perform 25+ security tests including brute-force attacks.

12. Visual Composer

Add columns/elements with one click, then use your mouse to drag elements around to re-arrange them. Control element width with simple mouse clicking.

13. Foobar Notification Bars

A WordPress plugin for adding great looking notification bars to your site.

14. SocialPop

This plug-in adds social media sharing options under the content section on WordPress Posts and Pages. Currently supports sharing for 26 of some of the most popular social media sites.

15. Estro Slider

We have added a custom admin panel which will allow you to customise all aspects of your slider without having to touch a line of code. Drag n drop arranging of your slides, multiple slider insertion, skin selection, Ken Burns customisation, you name it, we’ve included it.

16. Premium Pricing Tables

WP Mega Tables are the perfect solution for those who are in need of a well designed and more importantly a easy to use pricing table in there wordpress themes.

17. Flip Book

Flip Book WordPress Pluginis based is on XML Flip Book / AS3 one of the three top selling items of all times on ActiveDen . It has been built from scratch. Almost everything you see on the page is easily customizable through the WordPress administration panel – easy installation, no coding skills required.

18. jGallery

The jGallery WordPress Plugin gives you a simple and customizable way to create a gallery on any post, page, or sidebar. You have the option to use widgets, shortcodes, or to manually insert your gallery directory into the template files.

19. Ninety Ajax Login/Register

Our Sidebar Login/Register plugin for WordPress does exactly what it says on the tin; Logins and Registrations with a touch of AJAX magic. Simple! It also has a nice ‘logged in’ view, and a lost password form for those forgetful folk.

20. Slider Evolution

Slider Evolution is a JQuery plugin that lets you easily create powerful javascript sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!"

PHP for WordPress: Mastering Conditional Statements and Tags

2011-11-18T10:19:00.001+08:00

"The conditional statements feature is an extremely useful and powerful feature in WordPress; still it remains unused in the development process. You can achieve many things by the simple and smart use of these statements. Sometimes when you need specific text or a unique image to appear on a specific page and not on any other pages in your site, by using conditional statements along with WordPress conditional tags you can achieve this easily without creating multiple pages or templates.

What are Conditional Statements?

PHP “If” statements are generally known as conditional statements. These statements are used within WordPress Theme files along with certain WordPresss functions defining the logic to inform the WordPress database what and how the content should be displayed based on a given criteria. These statements are very important in defining WordPress themes and are similar to creating template hierarchy.
Basic Conditional Statements look like this:

<?php if ( ) { ?>......<?php  } ?>

In layman’s terms, this is pretty simple:

If “something” exists/happens/etc., Do something.

You can (and probably will) use this type of general “if” statement inside WordPress all the time. WordPress has it’s own set of conditional statements as well though, so let’s take a peek at what those look like:

A List of Important WordPress Conditional Tags

Different types of Conditional Tags exist within Conditional Statements. These tags fetch particular information from the WordPress database. These conditional tags are defined for many different items in WordPress e.g. posts, tags, texts, images, categories etc.
Some of the most popular ones are-
1.is_page() - If you want to apply a certain condition to one of your specific page, e.g. “Contact Us” page. You can use this tag to refer to that page using its database ID number or title or slug/name. For instance:

is_page(’2')
or
is_page(‘Contact”)

2. is_category() – If you want to apply a certain condition to a specific category page e.g. Books, then this tag can be used to refer to that page using its database ID number or title or slug/name. For instance:

is_category(“4”)

3. is_home() – This is used to refer to your home page.
4. is_single() – This is used for single page blogs, single posts or attachments.
5. is_tag() – This is used to refer to a tag archive page. It works similar to category page.
6..is_archive() – This is used to refer to archived pages.
7. is_search() – This is used to refer to search results pages.
8. is_404() – This is used to refer to a HTTP 404: Not Found error page.
9. is_author() – This is used to refer to an author archived page.
10. is_comments_popup() – This is used to refer to a comment popup window.
You can get the complete list of tags on the WordPress Codex page.

Learning by Example

This is all fine and well in theory, but let’s dig into some practical code examples of these conditional statements in action.

Example #1:

What should be the code to display an image on your first page, nothing on the second and some text on the third page? (These pages are hypothetical, you can replace them with your own page names, like Contact Us, About, Information, etc…)

<?php  if ( is_page('First_Page') ) { ?>
 <img src="image.gif" />
 <?php  } elseif ( is_page('Third_Page') ) { ?>
 <p>Here is some text….</p>
 <?php  } else { ?>
 <?php  } ?>

Please Note-
These codes should be written in your writable theme editor on the page.php file where you want the conditional content to appear.
Extra Note: This is a multi-conditional statement (see the multiple “if, elseif, else…” running logic?) This code checks for the appropriate page using the tags and then displays the items accordingly. You can use unlimited conditions within a code.
is_page(array(‘First_Page’,’Second_Page’)) can be used to display something on both the pages.

Example #2:

How to display a text on either a single post OR a particular category page?
Here you need to use the “||” symbol to display something if any one of the given condition is met. If no condition is satisfied, it displays nothing.

<?php  if(is_category(Category_Page) ) || ( is_single(Single_Page))  { ?>
 <p>Display  this text….</p>
 <?php  } else { ?>
 <?php  } ?>

Extra Note: We used the “||” here, which checks for any of the conditions… Alternatively, we could use the “&&” to create an AND condition, in which both the condition must be met in order to display the item. The “!” is used for excluding something from the list.
E.g. !( is_page(Excluded_PageName)). You can also use variables to refer to the sub pages of a parent page. E.g. post->post_parent=="Parent_Page_Name"

Example #3:

How to load other items like CSS files, Java Script files in one of my pages?

This code snippet will show you how to display contact form files only on your Contact Us page.

<?php  if ( is_page( 'contact_us_page' ) ) {   ?>
 <link  rel='stylesheet' href='/contactusform.css' type='text/css' media='all' />
 <script  type='text/javascript' src=k'/jqueryform.js'></script>
 <script  type='text/javascript' src='/spec_forms.js'></script>
 <?php  } ?>

Example #4:

How to use conditional tags in your custom post types?

The mixture of custom post types and conditional tags makes a smart way to display information to the users. The following code snippet will enable you to display contact information at the end of your review posts.

<?php  if ( review_entry' == get_post_type() ) { ?>
 <div  id="reviewcontact">
 <p>If  you're impressed by the  reviews, kindly  contact us asap. Give us a call or <a href="/contact"  title="Contact Us">CLICK HERE</a> to send us a message!</p>
 </div>
 <?php  } ?>

Example #5:

How to check if a “post thumbnail” image has been uploaded or not?

The following code checks for an image and display another if not found.

<?php  if(posted_thumbnail()) {
 show_thumbnail();
 }  else {?>
 <img src="<?php  bloginfo('template_directory');?>/images/default_Image.gif" alt="Image not Displayed">
 <?php  }?>

Conclusion

Thus by mastering these little conditional tags and mixing them with php conditional statements, you can write less and do more in your WordPress site. This not only helps you during the maintenance of your site but it also helps to take advantage of the highly useful WordPress database architecture.
If you guys want to see more of these “basic PHP” tutorials for WordPress, let us know in the comments!"

Load jQuery From Google CDN With Local Fallback For WordPress

2011-11-17T12:30:00.000+08:00

"In this tutorial we are going to cover why loading jQuery from the Google CDN with a local file fallback is important, and how to set this up for WordPress. If you’re still trying to self-host your own copy of jQuery (or lots of other script libraries for that matter!), this is a great way to quickly improve your workflow.

Introduction

When I first took a look at HTML5 Boilerplate there was this great code snippet for loading jQuery from the Google CDN with a local file fallback.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.4.min.js'>\x3C/script>")</script>

This was the greatest thing I’d seen on the topic of loading scripts for a while… Unfortunately, this doesn’t play well with WordPress, because we should be loading our JavaScripts using wp_enqueue_script, which we recently looked at in this article on using enqueue to properly load scripts inside WordPress.

So, here’s a way to accomplish the same thing in WordPress.

Why Use a Local Fallback File?

Why would I use a local fallback file at all?

The first reason for using a local file fallback is for your local development environment. Internet access isn’t always available when you’re working on your project. Let’s say you work for a web development firm and the companies internet server goes down. If you’ve been working on a script that is jQuery dependent, and you’ve been calling jQuery from the Google CDN. Well, you’re out of luck. Even if you have jQuery cached, eventually you’ll have to clear the cache to make sure the site is rendering properly, or switch to another browser to check cross compatibility.

At that point, you might as well take a long lunch. Which I’m sure your manager won’t be too pleased with. If you’re getting paid by the hour, no internet access isn’t an excuse for not working.

The same could be said if you were at home and the internet went down… or if you traveled to the latest WordCamp and couldn’t get internet access in your hotel. There’s nothing more annoying than being in the zone and having to stop just because you can’t load jQuery.

The second reason is what if Google goes down. Besides the usual rioting in the streets, airplanes falling from the sky, and a plague of frogs. Your site will break, and we can’t have that. The rest we can deal with. Just find a, out of the way, cave and cook up some frog legs.

Seriously though, it’s not likely that Google will ever go down. Google is so big that I’m sure they have backup servers for their backup servers, but you never know. Isn’t better to have a backup of you own, just in case?

Step 1 Where to Start

The script is going to be placed in you functions.php file.

The first thing we need to do is define some variables

<?php
$url = 'http://ajax.googleapis.com/ajax/libssss/jquery/1.6.4/jquery.min.js'; // the URL to check against
$test_url = @fopen($url,'r'); // test parameters
?>

$url is the URL the script is going to use to test against. In this case, we’re testing is the jQuery file on the Google CDN.

$test_url is setting up the parameters for the test.

Step 2 Setting up the Test

Now, let’s set up the main part of the test

<?php
if($test_url !== false) { // test if the URL exists
   //load the external script
} else {
   //load the local script
}?>

if($test_url !== false) is testing to see if it can open the URL we defined in the variable $url. If it can it will load the external script on the CDN. Else, if can’t open the URL it loads the local script on your server.

Step 3 Loading the External Script Function

Here we add the function to load the external CDN file

if($test_url !== false) { // test if the URL exists
   function load_external_jQuery() { // load external file
       wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery
       wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'); // register the external file
       wp_enqueue_script('jquery'); // enqueue the external file
   }
 add_action('wp_enqueue_scripts', 'load_external_jQuery'); // initiate the function
}

wp_deregister_script deregisters the default jQuery that comes with WordPress. It’s usually an older version, so I like to use the the most recent version.
wp_register_script registers the external CDN jQuery with WordPress.
wp_enqueue_script will enqueue the newly register version.
add_action will initiate the function.

Step 4 Loading the Local Script Function

An else statement is used to load the local file is the test isn’t able to open the external CDN file

else {
   function load_local_jQuery() {
       wp_deregister_script('jquery'); // deregisters the default WordPress jQuery
       wp_register_script('jquery', bloginfo('template_url').'/js/libs/jquery-1.6.1.min.js', __FILE__, false, '1.6.4', true); // register the local file
       wp_enqueue_script('jquery'); // enqueue the local file
   }
 add_action('wp_enqueue_scripts', 'load_local_jQuery'); // initiate the function
}

This works the exact same way as the external file function. It deregisters the default jQuery, registers the local file, enqueues the local file, and initiates the function.

The Whole Script

Here’s the completed script

<?php
$url = 'http://ajax.googleapis.com/ajax/libssss/jquery/1.6.4/jquery.min.js'; // the URL to check against
$test_url = @fopen($url,'r'); // test parameters
if($test_url !== false) { // test if the URL exists
   function load_external_jQuery() { // load external file
       wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery
       wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'); // register the external file
       wp_enqueue_script('jquery'); // enqueue the external file
   }
 add_action('wp_enqueue_scripts', 'load_external_jQuery'); // initiate the function
} else {
   function load_local_jQuery() {
       wp_deregister_script('jquery'); // initiate the function
       wp_register_script('jquery', bloginfo('template_url').'/js/libs/jquery-1.6.1.min.js', __FILE__, false, '1.6.4', true); // register the local file
       wp_enqueue_script('jquery'); // enqueue the local file
   }
add_action('wp_enqueue_scripts', 'load_local_jQuery'); // initiate the function
}
?>

This Works with Other Libraries Too!

If jQuery isn’t your cup of tea, there’s a CDN for that as well. Be sure to check out the entire hosted scripts library that Google keeps track of: http://code.google.com/apis/libraries/devguide.html . You can load everything from MooTools to Prototype in pretty much the same way that we’ve described above.

jQuery 1.7 Is Out!

~~Since writing this article, jQuery 1.7 has been released onto the Google CDN.~~ (that’s a lie, we were promised this by November 7th, but we’re still in a holding pattern). Consider the MediaTemple CDN location instead if you want the latest and greatest version of jQuery for your WordPress projects: http://code.jquery.com/.

Conclusion

You can never be too careful and this script will alleviate of your worries about the jQuery library loading.

This can be expanded to include additional CDN resources. You can just add additional URL variables and else statements for additional CDN’s. You can also modified this to do the same test for your own CDN if you use it to load your CSS stylesheets."

5 Cardinal Sins of WordPress Theme Development

2011-11-17T10:58:00.001+08:00

"We talk alot on this site about tips and tricks for getting what you want out of WordPress… but today we’re going to take a step back from the technical stuff to look at some practices, bad habits, and coding faux pas that would be better left in our past. So, forgive the heavy-handed post title (haha!), we’re about talk bring up 5 surprisingly common practices that are blemishes on the platform.
Two of the nicest things about working on WordPress Themes is that fact that we get to target in an incredibly flexible environment (that is, the web) and we have solid documentation to help guide us through the process (that is, the WordPress Codex).

After all, if the theme works, does clean, maintainable code matter?

But there’s a danger that exists in theme development, too: we can completely forgo best practices for working with the web and completely ignore the documentation. Specifically, there’s nothing that forces us to write clean, maintainable code. After all, if the theme works, does clean, maintainable code matter? Furthermore, why go through the effort of following WordPress best practices if the theme appears to work fine?
Weak arguments, right? I don’t know – the more I’ve worked in the WordPress space, the more I’ve been surprised which how much bad code actually exists. As such, I thought it would be fun to outline five cardinal sins of WordPress Theme Development.

Ignoring The WordPress Codex

As with most programming languages, frameworks, or libraries, WordPress includes a massive amount of documentation. The WordPress Codex is arguably the best resource that developers have for working with WordPress. After all, it provides documentation for the majority of the application.
But the WordPress Codex often goes above and beyond standard documentation – in addition to supplying function names and parameters, the Codex provides rich examples for how to use many of the API functions. After reading any given article, you’d be hard pressed not to find a clear example of how to the function in question.
In addition to the API, the Codex also features a variety of other articles related to development:

Whenever I’m working on a theme or a plugin and I hit a point where I think I need to write a custom function to achieve something, I’ll search the Codex first. The majority of the time, a function is already available that helps with what I need.
Every serious WordPress Developer should regularly use the Codex when working on any WordPress-related development project. Ignoring it can often lead to creative, but untested and unstable solutions that can cause more harm down the line than good.

Not Localizing Your Theme

A few years ago, if you were to ask me my thoughts on localizing a WordPress Theme, I would’ve said that it would depend on the marketing that you’re targeting. That is, if you think the audience is going to use a language other than your own, definitely do it; otherwise, there’s nothing wrong with leaving the theme translated in your own language.
Fast forward a few years and WordPress’ is powering millions of sites on the Internet. Sites all over the world are using the application to drive their site’s content. On top of that, it’s becoming increasingly common for developers to supplement their income or even make a living off of working with WordPress.
Because WordPress has been so widely adopted and because the Internet has made the world so flat, the market for any given theme is not limited to a single language. On top of that, WordPress makes it so incredibly easy to localize your theme and it requires so little extra effort, that I now argue that localizing your theme is no longer optional.
For the most part, you need to understand three things:

The __() function
The _e() function
POEdit

Other than that, there’s very little extra overhead that comes with localizing a theme; however, I do recommend that you take a look at the Translating WordPress article in the Codex. It outlines the three things above and goes more in-depth on each.

Theme File Disorganization

Developers talk a lot about code organization and maintainability. Personally, I think that it’s much easier to give lip service to those principles than actually follow through with them, but they are important.
The thing is, they look different for each project type. Some applications are written in a single language and run on a desktop, some applications use two languages and run on a mobile device, other projects – such as WordPress Themes – can use anywhere from three (HTML, CSS, and PHP) to four (through JavaScript) languages. Additionally, certain components of the theme run on the client side, some run on the server side, some community directly with WordPress, and others communicate directly with the database.
To say that there’s potential to sacrifice maintainability is an understatement.
But it doesn’t have to be problematic as there are certain standards that WordPress suggests for organizing your theme files. Specifically, the Codex details how to organize your PHP template files, your stylesheets, JavaScript sources, and images.

Template File Checklist provides a listing of the files that compose a basic a theme and details what each should include.
Template Hierarchy provides an explanation for how all of the theme files fit together and how WordPress renders each during its page lifecycle.
Stepping Into Templates also provides a detailed breakdown of templates and the WordPress page structure for each.
Theme Development is a massive article that encompasses everything surrounding theme development.

Sure, it takes a little extra effort organize your files rather than just doing enough to “get it working,” but the dividends payout over time as you begin working on the next version of your theme or as multiple developers begin to work on the same codebase.

Disregarding Coding Standards

Of course, file organization is only part of the development process that affects organization and maintainability. Next, we have to focus on how we actually write the code that resides in our files.
After all, not only should we want to provide well-organized files, but easy-to-follow, standard-compliant code as well. Again, the WordPress Codex provides standard set for the major languages that contribute to a theme’s codebase:

A lot to process, huh? The thing is, spending time familiarizing yourself with all of the above pays dividends over time. Applying these standards at the beginning of development is exponentially cheaper than having to refactor an existing theme or plugin.
Additionally, it results in contributing better code back to the community.

Not Testing Your Work

After a theme has been developed and is ready for release, you should do – at the very least – a single of testing. That is, you should verify that the various styles of post data are formatted correctly, that your theme isn’t using any deprecated functions, or that it’s using any functions incorrectly.
Luckily, the Codex provides a number of suggestions and tools to help make this process much easier.

Debug mode helps to iron out any PHP warnings and/or errors
The Theme Unit Test is a data file including pre-formatted post data for you to run against your local development environment
Theme Check is a plugin that will examine that codebase of your theme and provide notes on what needs to be addressed as well as recommendations for improving the codebase.

Of course, there’s also additional testing you can do such as cross-browser testing, HTML/CSS standards compliance, and so on. The Codex outlines even more testing suggestions in the Theme Testing Process article.

What Are Your Own Pet Peeves?

They say that you often learn from your mistakes and I’ll be the first to admit that during my time with WordPress, I’ve broken every one of these. But, like the rest of the development community, you learn and you begin building better projects with experience.
This is the first of this type of “WordPress culture” articles that we’ll be posting on the site… so share your own experiences below – or better yet, write about them at length and we’ll publish it if it’s great!
That said, this is certainly not the definitive list and I’m sure there’s more to add (we haven’t even touched hacking the core, harassing the database, or hard coding elements that should have options). Drop your own pet peeves in the comments!
What are some of the most annoying, harmful, or unsustainable practices that you’ve come across?"

Quick Tip! 9 Handy WordPress Code Snippets (That You Really Should Know!)

2011-10-24T20:07:00.001+08:00

"Here are some short but handy code snippets that may make your life as a WordPress developer a little easier. We’ll cover a little bit of everything, from how to automatically delete posts, how to quickly dish out a post thumbnail, to how to redirect users once they’ve logged in. Open up your text-replacement program and get ready to add a few new shortcuts!

We’ll start off with a few simple one-liners.

1. Hide The Front-End Dashboard Bar

Since v3.1, WordPress has provided a front-end admin bar for all users. Depending on your intent, this can detract from the look of your site. To disable it, use the show_admin_bar function:

show_admin_bar(FALSE);

You can also disable this from your User Profile, but this is especially useful if you’ve got a ton of authors/members on the site and you need to disable the bar altogether.

2. Empty Trashed Posts Automatically

Trashed posts can build up if you forget to delete them permanently. Use this code in /wp-config.php to empty your trashed posts:

define('EMPTY_TRASH_DAYS', 5 );

3. Turn On WordPress Internal Debugger

When you’re developing, you need to see the errors your code is throwing up. Keep in mind that not all errors stop a script from executing but they are errors nevertheless, and they may have strange effects upon your other code. So, turn on WordPress debug by placing this in your /wp-config.php:

define('WP_DEBUG', TRUE);

You may be amazed by what you see in the footer. Remember to turn debugging off when your site is ready to go public. Debug info can be valuable to hackers.

4. Redirect Users After They Login

When a user logs in, they normally get sent straight to their dashboard. This may not be the experience you want your users to have. The following code uses the login_redirect filter to redirect non-administrators to the home page:

add_filter("login_redirect", "subscriber_login_redirect", 10, 3);

function subscriber_login_redirect($redirect_to, $request, $user){ 

 if(is_array($user->roles)){

   if(in_array('administrator', $user->roles)) return home_url('/wp-admin/');

 }

 return home_url();

}

Based on the user’s role, you could send them to any page you like.

5. Show A Default Post Thumbnail Image

Since v2.9, WordPress has provided a post thumbnail image option, just like the images you see here on wp.tutsplus. On the admin post page it’s called ‘Featured Image’. But if you don’t have an image for your post, you can simply call a default image.
Within the loop:

if(has_post_thumbnail()){

 the_post_thumbnail();

}else{

 echo '<img src="' .  get_bloginfo('template_directory') . '/images/default_post_thumb.jpg" />';

}

check if the post has a thumbnail with has_post_thumbnail
if so, display it with the_post_thumbnail()
otherwise, generate an img tag for you default thumbnail image

You could even have a bunch of default images and pick one at random

6. Show “Time Ago” Post Time For Posts And Comments

Instead of: Posted on October, 12, 2011, we can have: Posted 2 days ago.
As used in the loop:

echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago';

human_time_diff() converts a timestamp value to a friendly form
get_the_time() gets the time the post was made, with ‘U’ parameter gets value as a Unix timestamp
current_time() gets the current time, with ‘timestamp’ parameter gets value as a Unix timestamp

Use it on comments as well:

echo human_time_diff(get_comment_time('U'), current_time('timestamp')) . ' ago';

Or maybe show the regular date/time of the post only if more than a week ago, else show the time ago:

$time_diff = current_time('timestamp') - get_the_time('U');

if($time_diff < 604800){//seconds in a week = 604800

 echo 'Posted ' . human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago';

}else{

 echo 'Posted on ' . get_the_date() . ', ' . get_the_time();

};

7. Style Post Author Comments Differently

It’s nice for users to be able to see when the author of a post makes a comment on the post, just like we do here on wp.tutsplus. All we have to do is add a class to the comment wrapper and then style it in the theme.
In order to find which comments are made by the post author, we use this code to output a class name:

if($comment->user_id == get_the_author_meta('ID')){

 echo '<div class="comment_wrapper author_comment">';

}else{

 echo '<div class="comment_wrapper">';

}

We compare the user ID of the comment with the post author ID from get_the_author_meta. If they match, we echo a class of author_comment which we can then style with css.

8. Show User, Post And Comment Info For Your WordPress Site

You can query your WordPress database directly to show handy site info. Put this function in your functions.php and call it anywhere in your template files with get_site_data()

function get_site_data(){

 global $wpdb;

 $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");

 $posts = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->posts WHERE post_status = 'publish'");

 $comments = $wpdb->get_var("SELECT COUNT(comment_ID) FROM $wpdb->comments");

 echo '<p>' . $users . ' members have made ' . $comments . ' comments in ' . $posts . ' posts</p>';

}

This is better than calling some of the native WordPress functions as it counts all post types and only currently published posts.

9. Add A JavaScript File Correctly

WordPress gives us the wp_enqueue_script function so we can add scripts safely.
Say we have a scripts dir under our template dir, and in there we have a script called do_stuff.js. So we have url_to_template_dir/scripts/do_stuff.js
Let’s include our script the right way. This must be included before the wp_head call in your header file:

$script_url = get_template_directory_uri() . '/scripts/do_stuff.js';

wp_enqueue_script('do_stuff', $script_url);

Here we concatenate our script path and name onto the output of the WordPress get_template_directory_uri function. We then enqueue the script by providing a handle (for possible later reference) and the url to our script. WordPress will now include our script in each page.
The real advantage to all of this is that, say our do_stuff script was a jQuery script, then we would also need to have jQuery loaded.
Now, jQuery is included by default in WordPress, and has been pre-registered with the handle jquery. So all we need do is enqueue our jQuery, then enqueue our do_stuff.js, like this:

wp_enqueue_script('jquery');

$script_url = get_template_directory_uri() . '/scripts/do_stuff.js';

wp_enqueue_script('do_stuff', $script_url, array('jquery'));

Note the third parameter to wp_enqueue_script for do_stuff: that tells WordPress that our do_stuff script is dependent on the file with the handle jquery. This is important because it means that jquery will be loaded before do_stuff. In fact, you could have the enqueue statements in reverse order and it wouldn’t matter since defining a script’s dependencies allows WordPress to put the scripts in correct loading order so that they all work happily together."