WordPress Version 5.2

On May 7, 2019, WordPress 5.2 “Jaco”, named for the jazz musician Jaco Pastorius, was released to the public.

As always, you can update your WordPress to the latest version or download the latest files from WordPress.org.

So what’s new with the latest version?

Site Health Check

Building on the Site Health features introduced in 5.1, this release adds two new pages to help debug common configuration issues. It also adds space where developers can include debugging information for site maintainers. Check your site status by going to Tools > Site Health, and learn how to debug issues.

WordPress 5.2 - Site Health

PHP Error Protection

This administrator-focused update will let you safely fix or manage fatal errors without requiring developer time. It features better handling of the so-called ‘white screen of death,’ and a way to enter recovery mode, which pauses error-causing plugins or themes.

WordPress 5.2 - Site Protection

Improvements for Everyone

Accessibility Updates

A number of changes work together to improve contextual awareness and keyboard navigation flow for those using screen readers and other assistive technologies.

New Dashboard Icons

Thirteen new icons include Instagram, a suite of icons for BuddyPress, and rotated Earth icons for global inclusion. Find them in the Dashboard and have some fun!

Plugin Compatibility Checks

WordPress will now automatically determine if your site’s version of PHP is compatible with installed plugins. If the plugin requires a higher version of PHP than your site currently uses, WordPress will not allow you to activate it, preventing potential compatibility errors.

Developer Happiness

As always, a large handful of developer-focused changes have also been made. The highlights of these include:

PHP Version Bump

The minimum supported PHP version is now 5.6.20. As of WordPress 5.2, themes and plugins can safely take advantage of namespaces, anonymous functions, and more!

Privacy Updates

A new theme page template, a conditional function, and two CSS classes make designing and customizing the Privacy Policy page easier.

New Body Tag Hook

5.2 introduces a wp_body_open hook, which lets themes support injecting code right at the beginning of the element.

Building JavaScript

With the addition of webpack and Babel configurations in the @wordpress/scripts package, developers won’t have to worry about setting up complex build tools to write modern JavaScript.

And plenty of more which you can read about here.

What we can do for you!

As always, it’s always best to keep your WordPress version and plugins up to date and use plugins from reliable authors that maintain their plugins. If you need assistance with upgrading your WordPress version, plugins, updating core code to be compatible with the latest versions of PHP (recommended) or anything else WordPress or digital related then get in touch by sending an email to [email protected]. We &hearths; WordPress and as specialists in the field; you can guarantee that you are in very capable hands.

Have a look at out portfolio – if it’s a web specialist you require; we’re here at your disposal ; )

It’s good to share

The Journey – Hi Ho Silva Lining…

If you would like to read about my freelance journey, you can read the full story here.

No time for the full story? No problem! You can see a visual synopsis below…

Silva Web Designs - Journey - The Struggle...

Silva Web Designs - Journey - Beaches

Silva Web Designs - Journey - Our Portfolio

Silva Web Designs - Journey - What we love - WordPress

Nathan da Silva
Founder | Silva Web Designs

‘‘ The Crazy & Creative Team ’’

 

M: +44 7511 68 1818
W: silvawebdesigns.com
E: [email protected]

If you’re a music lover, follow our Spotify playlist; maybe we’re on the same wavelength.

It’s good to share

Create a new WordPress admin user in the database

You can create a new WordPress admin user from within the database using phpMyAdmin.

Method 1

1.) Log into phpMyAdmin (cPanel / Plesk / Web Hosting / Managed WordPress).

2.) Click the _users table

3.) Click the Insert tab

4.) Fill in the following fields.

  • ID is any number you choose
  • user_login is the username for accessing the WordPress Dashboard.
  • user_pass is the password for the user. Make sure to select MD5 in the functions menu
  • user_nicename is the nickname for the user
  • user_email is the email address you want to associate with this user
  • user_registered is the date and time for when this user is registered
  • user_status should be set to 0
  • display_name is the name that will be displayed for this user on your site

5.) Click the Go button

6.) Click the _usermeta table

