Hungred Dot Com - Page 52 of 60 - save life through coding since 2009

Tutorial: How To Create a Simple Customize WordPress Theme

This is a tutorial requested by Looli

Firstly, creating a WordPress theme can be difficult but also can be simple. However, in this tutorial I will try to demonstrate the simplest way to create a customize WordPress theme which anyone can do. However, this theme is not fully optimize to be SEO friendly as you will required a certain degree of programming skill to make it SEO friendly. Notice that it is not theme and template, a WordPress can create a theme with many template for each different page. That is the reason why WordPress is quite flexible in term of theme design!

Requirement

There are a few things you need to know about building a WordPress theme. If you need a professional theme, you might need the following set of skill,

CSS
Photoshop
xHTML
PHP

However, if you required a simple theme, you will only require to know CSS and xHTML alone. But let's understand what we know to know from WordPress API (Dictionary for WordPress).

WordPress File Required

We need the following files to build a WordPress theme,

style.css - overall design of the theme
index.php - main structure file of the theme
header.php - header of the theme
sidebar.php - side bar of the theme
footer.php - footer of the theme
comments.php - comment of the theme
comments-popup.php -
404.php - error display
single.php - single post display
screenshot.png - the image display show on WordPress theme section
archive.php - archive page
archives.php - archives template
functions.php - additional function of your theme
image.php
links.php - link display template
page.php - page display
search.php - search display

There are even more file required than the above 17 files. But let's just stick to here as it will be more than enough to build a simple template. Don't be afraid by these 17 files. They are actually separate boxes which you use to combine them to create a theme. We will use the default theme in WordPress and start from there instead which many WordPress designers did since the files mention above are all in the default theme.

WordPress Methods Required

This will be the trickest part you may need to know in WordPress. There are really a lot of method in WordPress to retrieve data and required certain contact with programming in order to understand what does the overall method does. Unless you know PHP scripting, this part will a bit more challenging than just creating a theme. For people who are interested, you can read up the WordPress Developer guide.

Let's get started!

Firstly, we will be using Mozilla Firefox browser to build our template. For most designer, they will be using webdeveloper plug-in from Mozilla Firefox. Download and install it and we will be ready to go. The plug-in will creates a toolbar for you to edit CSS on the fly so that you do not need to refer back to your CSS code every single time! After you have installed, you will see something like this on your browser.

Once you have installed your plug-in, log in to your WordPress control panel and navigate down to Appearance->themes and select the default theme as shown below,

Now, go to your site by clicking on 'Visit site' on top of your WordPress control panel as show below,

Once you are out, click on the CSS button on your webdeveloper plug in and select 'Edit CSS' as shown below,

There will be a bar pop up somewhere around your browser which will most likely be at the bottom of your screen if you installed it for the first time. You can reposition it by clicking on the button beside the X icon as shown below,

Here, we can see the CSS being applied to the default theme. Now, we will change the theme on real time!

Now we will have to plan how our layout will look like. For example, i will like my layout to look like this,

So we will look at the required id or class that controls my header, footer, siderbar and content. We can do this by right click on the default theme and select view page source,

A pop up will display the source of the page. This is where we study the code and find the location id/class of the div tag. But all these unfriendly layout of the html tag won't help us efficiently! Thus, we will look into getting the file out to view in a friendly editor! The editor i am using is notepad++. You can download it and open up the application, copy the source code and paste it into the application. Save it as source.php and you will get something like this.

notice that whenever you click on a tag, it will highlight the end tag for you. This makes it easy for us to know whether our main tag is a subset of any other main tag. For example, siderbar is a subset of header. With this tool, i have located the 4 things i want which are,

id: header
id:content, class:narrowcolumn
id:siderbar
id:footer

The key found are all master tag! This makes life really easy. Once we know the id and class tag we will be dealing with, let's move back to edit css and strip off all the css rule and we get something ugly like this.

Notice that the header comment is still there. This is necessary if you want your WordPress theme to work! It tells WordPress the things they need to know about your theme. A small tips is to copy the whole style sheet and paste it into notepad++ for editing and then try it on 'edit css'. This way, it is much faster and provides better visibility to your css code. Rememebr to save it as .css extension!

Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous Kubrick
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
Tags: blue, custom header, fixed width, two columns, widgets

i believe it is clear what does the above comment means. Just erase them and write your details on it and you can start showing off your skill in CSS! If i want my theme to display exactly like may layout design i will write the following css code in it.

