Make WordPress Post Title Shorter

This is not a function that you would need to use often, but I came across a reason to use it recently and I thought it might be a good idea to share it. All it does is limit the number of characters in your title, just in case you don’t want it to wrap onto a second line.
I used in a woocommerce product showcase page. The client had really strict requirements in how that page could display. To avoid misplacements from the titles we decided to make it to limit the number of character to fit in two lines.

Include this in your functions.php file between the PHP tags:


function short_title($after = null, $length) {
$mytitle = get_the_title();
$size = strlen($mytitle);
if($size>$length) {
$mytitle = substr($mytitle, 0, $length);
$mytitle = explode(' ',$mytitle);
array_pop($mytitle);
$mytitle = implode(" ",$mytitle).$after;
}
return $mytitle;
}

Then call the short_title function in your loop:



How to enable GZIP compression in WordPress

Nowadays, it is even more important that your WordPress website’s speed and loading time are fast as possible since speed is a ranking factor. This is due that Goggle and other search engines do realise that faster websites will have a better user experience (UX) than the slow ones. Let’s have look at it from the user’s perspective if a website is slow and has long loading times, you probably get bored and try another one. But WordPress isn’t the fastest CMS if you have tonnes of plugins or one of those premium themes with thousands of features.

So, getting better loading speeds to your site will grant you a better ranking, SEO, and also could reduce your bouncing rate and make visitors stay longer. As a website owner, this is a win-win scenario.

 

PageSpeed Tools GZIP Issue

 

We talked while ago in some small changes that can make a difference in your website’ speed. Today, we will talk into another optimisation that can make a big improvement to make your website load faster using GZIP, also called browser or HTTP compression.

How does GZIP compression work?

Before I show you how to implement the GZIP compression, let me explain how it actually works.

Basic Website Architecture

As you may know, most websites consist of a mix of different files like HTML, CSS, and JavaScript, that on a very basic level are just text files.

When your visitors request to see the site, their browsers download these files from the server and render your site from the code contained in those files.

However, these files are coded by humans and to make them easy to understand are arranged in a way that makes and it is easy to spot bugs quickly. It’s one of the many reasons why WordPress has coding standards.

In the other side, machines like your browser don’t care about the code be pretty or legible. As long as they can understand it, it can be written in one block or line. That’s the reason why making the code concatenated and minified makes WordPress sites load faster.

All these words mean nothing else than taking away all the formatting to make the code more legible for people, like comments, line breaks, spaces, and such.

File Compression

File compression takes the reduction in the size of these files even further.

To help understand how it works, we need to understand that the code generated in web development have lots of recurring patterns and elements. This is the nature of programming, any piece of code is at least somewhat repetitive.

GZIP is a compression algorithm that takes advantage of this by replacing those repetitive patterns with a shorthand.

On the very low level, Gzip is a library for compressing and decompressing data that works especially well for text-based content.

In fact, this compression algorithm can reduce the size of HTML, CSS, and JavaScript files by as much as 70 to 90 percent.

Nowadays, all browsers support GZIP and request it automatically first. This makes that enabling the algorithm in your WordPress site work on all modern browsers.

WordPress CMS is normally pretty slow if it is not well optimised. This is because all the plugins and theme files like images, styles or scripts.

How To Enable Gzip Compression For WordPress Websites

GZIP compression isn’t handled by WordPress itself but by the server. So, what I am going to explain here and the code below can be set and will work on any Apache server. As a WordPress developer, I prefer to get my hands dirty and add the code into the server file but there are other viable solutions even with a WordPress plugin.

But before doing anything, you should check if GZIP is already enabled in your server.

Check if GZIP is enabled

Especially if your website is hosted by a quality hosting provider, they might already offer Gzip compression as part of their standard service or have it already set up. Therefore, before you start making any changes, it may be a good idea to give them a call either way.

At Albiesoft, we use Check GZIP Compression website to check if compression is active for your website before continuing.

 

Abliesoft - WordPress GZIP compression enabled

 

If GZIP isn’t enabled for our WordPress sites, we have the following options to enable it.

Ask Your Hosting Service Set It Up For You

As I explained, the most common way to enable the compression algorithm is through a server file. This server file sets different parameters in which control how browsers access to your server. This file, called .htaccessis really important and it is important to note that a small mistake can put your server down.

Below, I will show you how to enable GZIP compression manually but if you don’t feel comfortable manipulating this sensitive file, some hosting companies will be able to do it for you.

However, if you feel uncomfortable implementing this yourself, you might be better off talking to your host instead. But, If it’s not enabled and you want to take care of it yourself, check the steps below. Don’t worry, it’s not rocket science.

Use A WordPress Plugin

WordPress wouldn’t be WordPress if there wasn’t some sort of plugin for all sorts of features. Enabling Gzip compression is one of them.

One of them is Check and Enable Gzip Compression, which is built for exactly this purpose. This plugin counts with more than 10,000 installs but has very mixed reviews and ratings and may not be the best option. Since it will be dealing with server configuration I wouldn’t risk using it.