7.) Click the Insert tab

8.) Fill in the following fields:

  • user_id is the ID you entered in the previous step
  • meta_key should be the phrase wp_capabilities
  • meta_value should be

a:1:{s:13:"administrator";s:1:"1";}

9.) Click Go

10.) Click the Insert tab again

11.) Enter the following information:

  • user_id is the same number you entered in the previous step
  • meta_key should be the phrase wp_user_level
  • meta_value should be the number 10

12.) Click the Go button.

You can now login with the new Admin user.

Method 2

For developers who want to speed this process up, you can simply drop this SQL query in your database:-


INSERT INTO `databasename`.`wp_users` (`ID`, `user_login`, `user_pass`, `user_nicename`, `user_email`, `user_url`, `user_registered`, `user_activation_key`, `user_status`, `display_name`) VALUES ('4', 'demo', MD5('demo'), 'Your Name', '[email protected]', 'http://www.test.com/', '', '', '0', 'Your Name');
 
INSERT INTO `databasename`.`wp_usermeta` (`umeta_id`, `user_id`, `meta_key`, `meta_value`) VALUES (NULL, '4', 'wp_capabilities', 'a:1:{s:13:"administrator";s:1:"1";}');
 
INSERT INTO `databasename`.`wp_usermeta` (`umeta_id`, `user_id`, `meta_key`, `meta_value`) VALUES (NULL, '4', 'wp_user_level', '10');

Remember to change the databasename to the database you are working with. Also don’t forget to change the appropriate values.

It’s good to share

How to Disable the WordPress Admin Bar

When you are logged into your WordPress site, the software automatically displays a toolbar at the top of the page. And whether you’re looking at the site from your dashboard or the front page of your website – the toolbar is always there. For many users, this is rather annoying and even more so when your developing the site.

If you’re a developer, this toolbar can really throw off the design of your front page, particularly if you have some CSS detail, which may be obscured by the admin bar. Even if you’re not a developer, you may find the admin bar too distracting.

So the question we have today is; can you somehow get rid of this little annoyance? Yes, and thankfully, you can remove it in just a few short minutes. Today, we’re going to show you how to disable your WordPress admin bar from your website using various methods.

How to Remove the WordPress Admin Bar Directly From the Dashboard

First, you need to login into your WordPress website and enter the dashboard. In order to disable the admin bar, click on Users and find Your Profile underneath it. There, under Keyboard Shortcuts, you’ll see Toolbar. You just uncheck the “Show toolbar when viewing the site” box right next to it.

And you’re actually all done. By unchecking this box, you won’t be able to see the toolbar on the front-end of your website. Of course, the software will continue to display it on the back-end of the site.

Due to the fact that the admin bar displays useful information like quick links to the front, creating new pages and posts, and access to your profile, you should definitely leave this version of the admin bar as is – after all, it contains some of the more important information about your website.

How to Disable the WordPress Admin Bar Using CSS

While the first method is without questions the easiest, this is a close second in terms of difficulty. You only have to copy and paste the CSS code below in Appearance > Customize > Additional CSS, or your style.css file.

The CSS code to disable the toolbar is:


#wpadminbar { display:none !important;}

How to Remove the WordPress Admin Bar Using a Plugin

While the solution above may be easy it isn’t the only way to remove the toolbar. You have a ton of plugins that are able to help you with the same problem. The most popular plugin is the Hide Admin Bar designed by Shelby DeNike which currently has 30,000+ active installs and a rating of 4.5/5 stars.

Luckily, there’s nothing to configure here at all, all you need to do is download the plugin, active it and your toolbar will be gone. It doesn’t get easier than that.

On the other hand, if you want to hide the toolbar for some user roles, you should download the Admin Bar Disabler by Scot Kingsley Clack instead. This plugin gives you an actual interface, where you can:

  • Blacklist the toolbar for certain users
  • Whitelist the toolbar for certain users
  • Disable the toolbar for everyone