/*
Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous<a href='http://binarybonsai.com/kubrick/'>Kubrick</a>.
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
Tags: blue, custom header, fixed width, two columns, widgets

Kubrick v1.5
http://binarybonsai.com/kubrick/

This theme was designed and built by Michael Heilemann,
whose blog you will find at http://binarybonsai.com/

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

*/

/* Begin Typography  Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #333;
text-align: center;
}

#page {
background-color: white;
border: 1px solid #959596;
text-align: left;
}

#header {
border: blue solid 1px;
}

#content {
font-size: 1.2em
border: pink solid 1px;
}

#footer {
background: #eee url('images/kubrickfooter.jpg') no-repeat top;
border: green solid 1px;
}

small {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
}

h1, h2, h3 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;

}

h1 {
font-size: 3em;
text-align: center;
}

#headerimg .description {
font-size: 1.2em;
text-align: center;
}

h2 {
font-size: 1.6em;
}

h2.pagetitle {
font-size: 1.6em;
}

#sidebar h2 {
font-family: 'Lucida Grande', Verdana, Sans-Serif;
font-size: 1.2em;
}

h3 {
font-size: 1.3em;
}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}

.entry p a:visited {
color: #b85b5a;
}

.commentlist li, #commentform input, #commentform textarea {
font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentlist li ul li {
font-size: 1em;
}

.commentlist li {
font-weight: bold;
}

.commentlist li .avatar {
float: right;
border: 1px solid #eee;
padding: 2px;
background: #fff;
}

.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}

.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}

#commentform p {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.commentmetadata {
font-weight: normal;
}

#sidebar {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
border: yellow solid 1px;
}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}

code {
font: 1.1em 'Courier New', Courier, Fixed;
}

a, h2 a:hover, h3 a:hover {
color: #06c;
text-decoration: none;
}

a:hover {
color: #147;
text-decoration: underline;
}

#wp-calendar #prev a, #wp-calendar #next a {
font-size: 9pt;
}

#wp-calendar a {
text-decoration: none;
}

#wp-calendar caption {
font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: center;
}

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
/* End Typography & Colors */

/* Begin Structure */
body {
margin: 0 0 20px 0;
padding: 0;
}

#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
}

#header {
background-color: #73a0c5;
margin: 20px;
padding: 0;
height: 200px;
width: 100%;
}

#headerimg {
margin: 0;
height: 200px;
width: 100%;
}

.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
height: 500px;
margin: 20px;
width: 450px;
border: grey solid 1px;
}

.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}

.post {
margin: 0 0 40px;
text-align: justify;
}

.post hr {
display: block;
}

.widecolumn .post {
margin: 0;
}

.narrowcolumn .postmetadata {
padding-top: 5px;
}

.widecolumn .postmetadata {
margin: 30px 0;
}

.widecolumn .smallattachment {
text-align: center;
float: left;
width: 128px;
margin: 5px 5px 5px 0px;
}

.widecolumn .attachment {
text-align: center;
margin: 5px 0px;
}

.postmetadata {
clear: both;
}

.clear {
clear: both;
}

#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}

#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
}
/* End Structure */

/*    Begin Headers */
h1 {
padding-top: 70px;
margin: 0;
}

h2 {
margin: 30px 0 0;
}

h2.pagetitle {
margin-top: 30px;
text-align: center;
}

#sidebar h2 {
margin: 5px 0 0;
padding: 0;
}

h3 {
padding: 0;
margin: 30px 0 0;
}

h3.comments {
padding: 0;
margin: 40px auto 20px ;
}
/* End Headers */

/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}

/*    Using 'class='alignright'' on an image will (who would've
thought?!) align the image to the right. And using 'class='centered',
will of course center the image. This is much better than using
align='center', being much more futureproof (and valid) */

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
/* End Images */

/* Begin Lists

Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

html>body .entry li {
margin: 7px 0 8px 10px;
}

.entry ul li:before, #sidebar ul ul li:before {
content: '?0BB ?020';
}

.entry ol {
padding: 0 0 0 35px;
margin: 0;
}

.entry ol li {
margin: 0;
padding: 0;
}

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}

#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}

#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}

#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}

#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
}

#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}

ol li, #sidebar ul ol li {
list-style: decimal outside;
}

#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0;
padding: 0;
}
/* End Entry Lists */

/* Begin Form Elements */
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}

#sidebar #searchform #s {
width: 108px;
padding: 2px;
}

#sidebar #searchsubmit {
padding: 1px;
}

.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}

select {
width: 130px;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform {
margin: 5px 10px 0 0;
}
#commentform textarea {
width: 100%;
padding: 2px;
}
#respond:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#commentform #submit {
margin: 0 0 5px auto;
float: right;
}
/* End Form Elements */

