Wordpress

Google fonts with a beautiful ampersand – what’s up with Baskerville?

Design, News, Website Design, Wordpress

I spent some time recently working on a couple of website designs that could really use a little design flourish, and I thought styling the ampersand would be just enough. Looking back to an old bit of code I knew you could usee CSS to style your special ameprsands, render them in Baskerville styled in Italic and hey presto….. wait what? This doesn’t look so good anymore, what the heck is up with Baskerville.

After trawling the web for a while I *think* I have found the answer – Baskerville is now called ‘Libre Baskerville’ in the Google font library, so changing your css font-family reference from “Baskerville” to “Libre Baskerville” fixed it up. For a couple of great references on styling beautiful ampersands I’d recommend these resources.

https://johndjameson.com/blog/ampersands-and-google-fonts/

My Top 30 Fonts with the Sexiest Ampersands

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 WordPress 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~~ Siteground. 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. (Incidentally here is an article from WP Engine – How Site Speed Affects Your Business).

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 and Siteground. 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 →

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 →

WordPress, Woocommerce Speed & How To Make Them Faster

Website Design, Wordpress

I’ve been building a website using Woocommerce for the first time recently. It started off with less than 100 items and expanded to over 500 by the time we had finished. That’s still not many products at all but I began to notice some speed issues after a while and if they were bugging me they were definitely going to bug the customer once the site was live. {There is now an updated post on speeding up a WordPress site here.}

I started researching WordPress speed in general as I suspected it was an issue with the framework itself rather than Woocommerce, although more likely a combination of the two, and along the way I found some useful articles and tips which I thought I’d share.

To make your WordPress / Woocommerce site work faster you need to tackle 3 areas, in no particular order :

Optimise your database
Check your theme & code
Check your plugins

Note – it goes without saying that you should backup everything before you start. If you don’t already have a WordPress back up solution then I’d recommend looking at either Backup Buddy or Updraft, both of which are really great, I’d say it’s just down to personal preference which one you choose.

1. Optimise Your Database

I found 2 really useful plugins for this. The first is called DB Optimise Plugin – http://cagewebdev.com/index.php/optimize-database-after-deleting-revisions-wordpress-plugin. It removes all redundant data from your database. Coupled with switching off WordPress revisions I noticed quite a speed improvement with this. If you want to switch off WordPress post revisions then add this line to your wp-config.php file:

define('WP_POST_REVISIONS',FALSE);

If you want to get more information on what this does please read more in the WordPress Codex.

The second plugin is called SQL Profiler – http://wordpress.org/extend/plugins/mysql-profiler/. Once installed and activated it will show you a list at the bottom of your page for every single database request made on that page, how long each query took and the total time. Crucially it also shows you where the request came from. In my case I discovered one of the Woocommerce plugins was taking a terribly long time to run a request that I didn’t even need.

2. Check your theme and code

Validate your code at http://validator.w3.org/ to get rid of any silly errors. Then really dig deep if you are using a third party theme and third party plugins. You may have paid good money for those but that does not mean they have been written well. A good tool here is Pingdom which tests the loading speed of your website and can often pinpoint a particular bottleneck. It shows you every external file the page has to load, for example javascript files, css stylesheets and images and tells you how long each took to load. It even breaks the information down further enabling you to figure out if your server is what’s slowing everything down.

My initial tests on the homepage of the site I was analysing gave me a loading speed of 6 seconds, which is way too slow. This led me to making a few changes as follows:

I merged as many css files as was comfortable
I removed all calls for unecessary css and js files from the functions.php file

3. Check Your Plugins

Make sure they are all up to date, it’s a simple step but if a plugin developer has found a bug they may well have released an uodate that fixes it and makes it work better.

4. Change your host

Check your site using Google PageSpeed Insights, if it shows server response time as one of your issues then you may want to look at changing your host. Try WPengine for managed scalable super fast hosting for WordPress websites.

So, Did It Work?

Yes. I’ve only gone through a few steps so far but I have reduced the page load time from 6 Seconds down to 3.5 Seconds. Still not good enough but I’m pretty happy with the progress so far, especially as I know there are quite a number of things I could still improve on that will bring the speed down much further. I will update this when I’ve completed the next stage.

This was a really useful article, he goes into more detail than I have – http://www.sdavismedia.com/page-speed/

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.

Protecting Yourself From Email Harvesters & Spam Email

Wordpress

None of us like getting an inbox full of spam mail and there are a few ways to show your email address on your website that can go some way towards fooling email harvesters.

One way is to replace the chracters in your addres with words. For example emily@acompany.com would be shown as emily {at} acompany {dot} com.

If you are using WordPress it has a built in function:

antispambot()

… which encodes your email address randomly. Really useful when it comes to keeping your inbox clean of junk!

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

News, 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 shoot me an email and I’ll send you the file.