Yet, don’t despair, there are other alternatives.

Number one is the caching plugin W3 Total Cache. This plugin is used for concatenating, compressing and caching from HTML files to CSS. It can also enable GZIP,  under the Browser Cache settings, you can find a checkbox to add HTTP compression to your WordPress website.

Don’t forget to save your settings after enabling it!

Wordpress Plugin: W3 Total Cache

Another option is its competitor, WP Super Cache. If you have it installed this plugin, you can find an option to Compress pages so they’re served more quickly to visitors under Advanced.

Check it, save, and you have Gzip enabled on your site.

Wordpress Plugin: WP Super Cache

Finally, a third (premium) caching plugin named WP Rocket not only gets a lot of good press but also comes with compression built in. At albiesoft, this is our preferred caching plugin and we use it in WordPress websites that we design, develop and maintain.

 

WP Rocket best Caching plugin for WordPress

So, if you aren’t comfortable to add some code and your hosting company doesn’t include it, there are plenty of plugins you can choose from that will get the job done.

However, WordPress plugins are great but if you use so many, they could slow your site. So, you can still enable Gzip compression for your WordPress site by hand. This is how we do it.

Enabling Gzip Compression Manually

As mentioned earlier, the server file responsible for enabling this features is called .htaccess (including the dot). It is used for implementing access instructions to the server like for example, when you set up pretty permalinks in WordPress, the CMS adds rewrite rules to make this happen. Other things this file can do are redirects, protecting files and folders from access and including Gzip compression.

Find And Edit .htaccess

To be able to do any changes to your file. First, you will need to find it and this task isn’t that easy. This file is so important that is hidden by default so you will need to ensure that the FTP client is set to see hidden files. You can access the file through the cPanel but using FTP is way easier in our opinion.

In our case, we will start by opening our FTP client and connecting it to the server. .htaccess is usually found in the root directory of your website. However, as I mentioned, it is most often invisible.

Enable showing hidden files in FileZilla FTP client

 

At albiesoft, we use FileZilla as the main FTP Client. There you can easly set up the software to show hidden files under the Server tab.

Add The Necessary Code

Overall, enabling Gzip compression is not that challenging.

All it takes is adding the following piece of code to the .htaccess file:

It doesn’t really matter whether you place the code inside or outside the # BEGIN WordPress and # END WordPress brackets, it will work either way. We actually place it always outside and before the WordPress block.

Save and upload your file and Gzip should be ready. However, in order to be sure, you should verify it’s actually doing its job.

Our Thoughts About Gzip Compression For WordPress

It should not be underestimated how much your site’s load speed can affect its popularity among visitors and search engines.

Page loading speed has become one of the most important signs of quality. Website owners should do their best to make their WordPress websites as fast as possible.

While there are many ways to speed up your WordPress website, Gzip compression is a simple yet effective tool that can make a huge difference.

Aside from that, if you want us to help you implementing GZIP or any other optimisation into your WordPress site you can always email us.

However, let us know if you tried enabling Gzip for your website? How did you do it? Any thoughts or additional tips? Please tell us about it in the comment section.

Page Speed – Why is so important to optimize it in your site?

Whenever the author of a website puts it online, they hope to have a one click money making machine. The advances in web development have been purely based on attracting visitors from far and wide to the site including Search Engine Optimization (SEO), affiliate marketing, sponsored links and Google ads among other improvements. That remains one step in the process of realising sales from visits and this is where any advantage helps in beating both the competition and the recession

Page Speed

What is the page speed and why it is so important in today? It actually refers to the time a visitor have to wait until your page is completely loaded. This is one of the most important factors that can lead to bad user experience.

Slow page speeds mean that your visitors will wait longer to get the content they requested. If this takes long enough for the visitors get frustrated or lose interest could lead to a loss of revenue.

Also, Search Engines will rank you better if your speed is better than your competitors.

How to Acquire Good Page Speed

Page speed can be engineered at the design stage of a website but once completed, then you may seek the help of a hosting service to boost your page speed. At design, it can be done through things like content management, multimedia additions, mobile adaptations and dynamic design.