/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li {
margin: 15px 0 10px;
padding: 5px 5px 10px 10px;
list-style: none;

}
.commentlist li ul li {
margin-right: -5px;
margin-left: 10px;
}

.commentlist p {
margin: 10px 5px 10px 0;
}
.children { padding: 0; }

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */

/* Begin Sidebar */
#sidebar
{
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
}

#sidebar form {
margin: 0;
}
/* End Sidebar */

/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
cursor: help;
}

acronym, abbr {
border-bottom: 1px dashed #999;
}

blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}

blockquote cite {
margin: 5px 0 0;
display: block;
}

.center {
text-align: center;
}

.hidden {
display: none;
}

hr {
display: none;
}

a img {
border: none;
}

.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}
/* End Various Tags & Classes*/

/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */

/* 'Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you.
It won't be a stylish marriage, I can't afford a carriage.
But you'll look sweet upon the seat of a bicycle built for two.' */

If you close edit CSS, it will automatically return your original CSS styling. In order, to permanently change the styling you will need to visit your WordPress control panel and paste the code on the file style file in the editor section as shown below,

Depend on which style file you have editor to get your result, you will save to the same file to make the changes. Before you do that, please backup the original source file of the style file before proceeding to update. WordPress editor do not allow return function. Once your changes have made, there is no returning. It is best to keep the original source file if there is any unpredicted situation. The above code will give you something like this,

There are awfully a number of image contain in the default theme which you can remove them so that it won't affect your design. In order to create a good design in WordPress, your CSS skill will be required. So brush that skill up and all these WordPress design will be a piece of cake to you. Oh, if you have any images that you would like to insert, you will have to upload them into your theme 'images' folder in your web hosting in order to style with image.

Notice i used back almost every single things in the default theme. This is necessary if you do not know what to cater. There are awful a lot of things you need to cater when designing a WordPress theme such as comment look, sidebar look, template look, etc. I will advice you to edit the default theme and keep the declaration as it is to prevent any unnecessary styling that you might omitted. If you really want to change them, always check every single page/post/comment etc. after you have completed your theme.

Why not start from scratch?

Why you are not taught to work this out from the scratch? It is because there are more things you will need to cater when working on PHP level of theme such as the design and usability of additional plugin into your theme. This tutorial tries to demonstrate the simplest way of getting your own customize theme and not affecting the overall structure of your template. Many free theme do not cater such careful checking for you. They purely change everything and let you find the bug for them to fix. Hope this help!

Selected Free Directories Submission Site – Top 12

Free Directories Submission

If you have just started with a website with little traffic and no reference links. This might be a good thing to look into. Other than the most famous search engines such as Google, Yahoo, MSN and ASK other search engines practically do not contribute much traffic to your site since their market share are much much smaller than the giant ones. Most of these smaller search engine results are retrieved from these giant search engines. It is better to just deal with the big boys than moving around trying to gain more traffic with the smaller ones. However, getting to the top of these big search engines is often difficult. Thus, submitting to Directories instead will greatly help you. Directories site are manually review by human and is greatly appreciated by the big boys. But there is some points to look at when submitting to directories.

1. Submitting your site to them can greatly help out your ranking but please do not double submit them to avoid any duplicate work necessary for these poor boys.

2. Make sure the directories are not banned by any search engines. You don't want bad reputation directories to recommend your site. Really.

3. Page Rank isn't everything. In fact, Google is changing their algorithm in regards to Page Rank. Go for a good PR directories, a low PR directories are not value by Google in the near future as announce recently.

4. Free directories take time. It is a free services, it may take more than a few month to complete review your site.

5. Seek for the oldest directories, most search engine value them. But they don't come free.

6. Review the directory's guidelines and don't abuse them.

7. Check whether your website has already been listed in their directory before submission.

Having to understand what directories are, here are some of the free directories you can submit to.

Do not required a Reciprocal link

1. DMOZ
A open source directory. Many will appreciate their services even Google acknowledge them. This is a must submit directory.

2. Clickey
Required to register with a real domain name.

3. Turnpike
turnpike.net/directory.html

4. Little Web Directory
littlewebdirectory.com

5. Infignos
Infignos.com

6. So Much
somuch.com

Required a Reciprocal link

7. Websites Promotion Directory websitespromotiondirectory.com

8. Jayde
Jayde.com

9. one Mission
onemission.com/d.pl

10. World Site Index worldsiteindex.com

