Note: This tutorial requires that you are somewhat familiar with WordPress theming, and know fairbits of HTML / CSS.

When you open your index.php file, or another file with a loop, you will normally see something a div with post-id, but we are adding a new variable post_class to it like shown in the example below:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

By adding this function in the div, each of your posts will get specific css classes added to them which will allow you to modify the looks of your WordPress posts via CSS. The following classes are added by default:

• .post-id
• .post
• .attachment
• .sticky
• .hentry (hAtom microformat pages)
• .category-ID
• .category-name
• .tag-name

An example output would look like this:

<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in">

So if you open your style.css file and add the class .category-dancing, you will be able to make your posts from the dancing category look different in the post.

.category-dancing{background: #97c3e1; border: 1px solid #84aac4;}

This will make your dancing category posts have a blue background with a dark blue border. You can further this by adding a different link class for .category-dancing etc. You can use the same technique to make posts with a specific tag look different.

But for someone who is looking to really customize the look of their site might need additional controls in terms of classes. Well, you can specify the classes if you wish like so:

<?php post_class('class-1 class-2'); ?>

But, how will this work on a dynamic platform like WordPress? So let’s look at some examples of how you can add classes to make your posts look different.

Style Posts Based on Authors

Often you will see that blogs highlight author’s comment differently. Well for multi-author blogs, it might be a good idea to give each author’s post a different style altogether. So in this example, we will give each post it’s own styling based on author’s first name. So in your index.php or another file (archive.php / category.php etc), lets get the author’s first name value by adding this code BEFORE the loop:

<?php $author = get_the_author_meta('display_name'); ?>

The code above is getting author’s display_name which can be selected in user’s profile area, and it is assigning the value with $author variable. Now that we have a dynamic class value created, we can add it in our post_class code like this:

<?php post_class('class-1 class-2 ' . $author); ?>

Note: You do not have to keep class-1 and class-2. That is just if you want to add static classes. So your code should output something like this:

<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-1 class-2 Syed">

Notice that Syed is added in final output. The name will be different on each post based on the author’s display_name. You can then style each class in your CSS like so:

.Syed{border: 1px solid #000;}
.Zain{border: 1px solid #d88b3d;}
.Dronix {border: 1px solid #4781a8;}

Then each post in the loop with these authors will be styled differently. You can further the individual styling using the technique above for other authors on your site.

Style Posts Based on Popularity using Comment Count

You have seen sites with popular posts widgets, which are mostly based on comment counts. Well in this example, we will show you how to style posts differently using the comment count. First thing we need to do is get the comment count and associate a class with it. To get the comment count, we need to paste the following code INSIDE the loop:

<?php
	$postid = get_the_ID();
	$total_comment_count = wp_count_comments($postid);
		$my_comment_count = $total_comment_count->approved;
	if ($my_comment_count <10) {
		$my_comment_count = 'new';
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count = 'ermerging';
	} elseif ($my_comment_count >= 20) {
		$my_comment_count = 'popular';
	}
?>

In the code above we are adding classes based on a scale. If the post has less than 10 comments, then the class ‘new’ will be added. If the post has greater than 10 comments and less than 20 comments, then the class ‘emerging’ will be added. If the post has greater than 20 comments, then the class ‘popular’ will be added. You may change this scale based on your site’s average comment rate.

So your post_class code will look like this:

<?php post_class('class-1 class-2 ' . $my_comment_count); ?>

Then you can create the following classes in your style.css file:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

Notice that we are only changing the border colors, but you can go in much more depth with this including adding a custom background image, background color etc. This will spice up your theme and make the blog page stand out.

Want more control over the CSS classes? Well then we can look at a way that you can assign classes via Custom fields.

Style Posts based on Custom Fields

You can add specific classes via post custom fields. So for example, it is your blog’s anniversary and you want the anniversary post to look different. You can create a custom field and give it the name ‘post-class’ and then add the value ‘anniversary’. Once you add this custom field and save the post, this value is stored in your database. Now we can pull it from our loop using the code below:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Make sure you paste the code above INSIDE the loop. Then you will add the $custom_values variable to post_class function.

<?php post_class('class-1 class-2 ' . $custom_variable); ?>

Now you can go to your style.css file and add the class such as:

.anniversary{YOur Styling Goes Here}

This is by far the most control you will get with post_class function in terms of CSS styling. But sometimes, you want even more control. CSS classes lets you change the background and other stylistic elements, but you cannot change the entire structure this way. So let’s look at something a little bit more advanced which we like to call THE SUPER LOOP.

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>

 Add your Custom Post Divs Here for the 1st post. 

<?php elseif ($count == 2) : ?>      

 Add your Custom Post Divs Here for the 2nd post.          

<?php elseif ($count == 3) : ?> 

 Add your Custom Post Divs Here for the 3rd post.      

<?php elseif ($count == 4) : ?>  

 Add your Custom Post Divs Here for the 4th post.     

<?php else : ?>

 Add your Custom Post Divs Here for the rest of the posts. 

  <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

If you notice that we just created a loop above that lets you style each post based on count. This is very helpful when you want your first three posts to look different from the rest. For example, your first three posts can be one column posts whereas the rest will be smaller and in a two column list. You can accomplish almost everything with the super loop. You can add your own queries and much more. If you are a developer, then this will be worth taking a stab at to push the limits.

Sources:

EpicAlex of ProblogDesign
WordPress Codex
Super Loop by Perishable

How to Style Each WordPress Post Differently is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Exclude Latest Post from the WordPress Post Loop
2. Allow Multiple Authors to Be Associated with a Post in WordPress
3. How to Display Any Number of Posts in a WordPress Loop

Admittedly, at first glance Beginning WordPress 3 looks daunting. At 400 pages, its length is pretty standard for a WordPress instructional book, but the sheer breath of what is covered within those pages is what is truly amazing. Leary says that she designed this book to “fill the gap” between beginner’s guides and developer’s guides and she succeeded at doing just that. Even though this book was published before the official release of WordPress 3, Leary manages to introduce WordPress, showcase the changes that version 3 brought to the table, and throw in a how to guide for theme and plugin development. Not too shabby in my opinion. While this could easily be a great book for a first introduction to WordPress, it could just as easily be a desk reference for an intermediate user who is trying to move up in the WordPress world.

One of the biggest strengths of this book is it’s design. Reading Beginning WordPress 3 is like reading a online tutorial. The sheer number of screen shots that Leary provides is unbelievable and does wonders for the confidence of a WordPress newbie trying to find their bearings in the WordPress ocean. Also, Leary’s decision to create the appendixes as a reference guide is such an improvement over the traditional method of listing recommendations mid-chapter. I highly recommend this book to any WordPress novices out there or really anyone who wants to dip their hands a little deeper into WordPress.

Ready to see what all the buzz is about? Get Beginning WordPress 3 now.

Beginning WordPress 3 Review is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. Professional WordPress Book Review
2. Digging into WordPress v3.0
3. Manage Your Ads in WordPress with OIO Publisher (Review)

You would need to open your theme’s functions.php file and add the following code within the PHP markup:

function myfeed_request($qv) {
	if (isset($qv['feed']))
		$qv['post_type'] = get_post_types();
	return $qv;
}
add_filter('request', 'myfeed_request');

This code modifies the query to keep the default content type for blog posts “post” in the main RSS feed, and also adding new custom post types.

But what if you have five custom post types in your new project, and you only want to add three to the main RSS feed? Well that shouldn’t be any problem because we will just modify the code slightly to give you the option to only include the ones that you want.

function myfeed_request($qv) {
	if (isset($qv['feed']) && !isset($qv['post_type']))
		$qv['post_type'] = array('post', 'story', 'books', 'movies');
	return $qv;
}
add_filter('request', 'myfeed_request');

If you see in the code above, we simply added an array to modify the post_types that will be shown in the main RSS feed. We are showing the default posts, story, books, and movies.

Source: Core Trac Ticket #12943

How to Add Custom Post Types to Your Main WordPress RSS Feed is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Make a Separate RSS Feed for Each Custom Post Type in WordPress
2. How to use Custom Post Types in WordPress 3.0
3. How to Create a Custom Post Types Archive Page in WordPress

You would think that it require a lot of coding, but it doesn’t. It works just like creating a separate RSS feed for each category in WordPress. You can simply type this URL:

http://www.yoursite.com/feed/?post_type=book

Just change the post_type name to the one that you want to create a separate RSS feed for. Are you looking to take it to the next level and make it for a specific custom post type and custom taxonomy? Well that is not hard at all either:

http://www.yoursite.com/feed/?post_type=book&genre=romance

As you can see in the code above, that genre would be the custom taxonomy, and romance would be the tag if you may call it that. You can create a button in your sidebar to link to that. You may also link this feed and create a separate feedburner feed for it.

How to Make a Separate RSS Feed for Each Custom Post Type in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Add Custom Post Types to Your Main WordPress RSS Feed
2. How to Make Separate RSS Feed for Each Category in WordPress
3. How to use Custom Post Types in WordPress 3.0

When Digg asks you to add the content in your RSS feed, it means for you to add it in your next post. So you will need to create a new post (doesn’t have to be about that service). It can be any post, and you need to add the code at the bottom of the post. For example, if your key is:

6ca1386293854e5d835d3f430df34700

then you will add:

<!–6ca1386293854e5d835d3f430df34700–>

The reason why you add the extra elements before and after is so this code is not shown to your users, but it is still added in the RSS feed. Once you add this code, you will have to wait for about 20 – 30 minutes for your feed to update (specially if you are using Feedburner).

The code can go anywhere, preferably at the bottom. Once your account is verified, you can remove the code from your post. If you are adding it in Digg this week, be sure to try it multiple times and let the page load fully before you click anything. Digg is very buggy as it is new. While you are on digg, don’t forget to follow WPBeginner on Digg.

How to Add Verification Codes to Your WordPress RSS Feed is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Add Custom Post Types to Your Main WordPress RSS Feed
2. How to Make Separate RSS Feed for Each Category in WordPress
3. How to Make a Separate RSS Feed for Each Custom Post Type in WordPress

Everything in the book is now hot-wired and fine-tuned to the latest version of WordPress, with new popouts and fresh links throughout the book. The beautiful colored pages, and ease of copying and pasting the codes make this eBook a fun resource to have. 20+ new pages are added in this release with a whole bunch of other stuff, including how to setup multi-site, custom post types / taxonomies, use the built-in shortlink feature, author templates, comment-form template-tags, and more of WordPress 3.0.

What do you get with this purchase?

Here’s what you get for $27:

• Beautiful, full-color, easy-to-read design
• Nearly 450 pages of practical, how-to WordPress content
• 3 Free Themes: All Ajax, Lines & Boxes, and Plastique from their Theme Club House.
• Free Lifetime Updates (current book owners received version 3.0 yesterday)
• Friendly, helpful customer support

Well for being a WPBeginner user, you get a discount so this book will cost $27 $23 when you use the coupon: “WPBeginnerDIW“.

Buy this book now and you won’t look back.

Digging into WordPress v3.0 is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. Lucky Winners for Digging into WordPress Book Giveaway
2. Giveaway – Get Your Free Copy of Digging Into WordPress Book
3. Beginning WordPress 3 Review

1. Creating a Custom Page Template

First step would be creating a custom page template in WordPress. All we will do is add the following code at the top of our new .php file which we will call (custompt-archives.php).

<?php /* Template Name: Custom Post Type Archive */ ?>

2. Adding the Necessary Template Codes

Next, you will need to add the necessary template codes including but not limited to header, footer, sidebar etc. This area will vary for each site, but for basics it would look like this:

<?php get_header(); ?>
This is where our Loop codes will go in the next step.
<?php get_sidebar(); ?>
<?php get_footer();?>

3. Creating our Custom Archive Loop

The loop is explained in details at the WordPress Codex, and we will be using different aspects of it to create our custom archives loop. Our loop will simply list posts with the necessary information surrounding it. You will be responsible for adding styling around it. Our loop:

<?php
global $query_string;
query_posts($query_string . "post_type=YOUR-CUSTOM-POST-TYPE&post_status=publish&posts_per_page=10");
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>

<?php endwhile;
endif; ?>
<div class="navigation">
	<div class="alignleft"><?php next_posts_link('Previous entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Next entries') ?></div>
</div>
<?php wp_reset_query(); ?>

You can change the number of posts being displayed on the page by changing posts_per_page variable value.

Final Code

Your final code for the custom page should look like this:

<?php /* Template Name: Custom Post Type Archive */
get_header(); ?>

<?php
global $query_string;
query_posts($query_string . "post_type=YOUR-CUSTOM-POST-TYPE&post_status=publish&posts_per_page=10");
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>

<?php endwhile;
endif; ?>
<div class="navigation">
	<div class="alignleft"><?php next_posts_link('Previous entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Next entries') ?></div>
</div>
<?php wp_reset_query(); ?>

<?php get_sidebar(); ?>
<?php get_footer();?>

Now upload this file in your theme’s directory. After you have done that, you need to go to your WordPress admin panel, and create a new page. Call it “Your Custom Post Type” Archives (or whatever you like to call it) and change the page template to “Custom Post Type Archive” as shown here. Do not add anything in the page content area, and simply publish the page. You should now have a custom post types archive page in WordPress.

How to Create a Custom Post Types Archive Page in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Create a Page that Displays a Random Post in WordPress
2. How to use Custom Post Types in WordPress 3.0
3. How to Create a Custom Page in WordPress

This was a twitter-exclusive contest where users were required to tweet about the contest and post a comment with their twitter link. Last requirement was that they must follow @wpbeginner on twitter, so we could notify them via Direct Message.

Winners were selected randomly. Each entry was assigned a number, and the chosen ones received our Direct messages.

Contest Winners:
@OneJason
@arielmariani
@melowout
@peterlandt
@raksakaindra
@z3olyte
@thefunkhouse
@albertalbs
@poliquinp
@satryaWp

There were 85+ entries in the contest, so a lot of you did not get the chance to win. Impact Page Builder is an awesome plugin and it was tweeted by some of the top bloggers including us and @problogger. We have worked out a deal with them to offer WPBeginner users an exclusive 20% discount if you go through our link and use the coupon “wpbeginner“. (Just click on the coupon and buy it). This is a limited time discount, so grab it now while it is available.

Lucky Winners of Impact Page Builder WordPress Plugin Giveaway is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. Giveaway – Get your Free Copies of Impact Page Builder for WordPress
2. Lucky Winners for Templatic WordPress Themes Giveaway
3. Lucky Winners of ThemeJam WordPress Theme Giveaway

Before you begin, we want you to download the YSlow Addon for Firefox and run it for your site. Write down the load time of your homepage, and the letter grade YSlow gave your site.

What is W3 Total Cache?

W3 Total Cache is the fastest and most complete WordPress performance optimization plugin. Trusted by many popular sites including: mashable.com, smashingmagazine.com, yoast.com and WPBeginner. W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.

1. Installing W3 Total Cache in WordPress

Before you install W3 Total Cache, you need to make sure that you uninstall all other caching plugins (for example WP Super Cache). If you do not do this prior to installing, the plugin will have issues upon activation. We have a very thorough guide explaining how to install a WordPress plugin which you can follow. Or you can follow the brief guide below:

Go to your WordPress admin panel, and click on Plugins » Add New, where you will search the name “W3 Total Cache”. You should see results like the image below:

Install and activate the plugin. If you choose to do this via FTP, first download the plugin and then upload it in to your /wp-content/plugins/ directory. Upon the activation of this plugin, a new menu option will be added in your WordPress admin panel called “Performance”. Click on the tab, and you will enter the configuration area.

2. Settings and Configuration of W3 Total Cache

W3 Total Cache is a very powerful plugin, so it has tons of options. We will visit each of these options in detail, but first we need to start with the General Settings.

General Settings

Make sure that you are on the General Settings Page. You can confirm that by viewing two of these options:

Now lets dive into the general configurations page. First you see an option to enable or disable preview. You should click disable, so the site is actually running W3 Total Cache rather than just previewing it. So your final screen would look like this:

Next option on the screen will be Page Cache. This works just like how WP Super Cache plugin works. This section is responsible for creating static cache pages for each page that is loaded, so it is not being dynamically loaded upon each page load. By having this enabled, you will significantly decrease your load time. For Shared servers, which most users are using, the Disk (Enhanced) Method is highly recommended. Your final screen result should look like this:

After the page cache, you should see the option for Minify in the general page. Minify is the famous technique of reducing the size of your CSS files, JS files, HTML files, posts, pages, and RSS. What this does is remove the unnecessary objects that your users do not need to see. Such as commenting in the stylesheet. That is for developers, not for average users to see. This plugin will remove all useless spacing from the code which by average speeds up your site load time by 10%. Disk is the only / best option for Shared servers. Your final screen should look like this:

Next option is Database Cache. This is crucial for site load time because WordPress sites are entirely running on Database. Often high load of database queries are the cause that slows yours site down and/or crash the site upon high traffic. The Database cache option will cache queries such as pulling the twitter count from your database, if you are using that. This option can essentially speed up your site by 100x. Your final setting for this area would look like this:

Object Cache is the option that comes next. This increases the performance of highly dynamic sites that uses the Object Cache API. The final settings should look like this:

The next option after this is for Content Delivery Networks (CDN). W3 Total Cache supports MaxCDN, NetDNA, Amazon S3, Rackspace Cloud, and Amazon Cloud Front. WPBeginner is using MaxCDN. This section will only apply to sites that are using CDN, or are planning on using CDN. If you think you will be using CDN, then we recommend MaxCDN (use coupon “wpbeginner” for 25% off). Example screen of someone who uses MaxCDN would look like this:

The next and last option on the general settings page is for Browser Cache. Browser Cache enables HTTP compression and adds expiration headers on the objects of your site. Each time a user visits your site, their browser stores a copy of your site, so on the next visit, your user does not have to re-load the site entirely (which speeds up the load time). But each browser resets the cache on their own schedule even when the file has not been changed. By enabling this, your site will tell the browser how long to hold each object. For example, you don’t change your favicon every day, or even month. That is something can be stored for one month period without change. The final screen should look like this:

Now that we have gone through the general settings page, we will dive into each individual settings to give you a look for more options.

Page Cache Options in Detail

Now that you have enabled page cache, we will show you what other options that you can tweak. First you need to go to the Page Cache Settings page like so:

Now you will see the following options:

Notice in the screen above that you will see Page Cache is currently enabled. If you do not see this, then you are doing something wrong. Go back to general settings and enable it. Next, you also see a way to empty page cache. When you notice an error on your site, you want to immediately fix it. This could be a spelling error that your user reported, or something else. In a situation like that, you would have to manually clear the cache so the changes can be implemented on the live site right away.

We have selected the option to not cache pages for logged in users such as administrators. The reason for that is, if we want to see any changes that we make on the live site before it goes live, we can do so. Next option is cache the homepage. Homepage is often the most visited page on many sites. It would be a good idea to check that. Cache feeds, categories, and tags is checked because thousands of people go through our categories daily. Dynamically loading each page will slow our site down significantly. We have not selected the option to cache search strings, and 404 pages because we do not see a need for it, but for some websites it can be great.

Now we will look into some advanced options for Page Caching.

Under the advanced options, you can see that we haven’t really touched the default. You can select to change the page cache to be longer or smaller interval. Default is 3600 seconds. You can make it smaller interval if you have a busy site. Next option is for Rejected User Agents and Rejected Cookies. You can select not to send cache pages to Google Bot, not recommend, but you can if you wish. If your page use a specific cookie, you should have those pages listed under rejected cookies page.

Under the never cache the following pages section, you see that we have added another page to the list. By default it is the index.php and wp-.php. But we added a manual page in there. The reason why we added this page was because we want this to load dynamically. This is a secret page on our site that you can constantly refresh to get a new tip randomly from our article database. See our Random Posts Page. You can add any page that you do not want to cache in that list. All the other settings can be left to default.

Minify Settings in Detail

Minify Settings advanced option will vary from site to site, but there are somethings that should be universal. First you need to make sure that it is enabled.

As you can see in the image above, that you have a green text saying it is enabled. We recommend that you follow the settings above exactly as shown. Each option is self-explanatory. One thing you should note is the Help Wizard at the top. That is a very nice feature that will come in handy when we see the CSS / JS Minify settings.

We are not using JS minify for this plugin because it was causing some areas of our site to not work properly, but we have minified our CSS. You are required to attach files, which you can do by either entering the URL of the file, or using the helpwizard.

Once you select the files in there, you will see them added in the minify page below:

Everything else should be left to blank, unless you know what you are doing.

Database Cache Settings

We did not modify anything in the Database Cache settings. Everything was left as default. You do not need to modify it unless you know that your site needs additional modification. The most important section is the never cache the following pages. For example, if one of your page or section heavily relies on database queries, then it is wise to add that page or that entire section in this field:

Object Cache Settings

Everything should be left as default for an average site. If you know that you need something in there specifically, then you may modify it.

Browser Cache Settings

By default, only Gzip compresssion and Set W3 Total Cache Header is enabled, but we have taken it a step further in our setup. We enabled Set Expires Header, Set Entity Tag (etag) for each option. You may do the same for your site as well. It is recommended that you do a little research about expire header and etag functions, so you make an informed decision that well-reflect your site. Not everything that works for us will work for your site as each site has different needs. There are tons of pros and cons of these functions which could be an article on its own.

CDN Settings in W3 Total Cache

This section will be slighly biased because we are only showing MaxCDN implementation. We are using MaxCDN and their quality service, so that is the only option that we have access to display (we will also explain why we chose them). If you followed this tutorial entirely, you should have already enabled the use of CDN and seleted MaxCDN as the option (only if you have an account with MaxCDN). If not, then this can be done through the General Settings. One you have done that, lets visit our CDN Settings Page.

As you see that we have selected all four options in the general settings. Host wp-include files, this so if your theme is calling jQuery from WordPress include library, it will be added and served through the CDN service. Theme files option is checked, so all of our theme files are served via CDN. Host minified CSS and JS files via CDN. This is important to have checked, so when W3 Total Cache minify your CSS files, it can be served via a CDN. Lastly serve custom files via CDN. Often bloggers have a tendency of keeping somethings separate for the sake of organization. Let it be ad images, or other set of files. You can specify those to be served via CDN as well.

Setting up MaxCDN with W3 Total Cache for WordPress

Next option is configuration of your CDN provider. We will show you how to do that with MaxCDN. You need to have an “Origin Pull” CDN account. Rackspace Cloud, and Amazon cloud front, do not offer this service which makes MaxCDN superior. Origin-Pull is simple to use and highly transparent. This type is also known as “mirror” CDN.

1. Login to your MaxCDN account (If you don’t have one, then get one).

2. In your MaxCDN dashboard menu, click on “Manage Zones” option. Then click on “Create Pull Zone” button, just like it is shown in the image below:

3. On the next page, you will need to fill out the necessary information to create a Pull Zone:

• Pull Zone Name: This can be anything without spaces, minimum 3 characters long. Think of this as your username.
• Origin Server URL: Enter the URL of your wordpress blog. Must have “http://” and the trailing slash(/).
• Custom CDN Domain: This is Optional, but we recommend it for the sake of branding. Use any subdomain for examplke: cdn.wpbeginner.com
• Label: This is like a description field. It is optional to add a description.
• Compression: We recommend that you enable this as it will save the usage of bandwidth on your account.

We have filled out the fields for you to see in the image below:

Upon creation, you will see a screen that will give you the URL for your CDN. If you chose the option for Custom CDN Domain, it will ask you to create a CNAME record for that domain. We will show you how to create the CNAME Record with cPanel Webhosting providers such as HostGator, Super Green Hosting, and Bluehost. You will need to login to your cPanel, then scroll down to the Domains Section and click on Simple DNS Zone Editor.

Then you will fill out the fields to Add an CNAME Record. The two values, you will be required to fill are: Name and CNAME.

• Name: This would be what you put in your MaxCDN Pull Zone as the Custom CDN Domain. In the image above, you see that our custom CDN domain is cdn.wpbeginner.com, so we will put “cdn” in our name field.
• CNAME: This will be URL provided to you by MaxCDN when you create the Pull zone.

We have filled out the fields for you to see in the image below:

Now, you have the CNAME created for your MaxCDN Pull zone. Note: This method will be different if you have a different host. Sometimes, CNAME records are created via Domain Registrar such as Godaddy.

Lets configure our W3 Total Cache Plugin to work with MaxCDN. In the general settings above, you have already enabled Content Delivery Network option and set it to Mirror: NetDNA/MaxCDN. So now when you go to the CDN Settings page, you will see an option for Configuration. W3 Total Cache wants you to enter the API ID, and the API Key. These can be found in your MaxCDN Dashboard if you go to Manage Account » API. Copy those and paste it here. Next complete the field that asks you to “Replace site’s hostname with:”. You will add your custom CNAME here. You can see in our example below, we have added cdn.wpbeginner.com.

After setting this up, your MaxCDN should be setup and ready to go. But there are other options that you can add as well to improve performance a little bit further. Lets look at the “Advanced” options on the Content Delivery Networks settings.

If you look at the image above, you see that some fields are already filled. The main part in this area is Custom file list. After enabling MaxCDN on our site, we saw that almost all files were being served via CDN except for some plugin files such as OIO Publisher, SyntaxHighlighter etc. So we decided to add those to the list. OIO Publisher is a plugin that lets us manage ads on our site (Full Review). When adding ads through this plugins, we can upload images through the plugin which were stored in the plugin’s uploads folder. So now all those images were served through CDN. Syntax Highlighter adds JavaScripts at the bottom of our page which were being served directly. So we added the syntax highlighter folder, so all files are served via CDN. This area will vary from site to site as each site uses different plugins. Some users will not have to add anything in here, but it is just an option to know. Also if you notice in the image above, there is a Rejected files area where contact form 7 file is listed. If you are using contact form 7, then you do not want to serve the captcha file through CDN.

This will conclude our CDN settings setup. Now if you load your site, the image URLs should be served from the CDN subdomain rather than your site’s actual domain. For example:

http://www.wpbeginner.com/wp-content/themes/wpbeginner/images/logo.jpg

will be replaced with:

http://cdn.wpbeginner.com/wp-content/themes/wpbeginner/images/logo.jpg

This concludes the setup of your W3 Total Cache Plugin. Your site should load a lot faster now. For the sake of testing, you can use YSlow to see what letter grade you get now compared to before. YSlow only recognizes the known CDNs names, so it will not recognize your custom subdomain. You will need to follow the tutorial on MaxCDN blog that shows how you can add your CDN to the list for your browser. This will be for the sake of testing the actual grade that your site gets.

Now that you have everything setup, it is best if you create a backup for your W3 Total Cache Configuration. After all, we went through a lot in this article. You will need to come back to your W3 Total Cache’s General Settings Page. There is a section for Import / Export Settings. Click to Download the settings file from your server.

This is good to do because if your site crashes, or you accidentally reset the settings, you will have a file to backup.

We hope that you found this article useful. For those users who are still not sold on the concept of CDN, we highly recommend you give it a shot. CDN work with your web host to decrease server load and increase site performance. We are using MaxCDN and we recommend you to do the same. (Try them for just a month, and you will see why we recommend them). Use the coupon “wpbeginner” for 25% off.

If you have any questions, then please feel free to ask in the comments below. Also don’t forget to share this article on Twitter, Digg, Facebook using the buttons to your left. We truly appreciate your support.

How to Install and Setup W3 Total Cache for Beginners is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Install and Setup WP Super Cache for Beginners
2. WPBeginner is now Powered by MaxCDN
3. Step by Step Guide to Install a WordPress Plugin for Beginners

Thanks for All your Support,
WPBeginner Editorial Staff

Follow WPBeginner on the New Digg, This could help all of us is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Add a Digg Button in your WordPress using Custom Fields
2. Going out of Business – Save WPBeginner
3. How to Allow Users to Submit News / Posts to Your WordPress Site