You need to go to Settings and click on the Admin Bar Disabler. From there, you can customise everything you want. Although there are other toolbar-disabling plugins out there, we feel like these two are the best. If you can avoid using a plugin then that’s even better as too many plugins can obviously slow your site down; that and you can achieve the same in just a few lines of code without a plugin!

How to Remove the WordPress Admin Bar with Code

If you don’t want to download any additional plugins, don’t worry, you can also disable the toolbar with code. There are a few different ways to go about this and this is our preferred method out of them all.

For starters, if you want to disable the toolbar for all users, simply add this piece of code in your theme’s functions.php file:


add_filter('show_admin_bar', '__return_false');

Another code you can use that will disable the toolbar if added in functions.php is the following one:


function hide_admin_bar(){ return false; }
add_filter( 'show_admin_bar', 'hide_admin_bar' );

But maybe you don’t want to disable the toolbar for everyone. If you want to allow the users with administrative privileges to see the toolbar, you should just add this code instead:


if ( ! current_user_can( 'manage_options' ) ) {
 add_filter('show_admin_bar', '__return_false');

And that’s all. As you can see, you don’t need to be a expert programmer to complete this task.

How to Remove Parts of the WordPress Admin Bar With Code

If you are looking for an easy solution to remove certain elements from the Toolbar you can do this using a code. First of all, you will need to search for the toolbar node ID for the element you want removed. You can find out more about this here.

For example, if you want to remove the WordPress logo from the toolbar use this code:


add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );
function remove_wp_logo( $wp_admin_bar ) {
    $wp_admin_bar->remove_node( 'wp-logo' );
}

Easy enough, right?

Summary

In the end, whether you think the toolbar is affecting your design or you simply find it distracting, you know you can completely remove it whenever you want. We hope this little guide showed you that removing the admin bar is not such a hard job.

Also, keep in mind that you can always:

  • Remove the admin bar from your dashboard
  • Remove the toolbar using CSS
  • Download a plugin that will hide the admin bar
  • Use your coding skills to remove it
  • Or remove certain parts from it
  • Of course, if you have any questions, or know have a unique way of removing the admin bar, let us know in the comment section below.

It’s good to share

4 Reasons to Use a CDN for WordPress

The Internet and any client has a need for speed; that much everyone already knows. But why is this so important for your WordPress site, and why should you use a CDN for WordPress to help with your site’s loading times?

You’ve probably seen the 3 second loading time chart many times. It, and countless charts just like it, are everywhere.

There’s a reason for that though – page loading time can massively affect conversions; it’s as simple as that. And what are most WordPress sites aimed at, ultimately? I know that my sites are all focused on somehow making money. Whether they’re affiliate sites or service-based websites, they’re all aimed at converting!

If loading times affect conversions, then fixing issues with speed is a good thing to do.

Here are four reasons that you may want to use a CDN for WordPress sites that you build or manage.

1. Your Site Will Load Faster with a CDN

This is one of the strongest selling points of setting up a CDN for WordPress.

One of the biggest speed killers for your website is distance. Specifically, the distance between your hosting server and the visitor’s browser. Whilst the size of your page makes a real difference, the distance the content has to travel can definitely be the largest bottleneck in website loading speeds.

Ideally, your visitor needs to be as physically close to the hosting server as possible.

Unfortunately, setting up a hosting server at a location which is physically close to any one particular visitor is all but impossible — unless you are setting up a CDN, that is.

The very idea of a Content Delivery Network (CDN) is exactly that. A CDN’s primary purpose is to set up as many servers as possible in different geographical locations, such that anybody who hits the service is as physically close as possible to one of the locations.

Have a look at the following image from CloudFlare which explains the concept perfectly, this shows the Cloudflare network powered by 165 data centers around the world:-

You can see that there are many CDN server points. In this manner, all visitors, in any location in the world, are always served content from a location which is (relatively speaking) near to them.

Hosting static content on a CDN network is the closest you can get to creating a global hosting setup for your website.

2. Your Website Will be Safer with a CDN

The next reason why a CDN is essential for your website is security.

Did you know that more than 51% of the web’s traffic actually comes from bots rather than humans?

