wordpress

Speed Up WordPress With Hosting & Caching Changes

News, Wordpress

I wrote an article last year about how to speed Woocommerce up. It’s turned out to be a pretty popular post, but as with everything online things have moved on and it feels like the right time for an update. WordPress is great but the number one complaint you hear is ‘WordPress is slow!’ – it doesn’t have to be, and here’s our advice on how to speed up WordPress making 2 simple changes – optimise your hosting and cache your content.

Change Your Hosting

You need to start by figuring out if your hosting is part of the problem. This website is hosted on a server managed by Names.co.uk. We have used WP Engine in the past for some clients who preferred that as a hosting option, and Dreamhost has also come highly recommended.

Use Google PageSpeed Insights to check a variety of issues on your website, including server response time. Server response time measures how long it takes to load the necessary HTML to begin rendering the page from your server, subtracting out the network latency between Google and your server.

If it looks like your server response time is slow then this is the single most important thing you can change to speed up your WordPress website.

If you find your hosting is lacking there’s plenty of good hosting companies out there that you can move your website to, and the market has changed a bit in recent years with the emergence of companies like WP Engine and Dreamhost. WP Engine provide hosting just for WordPress websites and aims to deliver super fast hosting whilst dealing with a lot of the configuration for you. They provide caching and a CDN and handle updates for you so if you’re a ‘not so techy’ WordPress website owner this could be the best solution for you to speed up your WordPress website. With plans starting from $29 (£18) per month and a 60 day money back guarantee you can’t really go wrong giving it a go! WordPress Hosting with WPEngine.com →

If you want a more ‘independent’ feel to your hosting I’d recommend Namesco. They host this very website and I’ve been a happy customer of theirs since 2008, using both a VPS (Virtual Private Server) and a dedicated server. There have been a few blips along the way but the uptime has been for the most part superb, their support has improved with a team who have been endlessly patient with me over the years. They provide plenty of hosting options, from shared hosting, through to fully managed dedicated servers and cloud hosting. Visit the Namesco Website →


SPEEDUP-250x250-v1
$50 off shared hosting

Caching Your Content – Pre-Making Your Sandwiches!

So what is caching? The simplest way I can think of describing it is this – Imagine walking into a cafe and ordering a sandwich, waiting for someone to slice the bread, and make the sandwich. Compare that to walking in to the same cafe, ordering the same sandwich but being handed it straight away, so you hand your money over and off you go. You’re already half way down the street while the other guy is still waiting for his bread to be buttered. Are you still with me?!

If you’re confused, what I’m saying is you need to pre-make your web pages.

WordPress stores all your page and post content in a database, and every visitor to your website that asks to see one of your pages is making the WordPress elves scurry off to find all the bits of data and assemble them into a page. Imagine 20 visitors ask for the same page this afternoon, if that’s a page you only update once a month then why would you do that? It would be much more sensible to have a pre-assembled version ready to show each of them wouldn’t it? ANd then if you made a change to that content you’d just rebuild that version and so on. Well, that’s caching your pages!

There are several well known caching plugins that have been around for a number of years and while they do a great job they are pretty complicated and awkward to set up and use. And then WP Rocket walked into my life a few months ago and all that changed. It’s not free, but you get what you pay for, remember! You download it, install and configure it in less time than it takes to put the kettle on. Seriously, just by activating the plugin you are caching your pages. It is amazing! Visit the WP Rocket website →

Fixing The Navigation Sorting For WordPress Custom Posts

Wordpress

While building Lightstorm, my soon to be released custom WordPress theme, I added next and previous links to the bottom of each individual custom post item. In this case I wanted to build a portfolio and to enable the user to click backwards or forwards through the entire portfolio. I added the WordPress next and previous links code thinking it was a nice easy job and then realised that the links were not taking our portfolio custom sorting into account. Oh.

Having googled the problem I couldn’t find exactly what I was looking for so I set about writing some of my own code to fix this and here it is for you to use to.