11. Directory World
Requires a reciprocal link, but is otherwise free. Good page ranks for listing pages.

List of useful directories

12. seo company list of directories

SEO for WordPress – Optimization, Guidelines, Techniques and Tutorial

WordPress

WordPress is one of the most popular blogging tools available on the internet right now. Nowadays, more and more people are turning WordPress into a CMS for their business site since WordPress is design to be SEO friendly. Although it is design to be SEO friendly, there are still ways of optimizing your WordPress site. Remember every little optimization contributes to your ranking in the search engine.

WordPress SEO Guide

I have written a detail SEO guideline for beginners that should have covered most of the techniques available to construct a SEO friendly website and it should be greatly applicable in WordPress. The article will be maintained over the time and I believe it should worth to take a look at it. However, the article only cover techniques and guidelines for sites that do not have a well define structure. Therefore, for website build with WordPress that already has a defined structure, there is a need for a clearer guidance on how to target SEO friendly for WordPress only.

WordPress Built-in features

WordPress has many built-in features to help optimize your website. However, many users are not aware of such features and lose out to others who have already uses these feature to optimize their WordPress.

WordPress Permalink

Like I mention in the guide that I wrote, this is a very important thing you should do to optimize the performance of your WordPress. Your URL does contribute to what is being searched on the search engine. So change your permalink to a custom structure as shown below.

Personally I used this format for my website.

/%year%/%monthnum%/%day%/%category%/%postname%/

Most Recent Posts

Since search engine spider go through all your contents, having most recent post helps promote your written article since it appear across the pages you have. You can do this on your template widget option as shown below.

Most Important Posts

There are article which you wrote that you wish your reader can always see it. If it is a post, get it sticky on the main page or else placed it on a page instead. A carefully construct keywords post will always be destroy by comments. Placing it in page will last your ranking of that particular page in search engine result.

Update Services

This is a must apply technique in WordPress. This feature is built into WordPress but many beginners never try to update this. You can go to Setting->Writing and you will see ‘Update Services’. You can place the following services that I use but be aware that if you have similar services, it will send two time ping to those services and will get ban for spamming these services.

http://1470.net/api/ping

http://www.a2b.cc/setloc/bp.a2b

http://api.feedster.com/ping

http://api.moreover.com/RPC2

http://api.moreover.com/ping

http://api.my.yahoo.com/RPC2

http://api.my.yahoo.com/rss/ping

http://www.bitacoles.net/ping.php

http://bitacoras.net/ping

http://blogdb.jp/xmlrpc

http://www.blogdigger.com/RPC2

http://blogmatcher.com/u.php

http://www.blogoole.com/ping/

http://www.blogoon.net/ping/

http://www.blogpeople.net/servlet/weblogUpdates

http://www.blogroots.com/tb_populi.blog?id=1

http://www.blogshares.com/rpc.php

http://www.blogsnow.com/ping

http://www.blogstreet.com/xrbin/xmlrpc.cgi

http://blog.goo.ne.jp/XMLRPC

http://bulkfeeds.net/rpc

http://coreblog.org/ping/

http://www.lasermemory.com/lsrpc/

http://mod-pubsub.org/kn_apps/blogchatt

http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php

http://www.newsisfree.com/xmlrpctest.php

http://ping.amagle.com/

http://ping.bitacoras.com

http://ping.blo.gs/

http://ping.bloggers.jp/rpc/

http://ping.blogmura.jp/rpc/

http://ping.cocolog-nifty.com/xmlrpc

http://ping.exblog.jp/xmlrpc

http://ping.feedburner.com

http://ping.myblog.jp

http://ping.rootblog.com/rpc.php

http://ping.syndic8.com/xmlrpc.php

http://ping.weblogalot.com/rpc.php

http://ping.weblogs.se/

http://pingoat.com/goat/RPC2

http://www.popdex.com/addsite.php

http://rcs.datashed.net/RPC2/

http://rpc.blogbuzzmachine.com/RPC2

http://rpc.blogrolling.com/pinger/

http://rpc.icerocket.com:10080/

http://rpc.pingomatic.com/

http://rpc.technorati.com/rpc/ping

http://rpc.weblogs.com/RPC2

http://www.snipsnap.org/RPC2

http://trackback.bakeinu.jp/bakeping.php

http://topicexchange.com/RPC2

http://www.weblogues.com/RPC/

http://xping.pubsub.com/ping/

http://xmlrpc.blogg.de/

WordPress Category

Category is an important way of promoting your site to search engine spider. If you category naming is not certain keyword, it will be difficult for search engine spider to crawl out these keywords. Thus, name your category carefully. For example, instead of using SEO, use SEO Blogger or SEO wordpress for your category name instead.

