WPSmart - WordPress Tips, Tutorials and Themes

Top 5 Must Have Plugins for WordPress

Kaiser — Mon, 11 Jul 2011 19:01:50 +0000

WordPress Plugins database keeps growing and now contains more than 15,000 plugins. Here are my Top 5 must have WordPress Plugins that I install at almost every WordPress site.

1- Contact Form 7

Contact form 7 makes it simple to add a contact form to your site. We use it for our contact form here at WPSmart.

Get it here: http://wordpress.org/extend/plugins/contact-form-7/

2- Google XML Sitemaps

Google XML sitemaps is a must to create sitemaps for your blog.

Get it here: http://wordpress.org/extend/plugins/google-sitemap-generator/

3- W3 Total Cache

WordPress need to process tons of scripts and connections to database to create your page. This can cause significant slow response time for your site. W3 Total Cache caches your pages so they don’t need to processed every time someone visits your website.

Get it here : http://wordpress.org/extend/plugins/w3-total-cache/

4- WP Smush.it

Automatically compresses your images so you don’t have to do it manually.

Get it here: http://wordpress.org/extend/plugins/wp-smushit/

5- All in One SEO Pack

Must have for all your seo needs.

Get it here : http://wordpress.org/extend/plugins/all-in-one-seo-pack/

WordPress updated to 3.2

Kaiser — Sat, 09 Jul 2011 21:39:07 +0000

It’s been a long time since I last updated the blog. A lot has happened since then and I will be covering them in near future.

WordPress was recently updated to version 3.2 with a brand new look for Administrative UI. You can see the overall change in the screenshot below.

This version also drops support for Internet Explorer 6. There has been some improvements to page load speeds and overall wordpress seems lighter and faster. If you haven’t updated yet please do so now.

Download it here

Stay tuned for new tips and tutorials.

WordPress updated to 3.0.3

Kaiser — Thu, 09 Dec 2010 15:56:03 +0000

WordPress has release another security update for the WordPress. This time it is related to remote publishing interface and users that have remote publishing enabled are advised to update to version 3.03.

Download it here http://wordpress.org/

How to Use WordPress’ built in Script Libraries – Tip

Kaiser — Sun, 05 Dec 2010 19:23:19 +0000

WordPress comes with a lot of built in Javscript libraries, frameworks, plugins..etc that you can use in your themes with a single line of code. You will find a list of scripts bundled with WordPress here. I will show you how to add “Jquery” and “Prototype” to your themes.

Jquery

Simply add the script below above your wp_head(); in your header.php.

Prototype

Add the code below above your wp_head(); in your header.php.

That’s it.

Coding the Header of WordPress Theme

Kaiser — Sat, 04 Dec 2010 16:59:28 +0000

In our previous tutorial we built a very basic blank WordePress theme from scratch. Building Blocks of WordPress Theme.

Today we’re going to design and code the header.php of our theme and then call that header from our index.php.

What’s a header.php?

header.php is basically a file that will define the Header of our theme. It usually contains the doc type , style sheets and other header information. You can also add your logo and navigation to this theme. It’s perfectly fine to use predefined header.php of some theme framework such as Starker and edit it according to your needs.

We’ll define our top navigation and logo in our header.php . It’s really is a personal choice and you can just keep your header.php to basic header info if you want to or rename your header.php to anything you want.

What you need to keep in mind is that you must include wp_head() function in this file regardless of the name of the file.

Step 1

Create a new file in your favorite code editor and save it as header.php.

DOCTYPE

we begin with a DOCTYPE declaration and for our theme we will use simple HTML5 doctype.

Which DOCTYPE should you choose? Well it’s one again a personal choice. HTML5 Doctype will render pages in standards mode and that’s what we want.

Step 2

No we begin our html tag and add a wordpress function that will set html language attributes.

As you can see language_attributes is a wordpress function that will set our lang and dir attribute and for the default english installations it will render the code below.

If you have no plans to release your theme to the world, you can just add the code above directly into your header.php instead of using the language_attributes function and reduce the workload on your php interpreter.

Step 3

Next comes the meta tag and this time we’ll set the charset attribute that will define the character set of our document.

You can also set it to utf-8 directly and avoid another php function.

Step 4

Now we need to add title tag to our document. The tag basically defines the title in the browser toolbar and favorites. Properly defined title tag is a must for your pages to rank well in search engines.</p><p>WordPress has a built in function for titles called <a href="http://codex.wordpress.org/Function_Reference/wp_title">wp_title</a>. By default it outputs blank for home page. There are many ways we can optimize the title tag but it’s something we’ll explain in another tutorial. For the purpose of this tutorial we’ll use the code below to define our title tag.</p><pre name="code" class="php"><?php bloginfo('name'); ?> <?php wp_title('|',true,'');?>;</pre><p>The code above will print blog name on home page.</p><h2>Step 5</h2><p>Now we’ll define profile, add style-sheet and pingback url using rel tag.</p><pre name="code" class="html"><link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /></pre><h2>Step 6</h2><p>Last but not least we need to add WordPress function wp_head() to close our head tag. This function is a must as it is required by plugins. Add the code below to close your header tag.</p><pre name="code" class="html"><?php wp_head();?> </head></pre><p>Put it all together.</p><pre name="code" class="html"><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' );?>"/> <title><?php bloginfo('name'); ?> <?php wp_title('|',true,'');?>

