Optimize WordPress in five minutes is a tutorial that I have created for people that have no idea on how to code or to develop a WordPress website and it will help them optimize their website with a few tricks like, cleaning old trackbacks, removing old posts and fixing Errors from Google Webmaster tools. About a month ago we have finished the redesign of our website which took us between 15-20 days. The next step was to optimize our database and remove old low-quality posts and trackbacks. I have to say that it is not an easy task to maintain a clean WordPress website especially if multiple authors are producing content.
Start with the Trackbacks
I have recently discovered that before we implement the Disqus Comment system we had hundreds of useless trackbacks on our articles, we are talking about 160.000 useless trackbacks that made our SQL database slow. So we have decided to remove all of them and for 2 people it took us 48 hours with the following trick.
- Login to WordPress
- Go from the Sidebar to All Comments
- Go to the screen options (top right) and Uncheck the 2 options and set the view limit to 100 (shared hosting)
- Then type in the search the following […]
- Now select all trackbacks and move them to trash.
- Repeat the last two steps until you delete them all.
- When you finish remember to empty trash
Optimize WordPress Database
This is one of the most important things when you are running WordPress is keeping your database clean and optimized which means healthy and secure website. Many people are afraid of touching their database which is logical if they have no idea what they are doing, but here is a plugin called Wp-Optimize that more than 200.000 webmasters are using and have rated with 5/5 stars. I myself using this plugin to optimize weekly this website’s database so don’t be afraid about anything. Just in case though and remember to do this every time you optimize WordPress, Backup your Database.
- Install Wp-Optimize
- Go its settings and tick the following (Remove all Post revisions, Remove all auto draft posts, Optimize database tables)
- Click Process
After the optimization finishes check the results, it should show something like this 1240.45kb Saved. If you run the optimization for the first time this number should be a lot bigger especially if you have more than 500 articles published.
Implement Nivo Slider
You will need FTP access in order to upload the files to their corresponding locations. This method will allow you to add slides through the backend of WordPress without the need for hard-coding your images/slides into the page.
You get the following files and folders with the package.
Note: You don’t need to upload the demo content, the following files are the ones that need to be uploaded. The javascript files can be placed inside the js folder just make sure to refer to the right location.
Reference Location Below:
themes (folder and content)
jquery.nivo.slider.js
jquery.nivo.slider.pack.js
nivo-slider.css
Step 1
First, create a custom post type. This adds the (UI) to the backend of WordPress and makes it look nice and clean. The red text is what is displayed in the (UI) of WordPress and it looks something like the image below, in this case, the section called “Slides” is what the code outputs.
Code Example:
/*………….CUSTOM POST TYPE…………….*/
add_action(‘init’, ‘slide_register’);
function slide_register() {
$args = array(
‘label’ => __(‘Slides‘),
‘singular_label’ => __(‘Slide‘),
‘public’ => true,
‘add_new’ => __(‘Add Slide‘),
‘edit_item’ => __(‘Edit SLide‘),
‘view_item’ => __(‘View Slide‘),
‘search_items’ => __(‘Search Slide‘),
‘not_found’ => __(‘No Slides Found‘),
‘not_found_in_trash’ => __(‘No Slides Found in Trash‘),
‘show_ui’ => true,
‘show_in_menu’ => true,
‘capability_type’ => ‘post’,
‘hierarchical’ => false,
‘supports’ => array(‘title’, ‘thumbnail’),
‘rewrite’ => array( ‘slug’ => ‘slides’, ‘with_front’ => true ),
‘_builtin’ => false, // It’s a custom post type, not built in!
);
register_post_type( ‘slides‘ , $args );
}
Leave the green text intact this is used in the HTML content to call out the slides.
Step 2
Search for this line in the functions.php in the admin section of your WordPress install. You need to add the red text to this section. Yours will look different all you need to concentrate on adding is the red text.
Code Example:
// This theme uses post thumbnails
if ( function_exists( ‘add_theme_support’ ) ) { // WP 2.9 or Greater
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 100, 80, true ); // Normal Post Thumbnail
add_image_size( ‘recent’, 188, 83, true ); // Home Page Recent Article Thumbnails
add_image_size( ‘slider’, 960, 350, true ); // Home Page Slider
add_image_size( ‘port-thumb’, 680, 200, true ); // Portfolio Thumbnail
add_image_size( ‘portfolio-thumb’, 240, 120, true ); // NEW Portfolio Thumbnail
add_image_size( ‘blog-thumb’, 230, 130, true ); // Blog Thumbnail
add_image_size( ‘ads-thumb’, 107, 107, true ); // Ads Thumbnail
add_image_size( ‘blog-img’, 630, 530, true ); // Blog Picture
add_image_size( ‘head-banner’, 960, 250, true ); // Head Page Banner
add_theme_support( ‘automatic-feed-links’ );
}
Step 3
This part of the process needs to be added to the main index page of your website, mine was a custom page called page-home.php. This is because I have a custom built home page, you can always add it to the index.php page. It all depends where you want to place the slider. YOu can also change the amount of slides that are shown by changing the numerical value of the posts_per_page=?. I would suggest keeping it at a max of 5.
Code Example:
<div id=”slider” class=”nivoSlider”>
<?php $sliderpics = new WP_Query(‘post_type=slides&order=DESC&orderby=post_date&posts_per_page=5‘);
while ($sliderpics->have_posts()) : $sliderpics->the_post();
the_post_thumbnail(‘slider‘);
endwhile; ?>
</div>
Remember that green text with the word “slides” in it? Well this is where it is used and it actually places the image you want in the slider on the page itself.
Step 4
Now you need to call out the js and CSS files inside the header.php document through the backend of WordPress. Please note that I placed the js files inside a folder named “js” and the CSS inside a folder called “CSS”.
Code Example:
<script src=”<? bloginfo(‘template_url’); ?>/js/jquery.nivo.slider.pack.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”<? bloginfo(‘template_url’); ?>/css/nivo-slider.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”<? bloginfo(‘template_url’); ?>/css/default.css” type=”text/css” media=”screen” />
Step 5
The next snippet of code needs to be placed in the footer of the footer.php file. This is what controls the slider and the way that it works pauses and loads the images. You don’t need to use all the functionality that is located after the “.nivoSlider({“ that just shows the different options.
Code Example:
<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect: ‘random’, // Specify sets like: ‘fold,fade,sliceDown’
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3… navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: ‘Prev’, // Prev directionNav text
nextText: ‘Next’, // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
The end result is an integrated “Free” version of the Nivo slider that is easy to work with via the UI. This allows you to save on the cost of the actual plugin but if you want to buy the plugin be my guest. I’m not associated with the developers of Nivo Slider this is just my way of integrating the slider into WordPress, which in return allows for a person that is not a developer to easily add images to the slider.
The Final Steps
The last step is to check your Google Webmaster tool Errors. So log in and go straight to Diagnostics/HTML Suggestions. Maybe some people don’t have HTML errors (lucky ones) but if you do here are your options.
Option 1) Edit articles one by one and correct the HTML errors given by GWMT.
Option 2) If they are low-quality old articles just delete them.
Option 3) Install Robots Meta Plugin and edit each article by adding the “Noindex, Nofollow” Attribute.
After you finish with either option you have chosen you must wait about 1-2 weeks minimum in order for the articles to get re-indexed by Google and therefore your HTML suggestions to vanish. One last tiny step that you should consider doing after the optimization is logging into Webmaster tools for one more time after about 1-2 weeks and go through Diagnostics/Crawl Errors and remove the 404 errors in case you have deleted your old articles.
About the author:
Nicholas H. Parker works as a web developer to buy essay service. Besides, he is highly interested in the web design sphere.