The worst thing about it is that above 29% of web traffic comes from malicious bots.

That means your website is constantly under a deluge of bad bot traffic. If you’ve ever taken a look at analytics data, or used a security plugin like WordFence, you’re already aware of this fact.

These bots are constantly probing your site for vulnerabilities. If you slip slightly in your security efforts, if you have not chosen a good WordPress host, or if you miss a WordPress security update or a plugin update, rest assured your site will soon be suffering the consequences.

Most CDNs are able to identify and block bad bots rapidly, making your site safer when plugged into a CDN. The collective knowledge gained by the network can be used to prevent attacks on your own sites.

3. Your Site is Protected Against Traffic Based Attacks with a CDN

I’m sure you’ve been stuck in traffic at least a few times in your life. I know I have. Getting stuck in traffic is a waste of productive time and money.

The same concept applies to your website.

However, it’s even worse when somebody purposely sends an overwhelming amount of traffic to your website.

In a Distributed Denial of Service (DDoS) attack, an army of compromised web servers or computers (or even IoT devices) are recruited to send so much traffic to your website, that your legitimate users unable to access it.

If your website is the lifeline of your business, a DDoS attack can literally bring your business to a standstill. Regardless of whether you’re on a shared hosting server or a dedicated server, your website won’t be able to keep up with the flood of traffic.

The same concept used by a CDN to make your website fast, can also work in your favour by absorbing malicious traffic over a global network of servers fronting your website.

Most CDN implementations use the concept of reverse proxy to serve your website. The reverse proxy will be the CDN server network.

This means that your website’s visitors will hit the CDN server closest to them before they hit your site’s actual server.

In this manner, any malicious traffic is intercepted before it actually gets to your server. CDNs have intelligent algorithms which are able to identify malicious DDoS traffic and kill it.

Incapsula, MaxCDN, KeyCDN, CloudFlare and most of the top players all have support for mitigating traffic-based attacks.

4. Faster Web Design and Development

When you’re creating a WordPress site which is meant to be fully optimised for performance, you’re going to have to perform a number of additional implementation steps.

You’ll be looking for an image optimisation plugin, a content minification and combination plugin, a static and dynamic content caching plugin, and other tools to fully optimise the WordPress website. While it may be possible that one or two plugins are able to actually serve most of your optimisation needs, you’ll still need to perform additional testing to ensure the plugins are able to operate correctly.

Personally, I’ve found that optimising with various plugins is a nightmare of epic proportions.

CDNs are actually able to perform all of the above mentioned optimisations in one fell swoop. Image optimisation, dynamic file compression, static and dynamic content caching are all built-in into the CDN.

Coupled with that, there are other optimisations such as Custom Content caching rules to fix any problems with specific plugins on your site.

Most of these performance optimisations are going to be hard to achieve with your typical WordPress plugin.

Such stuff as session reuse optimisation (particularly for HTTPS websites), TCP Connection pre-pooling and rapid purging all improve the optimisation.

Other improvements such as improving the SSL/TLS handshake process would not be something which the typical developer would be capable of optimising by themselves. Having this completely handled by the CDN gives a significant boost, particularly to HTTPS websites, which unfortunately take a hit in performance when enabling HTTPS.

All of these above optimisations decrease the design and development time with the website whilst pushing the performance envelope as far as it can get.

A CDN catering for all of the above will drastically reduce the time spent on optimisation.

Conclusion

Speed is typically the most obvious benefit of using a CDN that people will mention over and over again.

While the website loading speed is a critical component, and an essential justification for setting up a CDN, this should not be the only selling point.

The other points mentioned, particularly performance, security, protection and better optimisation are just as important as website loading speed.

At the moment, we use CloudFlare CDN for our web sites. We customise the settings for our clients to give their web sites the best possible results in terms on SEO and Site Speed.

It’s good to share

Our top 10 used plugins for WordPress – 2019 Edition

Every WordPress developer has a bunch of plugins they tend to install on pretty much every WordPress site they develop, and we are also those kind of people. These plugins give great solutions for caching, security and adding other improvements that build on WordPress core.