The speed of loading a page can vary for different reasons. The tips on acquiring great loading speed include:

  • Reduce WordPress Plugins – Too many plugins in WordPress can be hurting your page speed. These plugins can be coded poorly or badly maintain.
  • Create a Custom Theme – Premium themes are great but they normally pack with so many features that you don’t need. The best way is to create a custom theme from scratch. This will be fully optimised for your needs.
  • Gzip Compression – Be sure to check the hosting service of your choice uses Gzip compression. Gzipping reduces response time and the size of the HTTP request.
  • Enable Keep Alive – The error page that appears once you stay on a page for too long without activity requiring log-in once again can be eliminated with the use of the keep-alive function. It reduces the time taken to process subsequent log-in requests and as such ensure your hosting service keeps it in use as it is mostly optional thus ignored.
  • Browser Caching – The use of expires headers allows the website’s images to be stored in the cache for faster loading upon the next visit. The service should be keen to include this function.
  • Content Delivery Network (CDN) – This is a list of servers around the world that serve visitors to websites based on their location. This allows international visitors to load your site quicker with the use of servers near their location. Request your service enables this feature.
  • Minimise redirects – The number of times your website has to go to and fro from pages it had accessed or required something from should be kept to a minimum. The use of similar links either in the cache or for the resources they have should be referenced in the redirect to ensure swift changeover from one link to another.
  • Delete Queries from Static Pages – The codes and strings of query should be deleted from static resources. The time to process code that leads nowhere can result in errors for clients.
  • Specify Character Set – The character set once specified allows the website to render much faster.
  • Image Optimisations – The images should be specified in terms of their dimensions to ensure the server does not process the code for the whole page once it loads. Images can also be optimised by removing comments, colour specifications and any redundant code to allow faster rendering.
  • Putting CSS first, JS last – Cascaded Style Sheets (CSS) allow rendering of the page’s layout to be prioritised leaving the user with something to look at as the server finalises processing the JavaScript (JS) code. Ensure your hosting service has this feature.

Benefits of Good Page Speed

Some statistics to back this assertion include:

  • That Mozilla Firefox reduced average load time by 2.2 seconds and gained 15.4% downloads.
  • Walmart.com found that load times increasing lead to sharp declines in conversions.
  • Autoanything.com cut load times in half and a 9% conversion rate was realised with a growth in cart contents and overall sales.

The following can be some of the benefits of reducing load times from your hosting service:

  • Opens up a world of possibilities with mobile clients who buy the fastest and have highest conversion rates.
  • Increases chances of the site getting favourable search engine rank due to the number of successful visits.
  • Attracts clients from referrals with great success and enables conversions for both website and referrals.
  • Success can be translated into SEO success with social media and blogs supporting the website.
  • Revenue from other sites advertising with you either through affiliate marketing or google ads.

Hosting Services to Consider

  • WP Engine – A WordPress optimised hosting service to push websites and blogs on the famous platform to greater page speeds and favourable search engine rankings.
  • Bluehost – This is a great avenue for websites seeking reliability and great Virtual Private Server and Dedicated server hosting. They have a host of sister companies and are flexible in terms of cost and quantity even though their quality in terms of reducing load times is not as impressive as other options.
  • SiteGround – This is a more all-around company that offers hosting for Joomla, Magento and WordPress sites with web hosting, dedicated hosting and cloud hosting among their services. Famed for their strong presence in China and the USA, they often offer great security and fair page loading speeds allied to great customer care services for changes after the fact.

Hosting services are now in a race against each other to reduce loading times for their clients so before jumping ship, talk to the service you are on and see what they offer to maximise profits and most of all, realise higher conversions.

Create a Custom Menu in WordPress

Many of you asked me how to create a new custom menu in WordPress. This is actually pretty easy when you know what you are doing. It consists of two steps:

Register the new menu

The first step is opening your functions.php. Scroll to the bottom of the file. If you’d like to add only one custom menu, add the following code on a new line:

 

 

In this example, New Custom Menu is the name that will appear in your admin dashboard’s menu page to make it understandable for human eyes. The “custom-menu” name is what WordPress will understand to execute your code properly.

Now, you can call your custom menu any name, but we recommend that you make sure only the human-readable name contains spaces and capital letters.
If you would like to add multiple menus to your site, you can add them to a new line, like the code below:

 

 

You can add as many new menus as you’d like. The same rules for naming them will apply.

After saving the code,  head over to Appearance > Menus in your WordPress dashboard. There you should be able to see that your new menu is listed under the “Theme Locations” of the “Menu Settings” section.

Now, the job isn’t finished here. We have the backend ready and we can add/remove items from the menu tab within WordPress but we still need to add the new custom menu in the frontend of your site so it will render.

Adding Menu Locations to Your Theme

Here, depending on where you want to render this menu you will need to customise different files. If you’d like your menu to appear at the top of your page, for example, you’ll need to edit the header.php file. In the other hand, if you would like it to appear in your footer, you will need to edit the footer.php file.

Ir is important to note that you can place your menu anywhere and any template so you could add it to the sidebar by editing sidebar.php or even into the page itself and editing the page.php

The way you can place your new custom menu wherever you’d like is with this minimum code. There are more options that you can set into the array but this would be the barebones that you need to add to any of these locations.

 

 

Just replace “custom-menu” with a WordPress-readable name you chose. You probably want to style your menu with CSS so it goes beyond basic functionality and also looks great. To do this, you’ll need to create a class and add it to your theme with the following code.

If you want to style your menu with CSS so it looks great like the rest of your website. You will need to add a CSS class. There is an option to add a CSS class to the menu container called “container_class”. You can use it like the following code:

 

 

Just like before, replace “custom-menu” with the name you chose. In this example, I named my CSS class that I created “custom_menu_class”. You can change this with the CSS class you want to use for the menu container.