<?php 
	global $post;
	$prev_title = "";
	$next_title = "";
	
	$args = array(
    'orderby'         => 'menu_order',
    'order'           => 'ASC',
    'post_type'       => 'portfolio',
    'post_status'     => 'publish' ); 
    
	
    $myposts = get_posts( $args );
	$arr = array();
	
	foreach( $myposts as $post ) :	setup_postdata($post); 
		//build array of posts
		$arr[] += $post->ID;		
	endforeach;

	wp_reset_query();

	//find index of current post id in the array
	$currentIndex = array_search($post->ID, $arr);
	$prevIndex = $currentIndex-1;
	$nextIndex = $currentIndex+1;
	$maxNumber = count($arr) - 1;
	
	//show the links
	if($currentIndex != 0){
		$prevID = $arr[$prevIndex];
		$prev_title= "«« ".get_the_title($prevID);
		$prev_permalink = get_permalink($prevID);
	}


	if($currentIndex != $maxNumber){
		$nextID = $arr[$nextIndex];
		$next_title= get_the_title($nextID)." »»";
		$next_permalink = get_permalink($nextID);
	}
	
	echo "<div class='navigation'>";
	echo "<div class='five columns alpha'>";
	echo "<a href='".$prev_permalink."'>".$prev_title."</a>";
	echo "</div>";
	echo "<div class='five columns omega'>";
	echo "<a href='".$next_permalink."'>".$next_title."</a>";
	echo "</div>";
	echo "</div>";
?>

If there is a better way of doing this we’d love to know.

Find The Page Template Name In A WordPress Theme

Wordpress

While developing a custom WordPress theme recently I found myself in a situation where I needed to find out the name of the WordPress page template being used for the current page.

After searching the WordPress Codex I had found the code which enables you to check the page template by using a string comparison like this:

if( is_page_template( 'template-name.php' ) ) {
  //some code
}

….function but the file name I was passing it kept returning false.

I eventually found this code, which does exactly what I needed and returns the full file name of the template being used for the current page.

 $template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true ); 

Incidentally in case anyone else finds themselves in the same situation as me when I found out the full file name I was surprised – it was giving me a filename that no longer existed. So remember that if you rename a page template file you also need to go to each WordPress page that uses that template and reassign the template to it.

Custom Widget Checkboxes Not Staying Checked

Wordpress

During the process of writing a few custom widgets for a custom WordPress theme I found a frustrating problem when using a checkbox as one of the widget options. The checkbox was functioning properly but when it was checked and then the widget options saved it was being unchecked.

The answer is really simple but I had a bit of trouble finding the solution – you have to make sure that the value saved is of the correct type, in this case a boolean as shown in the following code.


<input class="checkbox" type="checkbox" <?php checked( (bool) $instance['photo'], true ); ? > id="<?php echo $this->get_field_id( 'photo' ); ?>" name="<?php echo $this->get_field_name( 'photo' ); ? >" / > 

Showing The Active Page With The WordPress Menu Walker

Wordpress

Just the same as many other WordPress developers when it came to building and modifying themes I really needed to be able to customise the menu. I found a few tutorials on extending the WordPress Walker to add a button description, most notably this one by Kriesi but I couldn’t find too much about showing the active page.

To start with what is the Walker class? I’ll let the WordPress Codex explain:

The Walker class encapsulates the basic functionality necessary to output HTML representing WordPress objects with a tree structure. For instance, pages and categories are the two types of objects that the WordPress 2.2 code uses the Walker class to enumerate.

There are two parts to getting this to work. Firstly including the code in the custom menu walker class to ensure the correct WordPress classes are assigned to your button. WordPress already adds a unique class to the active item, we just need to make sure it is also added in our class.


$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names .= in_array("current_page_item",$item->classes) ? ' active' : '';
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

The second part is simply to add the appropriate style to our css file:


#menu-main li.active{
 border-bottom: 4px solid #00CCFF;
}

And that is it 🙂

If you’d like a copy of the full navigation class [sm mailto=”emily@brainstormcreative.co.uk” txt=”shoot me an email”] and I’ll send you the file.