Excerpts and More tag

If you are user who likes to display the whole post on your main page, this is the most important things you must aware of. Having the whole content being display on the main page will definitely cause duplication and get penalize by search engines. Thus, using Excerpts can help eliminate this problem. But if you insist on having your content being display in full, it is best to use the more tag to cut it short with a read more link to the read post. This way you won't be penalize by major search engine.

WordPress Plugin

WordPress plugin play a very important reason why millions of people are currently using WordPress for their CMS instead of other popular CMS such as Joomla or Concrete5. Although it is initially built for blogging purposes but due to all these powerful plugin that had built by its community, WordPress has become a powerful tool for many businesses. However, It is not a good idea to have two similar function plugin activated together. This will cause double work for search engines and more pain for your site.

Sitemap Generator Plugin

Submitting sitemap whenever there is a new article to various big search engines take time. Therefore, having this plugin save your time and constantly alert the search engine to crawl out your content. I would highly recommend Google XML Sitemaps for your plugin.

SEO plugin

All in One SEO Pack gives you all the things you need to create an SEO friendly website. There are similar other SEO plugin such as HeadSpace2 and Platinum SEO Pack which are also equally popular among user.

Online services Plugin

Add to Any: Share/Save/Bookmark Button is the plugin that I used for my WordPress to allow my visitor to bookmark valuable article from my site. This helps to promote users to spare the words out of search engine and not only relay on SEO.

Speed up Plugin

You do not want your visitor to wait for your all site to load when they enter your site when there are no changes in your article. This won’t help your site at all. You can use WP Super Cache to help speed up your site.

Monitor Plugin

This is a very interesting plugin similar to google analytics but provide you with more information on your users. This way you can use these information to update your content and improve your over SEO strategy. StatPress Reloaded or WassUp gives you this ability nicely.

SEO image optimizer plugin

There are times when we forget to add alt or title in our images without these additional information, we tend to lose out in regards to our ranking in search engine. Since spiders cannot read an images, having these elements are important. Thus, with the help of SEO Friendly Images, all images that don’t contain such elements can be easily added without you flipping up all your post.

SEO Broken link plugin

There are many times when your broken links are being indexed by search engines and visitors are unable to view any information and leave quietly. This will hurt your overall quality of your website. Thus, having Redirection will help you fix those broken links by redirect them to the correct ones.

Google Analytics plugin

Webmaster who uses Google analytics will find this plugin very useful especially when you have no idea how to deal with all the codes in your template. Google Analytics for WordPress will save your life.

Update plugin tool

Updating plugin one by one? Try One Click Plugin Updater that helps you to update all your SEO plugin for good!

SEO URL Helper plugin

Having unnecessary word in your URL doesn’t really help you in performing better in search result. Try SEO Slugs that remove unnecessary word within your permalinks.

Post control plugin

WP-CMS Post Control helps reduce the size in your WordPress database accumulated by auto save post that can hurt your website performance. Since all of these auto save post resist in your database even if your post has been published.

Updated: 13/04/2009

Social Profilr

Social Profilr is a plugin where you can add a nice graphical icon on your template widget for your visitor to find you and keep updated with you.

Optimize wordpress plugin 13/04/209

There are many useful plugin that provides feature for your wordpress blog. However, many of these plugin are not built with SEO in mind. Therefore, it will be good to notice some of the mistake made by these plugin you used and edit them if necessary. I have wrote a tutorial to teach you a simlpe way that can help you optimize your wordpress plugin.

Complete master guidelines and tips on SEO (Search engine optimization) for beginners

Recently I wrote an article on SEO that introduces the essential things a beginner will need to be aware and know about. If you haven't had a chance to look at it, please feel free to take a look. It may worth your time.

The reason for this complete guide is that when I was learning SEO, I am required to flip through many tips and guidelines on the World Wide Web and couldn't really find a complete one that introduce to all these methods of SEO in an article. After a huge amount of research and reading I finally decide to come up with a guide that can help people out there who are learning SEO. This will be a very long guide to cover a lot of things on SEO. Bear with me =)

The sections are split as at below:

1. Understands what search engine spider sees

2. SEO accessible Design for website

3. SEO development for website

4. SEO for webmaster

5. Never for SEO friendly website

6. Conclusion

This post will be maintained to keep up with the on going changes in the world of SEO.

Understands what search engine spider sees