That’s the beauty of WordPress – there are loads of plugins to choose from and they are so quick and easy to implement. Some plugins are just a case of downloading and activating, others provide a shortcode which you can copy and paste within your pages and others is a simple as dragging and dropping a widget where ever you wish to display it.

With so many free and premium plugins available, how do you distinguish from the good and bad plugins out there?

Do note, overloading your web site with too many plugins can cause plugin conflict and reduce the speed of your web site, so if you can avoid a plugin and just code it in, that’s even better!

Below you will find our selection of essential plugins, all chosen based on their usefulness, quality and popularity.


1.) WooCommerce

WooCommerce is a great plugin and is really quick and easy to install. It turns your standard WordPress website into a an eCommerce store and creates all the necessary pages for you (My Account, Checkout, Cart etc). It allows intergration with secure payment methods such as Bank Transfer, PayPal, SagePay and many more. With a huge range of features that can be quickly changed in the Control Panel, this is definitely one of my favorites because of the speed you can set up a fantastic eCommerce website.


2.) Advanced Custom Fields

Advanced Custom Fields is an amazing plugin and without a shadow of a doubt, it’s installed on every project I build. I would definitely recommend getting a licence for the Pro version which you can find out more information about here. You can use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data. It makes it super easy for clients to change text / images any many other things within your WordPress site without any risk of breaking the site.


3.) Contact Form 7

Contact Form 7 is another plugin I use on pretty much every WordPress site I develop. You can manage multiple contact forms, customise the form and the mail contents and again, it’s really easy to use. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and many more. All the form elements are generated for you so you don’t even have to know any PHP code. If your not already using this plugin for your forms, I suggest giving it a try now!


4.) Yoast SEO

SEO Yoast is a fantastic platform for SEO. I have used this plugin on 100% of the WordPress sites I have developed and it is the only plugin I use in terms of SEO. If set up correctly, it will improve your site’s SEO on all needed aspects. WordPress SEO forces you to choose a focus keyword when you’re writing your articles, and then makes sure you use that focus keyword everywhere, it also ranks the SEO of all your pages and posts from ‘Bad’, ‘OK’ to ‘Good’ so you know if your content is going to have any chance of ranking on search engines. The best feature about this plugin is that it even tells you how you can improve the performance of each and every page on your site. It may say things such as, you need to include

tags or include an outbound link on your page/post. You will learn a lot about SEO if you run this plugin on your websites. We actually use the SEO Yoast Premium version which allows up to 5 keywords on each page/post/CPT including many other great features which you can read about or purchase here.


5.) Hummingbird Page Speed Optimization

The next 3 set of plugins I’m going to be talking about are plugins offered by WPMU DEV which you can read about more here. There are free versions of these plugins but they also have premium versions which offer a lot more features which I would highly recommend. Hummingbird PRO is an awesome caching plugin. It zips through your site and finds new ways to boost page speed with fine-tuned controls over file compression, minification and full-page, browser and Gravatar caching. Load your pages quicker and score higher on Google PageSpeed Insights with Hummingbird site optimization.


6.) Smush Image Compression and Optimization

This plugin is one of my favourites; it will resize, optimise and compress all of your images with the incredibly powerful and 100% free WordPress image smusher. This uses Lossly compression which will significantly reduce the file sizes of all images on your web site which will definitely increase your sites speed. Again, the premium version of this plugin is 100% recommended as it will allow you to SUPER-Smush all your images along with a few other great features which will allow you to further optimise your site. Need a high Google Speed Test score? This plugin combined with Hummingbird will make the job a piece of cake 😉


7.) Defender Security, Monitoring, and Hack Protection

Security is definitely important when it comes to WordPress, the amount of sites I’ve had to restore/repair and remove Malware from is crazy. So make sure you have fully configured a great security plugin to prevent your web site from these kind of attacks. Defender is layered security for WordPress made easy. And by easy, I mean amazingly easy! No longer do you have to go through hideously complex settings and get a virtual PhD in security. Defender adds all the hardening and security tweaks you need, in just minutes!