and that’s your header tag.

Now we’ll add our top navigation and

tag that we’ll replace later on with a logo.

Adding Navigation

There are many ways to add navigation in wordpress. WordPress 3 introduced a new function called wp_nav_menu and that’s what we’ll use today. You’ll learn more about navigation in our future tutorials.

Create a new file in your theme directory and save it as functions.php. Add the code below to register your menu in functions.php.

__('Top Menu'))
);
}
add_action( 'init', 'register_our_menu' );
?>

The code above registered one custom menu. Now we need to edit our header.php to display our custom menu.

Add the code below anywhere in the theme to display your custom menu.

 'primary-menu' ) ); ?>

The code above will fall back to wp_list_pages until you define your own custom menu. By default wp_list_pages doesn’t display Home link so we need to add another function to our functions.php.

Add the code below to your functions.php

Voila!

Now we need to create a basic HTML structure of our theme. Add the code below to your header.php just below the tag.





 'primary-menu' ) ); ?>

As you can see we have simple basic structure for our header. We have a container div and a masthead div that will act as container of our header then we have php code to display our custom menu. We also have div with an id of logo for our logo.

Logo:

Logo in our theme will appear below the top navigation. We will design our logo in future tutorials but for now we’ll add the link with our site title in

tag. Add the code below inside your div with the id of logo.

That’s it. Below is the code for our header.php.


>


<?php bloginfo('name'); ?> <?php wp_title('|',true,'');?>









 'primary-menu' ) ); ?>

The output should like below.

That’s it for the day. We’ll code the WordPress loop in our next tutorial.

WordPress Security Update 3.02

Kaiser — Wed, 01 Dec 2010 00:28:24 +0000

WordPress has released a security update for WordPress. WordPress 3.02 is a mandatory security update and can be downloaded from here. You can also update it automatically from your admin dashboard .

Building Blocks of WordPress Theme

Kaiser — Wed, 24 Nov 2010 19:12:30 +0000

Today we’re going to begin building our WordPress Theme. I’m sure that there is a lot more basics that we haven’t covered yet but we’ll get to that later on. One of the best way to learn something is to start doing it with your own hands.

WordPress Theme Info

When you upload a new theme to wp-content/themes folder WordPress immediately detects the theme and displays a thumbnail and some information about the theme. Where does that thumbnail and information come from? Well the text comes from the style.css and thumbnail from image file named screenshot.png or jpg.

Style.css

Style.css is one of the required files for any theme in WordPress. This file should begin with a simple comment block that will be used by WordPress to detect name and other information about your theme and display it in your WordPress Theme menu.
Add the code below to the top of your style.css and edit it as required.

/*
Theme Name: WPSmart.com
Theme URI: http://www.wpsmart.com/
Description: Theme developed from scratch for WPsmart.com.
Author: WPSmart.com
Author URI: http://www.wpsmart.com
Version: 1.0
Tags: two columns, blog, fixed-width

*/

It’s pretty much self-explanatory. Add the name for your site, uri for your theme, little description, name of the author, version number if any and tags.

Screenshot.png

Take a screenshot of your theme and save it as screenshot.png. Resize it to 300×225 or something smaller and put it in the root of theme folder.

Index.php

This file is one of the two required files for any WordPress theme (the other being style.css). We’re not going into the details of this file yet. Just create a blank index.php file.

Theme Folder

Create a new folder and name it according to the name of theme. Put all three files in it and upload it to wp-content/themes/.

Go to your WordPress administration and click on Appearance>Themes and you will find your theme listed as shown below.

Don’t activate this theme as it’s blank!

We’ll begin designing our header in next tutorial.

How to Add Pagination to Your Website – Tip

Kaiser — Mon, 15 Nov 2010 18:59:27 +0000

According to Wikipedia “Pagination is the process of dividing web content and displaying it on separate pages”.

Here are a few examples.

How to

One of the easiest and quickest way to add Pagination to your WordPress blog is to use a plugin and my personal favorite is WP-PageNavi . Download it and upload it your plugins folder or you can install it directly from within WordPress if your server supports it.

Installing it can vary from theme to theme. In WordPress default Twenty-Ten theme you need to find your loop.php file inside your twentyten folder and add the code below

in place of the code below

max_num_pages > 1 ) : ?>

← Older posts', 'twentyten' ) ); ?>
→', 'twentyten' ) ); ?>

and you’re done.

Default settings for the plugin work just fine though you can customize them to your taste. To add your own css styling you need to edit the pagenavi-css.css . You can change the “Number Of Pages To Show” and various other options by going to Settings>PageNavi.