Before we can start anything about optimizing, it is essential that we understand what the search engine spider can see. These search engine spiders will determine whether they like your website or not which determine whether you are on the indexing or off the indexing of the search engine. Search engine spiders are robots so they will not be able to see what a human can visualize. Thus, it is important to reduce the number of things a search engine spider cannot see and increase the numbers of things a search engine spider can see. Search engine spider is interested to know more about your website and what does your website carries. Therefore, all they see are instruction and texts in your website. Below list the things a search engine spider cannot see and should be avoid or place at the bottom of the page.

1. Image text

2. JavaScript

3. Flash

4. Frame

SEO accessible Design for website

SEO is all about how to make search engine likes you. However, we must aware that search engines spider do not know how pretty your website can be but how accessible your website is. Designing a website that creates both beauty and accessibility to users and search engine are important part a web designer should be aware of. We must always try to retain the user in your site and allow the search engine spider to crawl out as much information as it could on your website. Therefore, all those free template or web design are off the shelf! Those are not built for SEO in mind and there is a reason why it is free in the first place. But tweaking it here and there might just help you solve this problem.

1. The key point is to load the content first so that the search engine spider will sees what it wants. The least important things such as navigation bar or footer should be placed at the bottom after everything has loaded. In order to do this, you will be required to layout your design in CSS format. This way, you can prioritize your display to the search engine spider!

2. Be aware that these search engine spiders are trying to guess what is important. Thus, do not ever use Image text for beauty purposes unless you are not doing SEO in mind.

3. Provide meaningful image names, title and alt. These are important so that images are accounted for in search engine and makes search engine spider understands what the image is about.

4. It is equally important that the sites you design are up to standard. And the minimum required for search engine spider to crawl and cache up your site is to have workable functionality and display. It is necessary to full validate of HTML and CSS in accordance with W3C guidelines.

SEO development for website

It is important to know what kind of structure is being love by these search engine spiders. If you have developed a structure that doesn't makes SEO friendly, altering or changing them to SEO will squeeze out all the juice you have. It is best to aware this from the beginning than regarding later.

1. One of the good practices you may adopt is naming your URL. Providing a meaningful URL is good when it come to searching on search engine. For example, I have a page which has an URL http://hungred.com/2009/04/02/seo/introduction-seo-search-engine-optimization/ is always better than a URL http://hungred.com/example.php. It provides more keyword for search engine to find you.

2. Do not use JavaScript ready made navigation menu. These menus are not SEO friendly and search engine spider do not like them! Simple to say they are not page text. Use

with CSS to create your navigation menu instead!

3. Standard your anchor links! Since we are dealing with robot here, they are instructed to check your linking structure. Instead of linking them as http://www.hungred.com/seo, link them as http://hungred.com/seo/! The reason is because the spider will check in the following way if you link them in the first case.

i. http://www.hungred.com/seo

ii. http://hungred.com/seo

iii. http://hungred.com/seo/

Since search engine spiders are not instructed to check for with or without www, it will check all possible way of linking it to them. Thus, it is also necessary to tell these search engine spiders how is your page being identify. You can configure this either in your .htaccess or in their webmaster tools.

4. Dynamic pages especially those that contain a question mark in their URL, they are no no to search engine spider! To illustrate this better, if you have 3 URL as follows,

i. Hungred.com/seo.php?thread=1&&sort=increase

ii. Hungred.com/seo.php?thread=2&&sort=decrease

iii. Hungred.com/seo.php?thread=3&&sort=increase

These 3 URL are totally different pages. But if the search engine purges the information after the first offending character, the question mark (?), and the page will all looks like this.

i. Hungred.com/seo.php

ii. Hungred.com/seo.php

iii. Hungred.com/seo.php

Now you have three duplicate pages and it won't be indexed. Another problem is that dynamic pages do not have meaning words in their URL that makes it difficult for even human to identify what the page really means. It is important to have key words contain in your URL as mention in point 1. There are definitely solutions to this problem and it will require the help of .htaccess which many open source CMS had already applied this technique to make it SEO friendly.

5. Use tag such as
..
to tell search engine spider what are the most important phase and keywords in your site. Search engine nowadays are very smart. They are able to identify cheating in certain way. Therefore, placing everything to a
tag will never bring you anywhere. It is best to have a balance of H1, H2 and so on in your site.

6. Utilize Meta data or robots.txt! Unlike open sources where there is community who built SEO friendly tools to optimize SEO, most sites do not have such benefits. Your best bet is to use Meta data or robots.txt and optimize the necessary things you wish to crawl and things you want it to avoid. Search engine spiders do not like duplication content; they penalize you for having those! This is also the reason why we have to instruct search engine spiders not to look at some of the duplicate contents across pages such as navigation bar content.