8.) Akismet Anti-Spam

Sick and tired of spam comments and junk email from your WordPress site? Akismet has you covered! Akismet checks your comments and contact form submissions against their global database of spam to prevent your site from publishing malicious content. You can review the comment spam it catches on your blog’s “Comments” admin screen.


9.) MailChimp for WordPress

MailChimp for WordPress allows your visitors to subscribe to your newsletter very easily. This plugin helps you grow your MailChimp lists and write better newsletters through various methods. You can create good looking opt-in forms or integrate with any existing form on your site, like your comment, contact or checkout form.


10.) Classic Editor

Finally, our last plugin which we have made a lot of use from since WordPress 5 is classic editor! Classic Editor is an official plugin maintained by the WordPress team that restores the previous (“classic”) WordPress editor and the “Edit Post” screen. It makes it possible to use plugins that extend that screen, add old-style meta boxes, or otherwise depend on the previous editor. By default, this plugin hides all functionality available in the new Block Editor (“Gutenberg”). Since a lot of people are finding it difficult to get their heads around Gutenberg, this is a great quick fix plugin which will restore the editor back to the way you’ve known and loved for a long time.

It’s good to share

What’s New in WordPress 5.0, Plus What to Expect From the Gutenberg Editor

Each time a new version of WordPress rolls out, we’re all excited about getting to play with its new features. However, few versions in the past have garnered as much buzz around them as WordPress 5.0 because of these two simple words; Gutenberg Editor.

Gutenberg is a complete redesign and re-imagination of the WordPress editor; with this, the default way that people create content with WordPress will radically change.

Big changes to your favourite platform can be difficult to accept. However, even massively popular platforms such as WordPress need to adapt to the times, or risk losing market share. Gutenberg is a bold leap forward, and it’s not the only update that’s coming up.

In this article, we’re going to discuss what makes WordPress 5.0 unique in comparison to previous releases, and then we’ll get into what to expect from WordPress 5.0 and the Gutenberg Editor. Let’s talk about the future!

WordPress 5.0 will be a bigger jump than recent major updates

If you’ve been using WordPress for a while, then you’ll know how much the platform has changed over time. Even individual updates often bring significant shifts. For example, the 4.9 ‘Tipton’ update enabled users to schedule design changes in the WordPress Customiser so they can go live at later dates, just like post drafts.

WordPress 4.8, on the other hand, brought us plenty of widget updates. For example, if you wanted images in your widgets in the past, you had to add them manually. Now, there are three dedicated media widgets for image, audio, and video files.

Another of our favourite features of 4.8 was the option to check up on nearby WordPress events right from your dashboard, which is handy if you want to do some networking:
A list of nearby WordPress events.
However, all the changes we’ve mentioned so far are pretty incremental. They’re useful, but not exactly game-changing. Most WordPress updates have been more about taking small steps forward rather than major leaps – that is, until WordPress 5.0.

What to expect from WordPress 5.0

WordPress 5.0 is kicking “incremental” to the curb with some pretty major changes. The biggest is the aforementioned Gutenberg Editor, which we’ll talk more about in a moment.

But WordPress 5.0 also marks a change to how the platform handles releases. It used to be the case that you could count on getting two major WordPress releases per year, with plenty of mini-updates in the meantime.

Aside from that, here are a few of the other significant changes to see with WordPress 5.0:

  • The platform’s focus is moving towards a more intuitive site-building experience. WordPress already leads the pack in terms of market share. And by improving WordPress’ site-building functionality, the core team aims to hold that market share against the rise of hosted website builders.
  • We’ll see some improvements to the WordPress Rest API. The WordPress Rest API helps developers create more feature-rich products by making it easier to send and pull data from your website. This update means developers will be able to more easily create applications using the platform as a framework.
  • Building custom themes will become easier. In the past, you needed at least a simple development background to put together a WordPress theme. With Gutenberg, theme creation will become much more accessible thanks to blocks.
  • Page builder plugins might lose some relevance. There are a lot of fantastic page-builder tools that you can use with WordPress, some of which rival professional platforms. Gutenberg won’t be a match for them at first, but it might dissuade people from using them in the long run.

