Graphic and Web Design

The keyword meta tag:

Google, for many years, has ignored this meta tag because of abuse and keyword stuffing. We tend not to use it and instead focus on including keywords and key phrases in the web site’s copy.

Keywords and Key Phrases:

Google trawls the site and counts the number of keywords (single words) and keyphrases (2 -3 words) on each page, these will be what you will need to research using tools such as https://adwords.google.co.uk/select/KeywordToolExternal and http://www.google.com/sktool/# and whatever you think people might search for to find your site. We then need to add them to the site as much as possible in the following areas…

Page title:

All page titles (the words in the top of the browser) should be unique for each page and include a brief summary of the page content, this is a good area to add keywords but needs to be short and descriptive. Please note that this will be the title that appears as a header in the Google results.

Meta description tag for each page:

We need to to add a unique description for each page into the description meta tag <meta name=”description” /> that incorporates your chosen keywords in some way, however it is recommended that this doesn’t exceed more than 20 words and is a concise summary of what is on the page. Note this also will appear in the search results under the page title above

Header tags:

We optimise all our sites to use the headers tags, the H1 header tag being the most important. On each page (it is not visible to the user, only in the source code) we should add a unique summary about each page using keywords/keyphrases where we can. So something like “Your Company Name an outsourced marketing solution for small to medium sized companies” would be better than having “Your Company Name”. This is for you to decide though once you’ve pinned down a number of keywords and keyphrases to use.

The content:

Content is king! …and the more content that Google can sift through the more keywords and keyphrases it can find and index. Each page should include as many keywords/keyphrases as possible, but it still needs to be readable! If you put too many in there you run the risk of being penalized by Google for keyword stuffing and possibly being removed from their pages for a short time.

There are examples of web sites using hidden frames with a long list of keywords stuffed into them, Google will detect this and remove the page as a penalty. The most important rule to follow at all times with SEO is to make the page readable to visitors – it’s all about the visitors after all!

You can check keyword density of your pages here: http://www.seochat.com/seo-tools/keyword-density/. An optimum keyword density is 6-8% but 20% can be allowed if it reads well.

Images

Images are a good way for putting in extra keywords using ‘alt’ in the img tag, so <img src=”yourimage.jpg” alt=”keywords and keyphrases go here” />, adding as many images to your site is recommended.

Emphasis

Emphasising keywords/keyphrases with bold or italics is recommended.

Links

Using Anchor text is also recommended, so using <a href=”a page on your site.html”>A keyword or keyphrase here</a>. This is a form of emphasis and tells google that it is important.

Blogs

As I said content is king so adding a blog to the site is highly recommended as the site content is very bare – this enables more content to be searched, attracts visitors and helps build links to the site.

Links from other sites

Google ranks each and every website with a scale of 1-10 (1 being less important – 10 most important), start to get external links back to the site, post on forums or directories as pages with high google ranking that link back to your site can be a huge help.

body
{
	min-width: 600px;
	text-align: center;
}

#container
{
	margin:0 auto;
	text-align: left;
	width:600px;
}

To centre the div we have to set it’s width and use margin:auto on the right and left side, we apply this to the #container div.

This will work in most browsers except Internet Explorer. However IE incorrectly uses text-align:center. Applying this to the body means that we have a horizontally, centrally aligned container.

Using text-align:center in the body will centrally align all text, of course. To get around this we have to apply text-align:left in the #container div.

Et voilà! We have a centrally aligned div

<?php
$qs = $_SERVER['QUERY_STRING'];
$pos = strrpos($qs, '://');
$pos = strpos($qs, '/', $pos + 4);
$_SERVER['REQUEST_URI'] = substr($qs, $pos);
$_SERVER['PATH_INFO'] = $_SERVER['REQUEST_URI'];
include('index.php');
?>

All this does is fix the REQUEST_URI and PATH_INFO variables and then include index.php, so Wordpress will do the rest. It’s simple, it doesn’t duplicate functionality already in Wordpress and it doesn’t have the overhead of another http request for every page hit. The installation steps are:

1. Create the file wp-404-handler.php in your base Wordpress folder.
2. Set your sites 404 page to point to the wp-404-handler.php url. Most control panels at web hosts allow you to do this. If you’ve got the option to select between FILE and URL then choose URL.
3. Go to Options -> Permalinks in your Wordpress admin page, and choose an appropriate structure for your links.
4. Enjoy!

Original post

Removing Dashboard Menus

If you want to limit the menus on the left hand side particularly the ‘appearance’, ‘tools’, etc so clients cannot fiddle too much with the workings of the site then insert this code in the functions.php file in your theme directory.

function remove_menus () {
global $menu;
		$restricted = array(__('Posts'), __('Media'), __('Links'), __('Pages'), __('Appearance'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'));
		end ($menu);
		while (prev($menu)){
			$value = explode(' ',$menu[key($menu)][0]);
			if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
		}
}
add_action('admin_menu', 'remove_menus');

Source

Disable the “please upgrade now” message

WordPress regularly release new versions and for security reasons it’s a good idea to update as soon as possible. However disabling the “Please upgrade now” message is a good idea because the developer can then do it.

Paste the code in your themes functions.php, save it, and that’s that.

if ( !current_user_can( 'edit_users' ) ) {
  add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
  add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
}

Source

Remove dashboard widgets

Introduced in WordPress 2.7, dashboard widgets can be pretty useful. For example, some can display your Google Analytics stats. A few your client won’t need: is your client really interested in the latest plugins and recent posts from the Wordpress development blog? Probably not so paste this code in your functions.php file.

function example_remove_dashboard_widgets() {
	// Globalize the metaboxes array, this holds all the widgets for wp-admin
 	global $wp_meta_boxes;

	// Remove the incomming links widget
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);	

	// Remove right now
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}

// Hoook into the 'wp_dashboard_setup' action to register our function
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

Source

Define your own login logo

A lot of clients will be very happy to see their own logo on the dashboard login page, instead of the WordPress logo.
The Custom admin branding plugin can do that for you, as well as the following hack that you just have to paste in your functions.php file.

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
    </style>';
}

add_action('login_head', 'my_custom_login_logo');

Source

Replace dashboard logo with yours

Just as a client will love to see their own logo on WordPress login page, there’s no doubt that they’ll enjoy viewing it on the dashboard too.
Simply copy the code below and paste it to your functions.php file.

add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
   echo '<style type="text/css">
         #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }</style>';
}

Source

Change WordPress dashboard colors

If you ever wanted to be able to change WordPress dashboard colors (as well as font or even display) without having to edit WordPress core files, you’ll like this hack for sure.
The following example features a basic style change (grey header is replaced by a deep red one) but you can easily add as many styles as you wish within the <style> and </style> tags.

function custom_colors() {
   echo '<style type="text/css">#wphead{background:#520709}</style>';
}
add_action('admin_head', 'custom_colors');

function custom_colors_footer() {
 echo '<style type="text/css">#footer{background:#520709}</style>';
}
add_action('admin_footer', 'custom_colors_footer');