7. Consider nofollow tag linking outside. This will cause most search engine spider to ignore the link inside the nofollow tag and concentrate on other more important keywords on your site. But this will definitely sacrifice the relationship with other site. Consider carefully.

8. Use external links for scripts and CSS! This is to ensure that both users and search engine spiders do not need to download them every time as it can be kept in their cache if the scripts are placed external!

9. Do not use any hidden links or things that only search engine spiders can see. This will not help your website at all and might even cost you.

10. Name all your files and folder related to your keyword that your site will be building.

11. Any PHP script that malfunctions might cause the rest of the page to stop displaying. If humans can't sees it, robot will never have a better chance in crawling up your contain. It is important to always check the functionality of your page ensuring it is working flawless.

12. Build optimize site. Always compress all your script and images and remove any unnecessary codes and comment so that your site loads faster.

13. It is necessary to inform the search engine spider that your page no longer exist. It is often a mistake to allow search engine spider to assume an error 404 page as a valid page. This will definitely affect the overall quality of your website. Thus, it is necessary to send out correct error code on the header when there is an error on the page.

14. Try as much as possible to keep all style and script tag at the bottom of the page! So that it is not prioritize as important by the search engine spider! ( 13/04/2009)

SEO for webmaster

In order to build a SEO friendly site, webmaster plays a major part in maintaining the site at tip top condition. Since ranking will drop sometimes, it is necessary to keep up to the news of SEO and maintain the site according.

1. The most important for a website is the type of content it contains. It is critical important to write valuable information and useful issues that a user wish to know about your site. Relate your article to the keywords used for the page. Try your best to include the keyword in your site. This way search engine spider will have a higher chance of guessing your keywords

2. Although nowadays search engine spider has programmed smarter to ignore Meta data for information regarding the site. But some engine spiders do look at these Meta tag especiall Yahoo search engine. Therefore, utilizing the Meta keyword and description are important for these engine spiders to check them out if they are unable to understand the content of your page. The description must be around 160 characters to reach optimal.

3. Manually submit sitemap to big website such as google.com, yahoo.com, msn.com and ask.com. But manually submit them ONCE and once only! If you submit more than once, duplication will be the greatest problem hitting your site. On the other hand, use those free submissions for your site. It may help in some kind but most of these search engines took result from these big search engines. You can always create a sitemap easily from online tools available on the internet. It will be a pain to create a sitemap for your site with 100+ pages.

4. Fully utilize the webmaster tools provided by these sites to understand your site indexed situation on their search engine. These webmaster tools make it interesting on how your site has been performing and you might even get addicted to it! Tools such as Google toolbar are a great tool to understand your page rank in Google. The other one will be the webmaster site that most search engines provided

5. It is necessary to link related site across your pages. These help spider to crawl them up as well and increase your chances on being indexed.

6. It is essential to let users know what links they will be clicking. Try to use keywords or meaningful words on the links. For example, instead of using 'click here' try to use words like 'discount details available here!' This helps both users and search engine spiders know what they are.

7. It is best to get links from other site to your site in order to gain permanent referral which is far better than relying on SEO that algorithm may change one day.

8. Search engine spiders are design to act as an author for approving website. Thus, similar to an author who always have to see the same content again and again is pure boring. The best way is to review and update your page with even more interesting and relevant information regularly so that the search engines are updated. On the other hand, users who visit your site also receive such benefit.

9. Analysis the keywords used by your competitor. Fully utilize these keywords and strengthen the contents to involve these keywords for better chances of being indexed on top.

10. There are times when some of your links doesn't work and people who visit your site dislike such things. This is also true for search engine spiders. Thus, it is important to always check for broken link so that you do not get penalize for this.

11.Provide social network links for your visitors to know more about you such as Facebook and Myspace. Provide options for them to bookmark your article in many other web application available.

12. It is difficult for many starting website to attract traffics even with the help of SEO. Thus, it is best to increase your chance by getting recommended by web directories. Here is a list of directories you can submit.

NEVER for SEO friendly website

There are things that a SEO friendly website shall never do. These are the unethical techniques that were used by the black hat SEO which were practice previously. They can get you ban in popular search engine such as Google, MSN, Yahoo or Ask. Once it is ban, you might not ever see your site on these popular search engines again. But you may request for reconsideration from these search engine after all of these practices have been eliminated. However, Search engines kept records for those who had been ban from their services. The chances of seeing your website on their search engine again will be very low.