What the Gutenberg editor means for you

The launch of Gutenberg means that you’ll need to get acquainted with a whole new editing experience.

You can expect a lot of activity for a few weeks, as everyone learns to contend with the new editor.

⚠️ Don’t panic – if you don’t want to use the Gutenberg Editor, you’ll still be able to keep the classic editor by installing the official Classic Editor plugin.

Gutenberg will affect themes and plugins, too

Aside from your own editing experience, Gutenberg will also bring important changes to a lot of your favourite plugins and themes. For example, we’ll probably see the emergence of a lot of Gutenberg-friendly themes, which will be designed to take advantage of all the new features the editor offers.

We’ve already seen a couple of interesting themes being released, such as Atomic Blocks and even the new default theme, Twenty Nineteen that proclaim their Gutenberg-first focus. And existing themes are no slouches either. Popular themes like Neve and Hestia now come with full Gutenberg compatibility too.

Similarly, you’ll see changes with some of your favourite plugins. A lot of plugins interact with the WordPress editor directly, whether that’s to add new functionality or include shortcodes. Those plugins will need to become Gutenberg compatible, unless they want to alienate a large part of their user base. Years from now, it might even be common to find plugins that only support Gutenberg.

When is the WordPress 5.0 release date?

As of today (6th December), you can update your WordPress to 5.0.

Get ready because the times they are a-changin’

Each major release of WordPress brings changes to the way we use the platform. However, even before it’s out, we can say with complete certainty that 5.0 will fundamentally change the way most people interact with WordPress because of the Gutenberg Editor.

If you’re old-school, you’ll be able to stick with the classic WordPress editor for the foreseeable future. However, if you plan on adapting, you’ll want to start reading up on how Gutenberg works right away. This will give you a leg up on the competition once WordPress 5.0 is live, and will help you determine which of your themes and plugins may be most affected.

So…

Do you plan on making the switch to Gutenberg, or sticking with the classic WordPress editor? Share your reasons with us in the comments section below!

It’s good to share

Flex – Vertical Centering

Need a good method to vertical centre elements, then look no further, flex is the way!

There are other techniques that do work for vertical centring such as using table and table-cell with the good old vertical-align: middle, but they never seem to work when you need them.

The current landscape of vertical centring options ranges from negative margins to display:table-cell to ridiculous hacks involving full-height pseudo-elements. Yet even though these techniques sometimes get the job done, they don’t work in every situation. What if the thing you want to centre is of unknown dimensions and isn’t the only child of its parent? What if you could use the pseudo-element hack, but you need those pseudo-elements for something else?

With Flexbox, you can stop worrying. You can align anything (vertically or horizontally) quite painlessly with the align-items, align-self, and justify-content properties.

Unlike some of the existing vertical alignment techniques, with Flexbox the presence of sibling elements doesn’t affect their ability to be vertically aligned.

The HTML


<div class="Aligner">
  <div class="Aligner-item Aligner-item--top">…</div>
  <div class="Aligner-item">…</div>
  <div class="Aligner-item Aligner-item--bottom">…</div>
</div>

The CSS


.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}

And there you have it, vertical centre? No problem now.

It’s good to share

Install SSL Certificate on Apache via SSH

SSL stands for Secure Sockets Layer. It is used to secure the connection between internet browsers and Web server or websites by transferring the encrypted data rather than plain text. You can secure the HTTP connections by installing an SSL certificate. Installing an SSL certificate will allow for https:// connections instead of the standard http://. There are two types of certificates.

  • SSL certificate issued by the Certificate Authority (CA)
  • Self-Signed SSL certificate.

The main difference between these two types is that for a Self-Signed certificate, no third party is verifying the identity information of the Website and hence it is not trusted by any of the web browsers. So, accessing the website with self-signed SSL will prompt Untrusted Connection and you’ll have to Confirm Security exception manually. This is something users wouldn’t like to do. This is where SSL certificates verified by a CA comes into play. The CA verifies the website identity information and also provides CA Bundle (for browser compatibility). So these connections are accepted by almost all the browsers.