Update for WordPress 3.2 theme Twenty-Eleven

WordPress 3.2 came with a brand new theme called twenty eleven. The structure of theme is very different from twenty-ten. To add wp-pagenavi to twenty-eleven you need to edit the file called index.php. Find the code below and replace it with the wp-pagenavi code as shown above.

How to Setup Multisite in WordPress 3.0+

Kaiser — Thu, 11 Nov 2010 16:13:35 +0000

WordPress Multisite or what was once known as WordPress MU is basically a way to create a network of sites or blogs from a single installation of WordPress. With many people now running more than a few dozen blogs or sites, It becomes very difficult and time consuming to manage, update and keep your sites secure.

With WordPress Multisite you can now launch new sites or blogs from within the administration panel of your existing site. No longer you need to go through all the hassle of creating new databases , upload wordpress core files, upload or install the same plugins over and over again. With WordPress MS you can now launch new sites or blogs with a click of button.

Benefits of WordPress MS

Launch new sites or blogs from a single installation of WordPress
No need to create new databases every time you launch a site
Manage all your installations from WordPress Administration Panel
Chose between sub-domain or sub-directory as the destination of your new installations

What You’ll Need

Preferably a Linux based VPS or dedicated server as WordPress MS is not recommended for shared hosting environment
Basic knowledge of Linux/Unix is recommended
WordPress 3.0+

If you’re running Windows or if you want to test this on your localhost you may have trouble getting WordPress Multisite to work properly.

Step 1:

First of all, make sure that you have backup of your data and WordPress core files. Disable all plugins on your site, you can re-enable them after you’re done with the installation. WordPress will also give you a warning to deactiavte your plugins.

Step 2:

To enable WordPress Multisite in WordPress 3.0+ you need to add a small line of code to your wp-config.php site. Add the code below in your wp-config.php site just above the line “That’s all, stop editing! Happy blogging”

define('WP_ALLOW_MULTISITE', true);

Now upload the edited wp-config.php back to your site and you’ll see a new link “Network”appear under your Tools Menu as shown below

Step 3:

Now go to your Network link and you select either sub-domains or sub-directories for new sites in your Network as shown below.

It’s pretty much self-explanatory. Sub-domains are like site1.mainsite.com and sub directories are like www.mainsite.com/site1 and so on.

Site1 is basically the name of your new site that you will decide yourself.

I will use Sub-directories for this tutorial as it’s easier to install. If you want sub-domain then follow the instructions here WordPress Create a Network.

Once you have made your choice, fill out the details and click install.

Step 4:

Once the installation is done, WordPress will generate a few lines of code for you.

One will go to to your wp-config.php file and other will go to your .htaccess file.

You will also need to create a new directory named “blogs.dir” inside your wp-content directory and make sure it’s writable if it’s not by default.

The code for your wp-config.php will go above the line “That’s all, stop editing! Happy blogging” just like we did in step 2. Depending on your configuration you may need to create a new .htaccess file, add the generated code and upload it your site root. If you’re on windows, just create a blank text file, add the code and upload it your site root. Rename it .htaccess from your ftp program.

Step 5:

Now sign-out and sign-in again to your main site administration panel and you will find a shiny new Super Admin Menu just above the Dashboard menu as shown below.

To create a new site click on Add New. Give your new site a name, Title and enter the email address. Click Add site.

Step 6:

Voila! Your new site will be created instantly and given an ID.

Click on visit to go to your new blog.

WordPress Multisite is a very powerful feature and there’s a lot more you can do with it. Your new Super Admin is full of options and settings that you can change as you wish. We’ll cover those options in future tutorials.

Another feature that many people may want is to map your new site or give your new site a fully qualified domain. That’s instead of site1.mainsite.com or mainsite.com/site1 you may want it to be www.site1.com. We can do that with a plugin called WordPress Mu Domain Mapping. We’ll also cover that in our future tutorials.

Subscribe to Wpsmart.com rss feed and give us your feedback via comments.

XML Sitemap Plugin for WordPress – Tip

Kaiser — Mon, 08 Nov 2010 21:37:16 +0000

I just installed XML – Sitemap Plugin for my blog. It’s one of the first things you should do after installing wordpress.

All you need to do is to upload it to your plugins folder and activate it. Depending on your configuration you may need to chmod 777 your blog root directory which is not a good idea from security point of view So, I just created two empty files named sitemap.xml and sitemap.xml.gz and uploaded them to blog root. The plugin automatically notifies Google, Bing and other search engines about updates and our sitemap.

You don’t necessarily need to create both files but I chose to create both.

It also has a post priority feature

By default it is set to Comment count to determine the priority of post. I’m not sure just how big of an impact (if any) it may have on your page rank in search results but my guess is it will be minimum. Juts leave it to default!

There are a lot of other options like you can exclude categories and pages from your sitemap if you chose to do so.

Bottom line is it’s good to have Sitemap for seo purposes and this plugin does a fantastic job of creating a nice sitemap for your site.