1. Do not perform links farms that create multiple links to your site to raise your page rank by any unethical means. In particular, avoid links to web spammers on the web.

2. Do not try to perform cloaking! Cloaking is to deceive users or present different content to search engines than you display to users. Build for users not for search engines.

3. Do not try to use sneaky redirects via JavaScript or any other means.

4. Do not load page with irrelevant keywords in order to attract traffics.

5. Don't create pages with malicious behavior, such as installing viruses, Trojans, or other badware.

6. Don't use unauthorized computer programs to submit pages, check rankings, etc. Such programs consume computing resources and violate search engines Terms of Service.

Conclusion

This guide provides all the necessary things you should know for any SEO friendly site. Honestly, having your site being indexed and mature takes longer than just building a SEO friendly site. The keywords to achieve results is consistently update and upgrade your site for the latest SEO trend on World Wide Web. Lastly, if you guys have any thing to update on this post feel free to give me some feedback on improving the overall guideline.

Overall Introduction to SEO (Search engine optimization) essential that beginner needs to know

Introduction

If you have entered this post, you might probably be one of those who came across SEO this acronym for the first time. SEO which is also known as 'search engine optimization' or 'search engine optimizer' is a process of improving the volume of traffic to a web site from search engines via search results. There are billions of people out there using search engine to seek for information that are desirable to them. Without search engine, goal knows where are all the gold in the World Wide Web?

Who needs to know and learn SEO?

Personally, I think this should be split to two groups. Group that required to learn and another group that is not required to learn. But both of them should at least know there such term call SEO. Web Developers and designers are definitely in the required group. In order to produce a better SEO web site, the required group will need to know SEO to perform quality services for their consumers or themselves. Learning them late will cause quite a bit of problems when it comes to indexing on search engines. The optional group will most likely be people who wish to know more about SEO (that is why you are here) which doesn't really required a number of hands on job with your website.

How does SEO works?

Seriously, SEO works according to the rules of the search engine. In order to keep your site on top of the search result, one has to blind themselves with the rules of the search engine. Different search engine has different rules so it depends on which search engine you are targeting. However, most search engine works similarly nowadays. They all have crawlers which crawl your submitted site pages but not all crawled pages are being indexed by the search engine. The reasons why it is not being indexed although it has been crawled by the search engine are because crawler looks at different factors (rules) when crawling a site. Of course, the factors are being advice to the webmaster nowadays from the search engine site to prevent incident that happens between 1997-2005. (Webmaster excessively stuffed irrelevant words in order to climb on top of the search result)

How does crawling works?

bear in mind that the spider or googlebot that enters your site to crawl your data do not stay in your site for long. It will basically sees what it appeared to them and get what they found and return to the server with the information gathered from your site.

Which website is suitable for SEO?

SEO is a good way to attracts traffics to your site but it definitely does not guarantee any sales. Thus, not all website are suitable for such marketing strategy whereas other types of internal marketing strategy might be better in this situation. Furthermore, if your website is a business website, it is definitely not advisable to depend on search engine for referrals! The reason being is those search engines are not paid by you to operate, which means they are capable of changing their search algorithm which will severally damage your business operation as they are no longer sending visitors to your site. Thus, it is wiser to get traffics from other permanent places such as traffics from other links.

Who are the trusted SEO?

Personally, there are MILIIONS of marketing fraud in the World Wide Web. Every single advertisement is so attractive that makes consumers eager to purchase from them. This is not only happening in SEO but many other parts of the industries. A lot of research will have to be done before purchasing a certain goods from the World Wide Web. Please do not trust most of the site which are paid to review these products. They may be honest but they are being paid after all. Therefore, your best bid is to research very carefully on the reviews given by non-paid reviewers that have experience with their services. Google has list down few things that you must look at when dealing with a SEO.

What are the best search engines for SEO?

The answer really depends on where you are right now. Different country uses different search engine for their daily needs. For example, Baidu dominates the search engine in China whereas in Russia, Yandex controls 50% of the paid advertisement revenue. It varies from country to country.

Where is Google standing for SEO?

Google has done a great job in educating web master on how Google search engine work. All types of fantastic search engine tools have been developed by Google for SEO in their search engine. Many talks about Google methods of indexing site which most of us are applying the best practice Google has provided for us. There are definitely no guarantee ways of being indexed by a search engine without playing fairly. The best way is to learn SEO and apply to your website either by yourself or your company. There are definitely no shortcuts on SEO (not even if you pay Google). But at the end of the day, you learn something which may benefit you.

Hope this sums up all about SEO.