For installing SSL certificate (both types), we need to generate Private Key and CSR (Certificate signing request).

1) Generate Private Key On The Server

OpenSSL is the open source SSL package that comes along with most of the linux distros. Make sure openssl package is installed.

We are generating private key with openssl command as shown below.


openssl genrsa -des3 -out www.domain.com.key 2048

This will prompt a password, when you enter the passphrase and hit ‘Enter, the key file will be generated in the present working directory and the file name will be ‘www.domain.com.key’, where domain is name of the domain that you enter when the key is generated.

2) Generate Certificate Signing Request (CSR)

After generating your private key, you need to generate a CSR (Certificate Signing Request). You can easily create that with openssl command.


openssl req -new -key www.domain.com.key -out www.domain.com.csr

Few questions regarding the website identity will be asked and this will be checked by the certificate authority.

CSR will be generated in the present working directory with the file name ‘www.domain.com.csr’. Here is the screenshot of the CSR file.

3) Create SSL Certificate

After generating Private key and CSR, you need to create the SSL certificate. Now is where the difference come into play.

For a CA verified cerificate you need to provide CSR and Private key to the Certificate vendor. They will provide a CA verified certificate file (.crt file) and you can install it. But for a Self-Signed certificate, you need to generate the certificate manually.

Generating Self-Signed certificate
Certificate file will be generated with private key and CSR encoded in it. All the information for in the Private key and CSR will be encoded in the .crt file. Command is given below.


openssl x509 -req -days 365 -in www.domain.com.csr -signkey www.domain.com.key -out www.domain.com.crt

Certificate file will be generated in the present working directory as ‘www.domain.com.crt’, please note that domain.com is my domain name in this example and it should be replaced with the actual domain name. Here is the generated .crt file

To install this certificate for a website, you need to create a new VirtualHost for the domain name because SSL is using a different port and not the common port 80. SSL port is 443. So Apache will be listening to both 80 and 443 for the non-encrypted and encrypted data respectively. Or, you can create a separate conf file, in /etc/httpd/conf.d directory and then ask Apache to refer the said directory with ‘Include’ directive as shown below.


Include conf.d/*.conf

Now, add the below given code either in the VirtualHost or in the separate configuration (eg: ssl.conf) file created in the /etc/httpd/conf.d direcory.


SSLEngine on
SSLCertificateFile /path_of_crt_file/www.domain.com.crt
SSLCertificateKeyFile /path_of_key_file/www.domain.com.key

This will tell apache to refer the .crt (certificate) file and .key (Private key) file for SSL encrypted connection.

4) Restart Apache

Final step is to restart Apachge service for the changes to take effect.


/etc/init.d/httpd restart

You can verify the SSL setup by just loading your website with HTTPS, eg: https://domain.com

If your website is loading with https, be sure you have SSL installed for your website.

Of course, if that all looks too much then you can just get us to install your SSL certificate for you. Or you can purchase a low cost SSL certificate and we will do everything for you end to end. Simply contact us at

It’s good to share

CSS Media Queries for Standard Mobile Devices

A major component of responsive design is creating the right experience for the right device. With that many different devices on the market, this can be a large task. We’ve rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.

You may think that you should never base your breakpoints on devices, and this is a fair point; Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control and so here are mobile specific media queries you can use to target particular devices:-

Phones and Handhelds

iPhones


/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

Galaxy Phones


/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}

Google Pixel


/* ----------- Google Pixel ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Google Pixel XL ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}

HTC Phones


/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

Windows Phone


/* ----------- Windows Phone ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px) {

}

/* Portrait */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px)  
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px) 
  and (orientation: landscape) {

}

Tablets

iPads


/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

Galaxy Tablets


/* ----------- Galaxy Tab 2 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* ----------- Galaxy Tab S ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

Nexus Tablets


/* ----------- Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/* ----------- Nexus 9 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

Kindle Fire


/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

It’s good to share