Why Should You Add Two-Factor Authentication (2FA) To Your WordPress Site in 2021?

Once you have created your WordPress site, there are several factors you need to consider to keep your new site safe, whether it’s making sure your site is secure, you have regular backups scheduled or that your plugins are up to date.  

two factor authentication

If you are establishing your business and brand in the online world, it is important to ensure that your site is not vulnerable to hackers and cyber attacks.  

According to Security Magazine:  “Every day, there are over 2,200 cyberattacks – which is nearly one every 39  seconds.”

  • 43% of small businesses have no cybersecurity defense plan in place. 
  • 60% of small business owners do not think their business is a target for cybercriminals.
  • 74% of small business attacks were executed by external actors, as opposed to internal employees
  • 84% of small business attacks focused on the monetary gain with 8% focused on espionage and the remainder focused on hacking for fun or grudges
  • 22% of small businesses transitioned to remote work without a cybersecurity plan in place.

To minimize and limit your site’s vulnerability and risk of cyber-attacks, WordPress provides you with the ability to install and use two-factor authentication on your website.

In 2021, it was reported that only 57% of businesses around the world will use some form of online Multi-Factor Auth (MFA) as a method of authentication, designed to add an extra layer of protection on top of users’ login credentials. Of those employees using MFA, 95% reported using a software-based 2 factor authentication tool (such a mobile phone app), while 4% have a hardware-based 2 factor authentication solution, with roughly 1% using biometrics.

What is Two-Factor Authentication and how does it work? 

2FA refers to the process by which the person has to complete an extra level of login security verification to show that they have the necessary permissions required to access the site, documents, applications, sales information etc.

What are authentication factors?

While all sites will have at least one login process to access your account, there are several ways in which a user can be authenticated using an additional authentication method. Most authentication methods typically rely on the user’s knowledge factors, which includes login information such as traditional passwords. By adding an additional 2 factor authentication method, this forces the user to give extra information, which is either a possession factor or an inherence factor.

Knowledge Factor – This refers to the typical username/passwords and pin codes through which you can access a website account. No matter what type of password you select; including numbers,  words, symbols, uppercase, and lowercase, it will still be considered ‘basic security’. 

Personal/Possession Factor – This level of security factor refers to something that the user has in their possession. Examples of this can include your ID card, a previously answered security question, a one time password sent to your smart device, smartphone app verification etc. 

Biometric Factor – This can also be known as an inherence factor and is a security factor inherent in the user’s physical self. Typically, these are identified as unique personal physical characteristics such as fingerprint, facial, voice recognition or behavioral biometrics, including keystroke dynamics, gait or speech patterns.

While most two-factor authentication methods will only rely on the first three methods of authentication, there are systems that require further and more detailed security and will require further multifactor authentication (MFA), which requires two or more independent credentials for more secure login/authentication.

Location and Timing Factor – Some sites containing sensitive and personal information that you may try to log into, such as Facebook and Google, are  designed to notify the owner if they register a user attempting to log into your account from a suspicious location or at an unusual time. If this occurs, the sites send an email to the owners to notify them of the login discrepancies.This method can be enforced by limiting authentication attempts to known user specific devices (such a model of their mobile phone), or by tracking the geographic source of an authentication attempt based on the source Internet Protocol address or some other geolocation information, such as Global Positioning System (GPS) data, derived from the user’s mobile phone or other device.

By using these 2FA methods,  multiple layers of protection can protect your website from  phishing attacks by hackers and other cyber-security problems.

Is 2FA foolproof and can it be hacked? 

2FA can go a very long way in making your site secure. But no matter how thorough and safe your security login process is, nothing can make it 100% safe. Even recently, the popular crypto currency trading exchange Coinbase was hacked by actors who were able to bypass the user’s two factor authentication by cloning their mobile phones and gaining access to generated 2FA text message passcodes. 

2FA security is only as secure as its weakest component. The National Institute of Standards and Technology (NIST) has now discouraged the use of text messages in 2FA services, recommending instead that randomly generated time-limited tokens, owing to the risk of mobile phone cloning or malware that can intercept or redirect text messages.

Many large organizations, such as Google, Facebook, Uber, etc. have fallen victim to data hacks and have found their user information for sale on the dark web. Hackers’ tools and methods of attacks are becoming more sophisticated and harder to detect – incorporating phishing, password spraying, ransomware and malware attacks. While security teams are constantly working to improve online security, they have yet to put an end to the possibility. 

According to Dark Web Price Index 2020:

“Data samples of millions of people sold on the Dark Web range from  $25USD to $6000USD for premium accounts.” 

Typically, If the user has up-to-date security protocols, hackers will usually move on to a user that is more vulnerable and has failed to properly set up their additional security. 

Tips for minimizing the risk of cyberattacks:

Always have a backup of your site: By using UpdraftPlus, you can ensure that you will have a secure and safe backup of your WordPress website. Should the worst happen and your site is the victim of a hack, you can revert to the older version of your site and make changes to your login process to make your site more secure.

Ensure your site has a robust security system: While you can’t remove all of the risk of being hacked, you can minimize it. Ensure that you have a reputable two factor authentication login system for all users with back-end website access. Do not give unnecessary privileges to users if they do not require them, as they can be used to take control of the website. 

Update your plugins/themes/WordPress version: When hacking a WordPress site, this is the most common route of attack. Outdated plugins can be particularly vulnerable to hackers in giving them a route into your site.

Make sure users are aware of the risks: It is vital that everyone with a higher level of access to your site be smart and aware of potential security issues. This means being aware of potential hacking attempts via email phishing scams, that may appear genuine, but are attempts to retrieve user names/passwords and install malware onto your computer.

Strong passwords: While this may seem like the most obvious, it is also often the most overlooked. Having a strong and unpredictable password is often the first and best level of protection against most hacks. Passwords that are changed often and have a string of letters and special characters are very difficult to hack via forced password attacks. 

Ending Notes: 

The more you know, the better your chances are of preventing any kind of cyber attack before it has even begun. A mixture of 2FA, updated software and secure passwords and help prevent the vast majority of attempted hacks. But should the worst happen, always remember that you should have a recent backup copy of your site with UpdraftPlus, which should be stored in a secure remote storage location. 

If you have any suggestions or queries, feel free to comment below. We are  interested in hearing from you.

The post Why Should You Add Two-Factor Authentication (2FA) To Your WordPress Site in 2021? appeared first on UpdraftPlus. UpdraftPlus – Backup, restore and migration plugin for WordPress.

WordPress Caching guide: How does it improve your site speed? 

In this blog, we will discuss WordPress caching; what it does – and how it improves the performance and speed of your website. 

What is Caching? 

To understand WordPress caching, you first have to understand the concept of caching. Caching refers to the process of storing data in temporary folders where they are easily accessible. It’s primary aim is to reduce processing time and make information available as quickly as possible. 

This is especially important in WordPress websites. WordPress websites are dynamic by default, which means that each time a user visits your site, WordPress goes through a series of steps to generate information from your database to show to the visitor. 

The benefit of this process is that the user gets a somewhat customized experience, since the pages are generated specifically for them. This benefit has the drawbacks that occur as a result of the long processing time, which can make the website slower.

When it comes to caching specifically in WordPress, it works by following the process of temporarily storing the dynamically generated files of frequently visited pages on your website as static files for easy recollection and use. Caching reduces the demand on your web server to continuously generate dynamic content. This means that when a user visits a page, the page shown to the user is stored exactly how it appeared the last time they visited, so the next time that page is requested, there’s no need for WordPress to generate a new page. It just presents the previously generated page, at a rate that is 3-5 times faster.

There are two types of content available on web pages:

  • Static files: As the name implies, static files refer to the types of content that do not change. These types of files include images, javascript files, css stylesheets, and HTML pages. Static content remains the same regardless of the user and is created long before they are needed.
  • Dynamic files: Dynamic content is created at the point of request, specifically for the user. This type of content is created based on the user’s location, device and time of request.

WordPress caching is the process of storing these dynamic files as static files, thereby increasing the speed and performance of your website. 

There are two basic types of caching – Client-side and server-side. 

Client-side Caching 

Client-side caching occurs when the temporary caching files are stored on the end user’s device. Modern browsers have the benefit of having smart coding that aims to reduce redundancies by saving static files for future use. 

As a result, when users open a web-page, the browser starts downloading static files such as images, HTML pages and other multimedia content. Their browser saves all these files so it doesn’t have to re-download them every time you visit the site in the future. 

While this helps with the speed of your browsing, it is recommended that you clean up your cache data once in a while so the files don’t become too bulky and reduce the performance of your browser.

Server-side Caching 

Server side caching refers to the caching protocol employed by your WordPress server to save temporary files. There are four possible protocols for WordPress Caching; 

  • Page caching 
  • OPcode caching 
  • Object caching 
  • CDN Caching 

Page Caching 

Page caching occurs when your caching plugin – like WP-Optimise – saves the dynamically generated HTML files on your server’s hard disk (RAM) after the first time it is loaded. Whenever there is another request for that page, your server produces the previously generated data.

OPcode Caching 

When a PHP file is loaded on the website, OPcode caching saves the compiled PHP code. For a PHP code to execute, it must be generated and compiled by the PHP compiler. OPcode caching saves the initially generated code on the server’s RAM, to save time upon subsequent requests. 

Object Caching 

Object based caching saves database queries after the first time they are requested. This way, it reduces PHP execution time and load time when the query is requested again. Since WordPress is a content management system that is reliant on databases, object caching seeks to reduce the load on the database and reproduce previously loaded content faster. This is crucial for high traffic websites. So crucial that WordPress has its own internal caching system that can be enhanced with a third party tool.

CDN Caching 

CDN (content delivery network) caching refers to the process of storing web content in proxy servers that are much closer to the end user. By using proxy servers, CDN caching helps your website to deliver content much faster. 

How does WordPress Caching improve your WordPress site speed and performance?

WordPress caching increases the speed of your website in three primary ways

Moves files to “recent memory”

You may be aware that computers and computer systems are built to mimic the brain. Caching is a prime example of that. 

When you try to remember an event from your childhood, it takes a while before you fully recollect the details. However, if you try to remember that same event days later, you remember the details almost at once. This is because your brain moved the event to a recent memory. It may surprise you to learn that you are not remembering the event, but you are in fact remembering the last time you remembered the event. 

Caching adopts this same principle by storing previously loaded web elements in a “recent folder.” As a result, your web pages load faster when they are requested. 

Saves files closer to the end user

Another way caching increases the speed of your website is by delivering content that is closer to the user; either from a server close by or from the user’s hard disk. This is a combination of client-side and server-side caching. 

Compress images 

Caching plugins like WP-Optimize give you the option of compressing your images. Bulky images take more time to load which can slow down the overall speed of your website. With cache plugins, you can manually or automatically compress images to reduce load time.  

How Caching boosts performance of your WordPress website 

Caching plugins don’t only increase your load speed, but they reduce the workload on your server. The following are the ways by which caching improves your website’s performance

Improves user experience 

Consumer attention span reduced from 12 seconds to 8 seconds in just 16 years from 2000 to 2016. There’s an explanation for this; technological advancements, intense competition and over stimulation of the mind from smart devices are the most significant culprits. 

This now means that you have only a few seconds to make an impression or lose the user to a potential competitor. Research suggests that slow websites are a huge turnoff to modern day internet users. 

There is also a correlation between higher bounce rates and slower pages, which means the longer it takes your page to load, the higher your bounce rate. The ideal page load time is under 2 seconds. A load time beyond 3 seconds can increase page abandonment rate by up to 87%.  

Improves ranking 

Website speed is a performance and ranking factor for search engines. In recent times, search engines like Google have begun to penalize slow websites. Websites with longer page load times are eventually pushed farther down the pecking order and replaced by faster websites. 

Google prioritizes user experience as a ranking factor and site speed is a crucial aspect of the UX. When users get disappointing experiences from the websites search engines direct them to, it reflects poorly on the search engine. Users are then less likely to trust the search engine results if that trend continues. 

Boosts content availability 

Several factors affect whether or not your website will load for a user. Frequent network interruptions or network congestion for example, are two of those factors. Since WordPress dynamically generates content for the user, this could greatly affect the performance of your website for that user. 

Caching solves this problem by providing an already generated page for the end user. This way, you won’t lose a potential or active customer to a poor network connection.

Cleans your database 

Caching plugins like WP-Optimize work to clean your database by de-fragmenting MySQL tables and clearing data like trashed comments, expired transient options, pingbacks, etc. This process is important because without it, your website’s performance and speed reduces overtime. 

Conclusion

Chances are that you may never get to notice how your website interacts with every end user. You can’t tell what happens when people try to access your website from halfway across the world. But what you can do is ensure that your WordPress site’s performance and speed are optimal at all times. With WordPress caching, you don’t have to lose sleep worrying about all that. Install a reputable plugin like WP-Optimize, and buy yourself some time to focus on other aspects of your business. 

The post WordPress Caching guide: How does it improve your site speed?  appeared first on UpdraftPlus. UpdraftPlus – Backup, restore and migration plugin for WordPress.

How to update your site to the latest version of WordPress

If you have a WordPress website, you will know that it should always be run on the latest version of WordPress as the updated version of the software provides better performance and security.

In this blog, we will discuss all the ways you can update your website to the latest version of WordPress. We will go through the process on how to download the latest WordPress version and update it manually and also show you how to automate your WordPress updates – which can be highly beneficial, as it can save you a lot of time and effort.

Why you should always use the latest version of WordPress

WordPress is an extremely popular and open source software platform. This means everyone can study the code, as it is available publicly as open source. This allows developers to analyze, improve and contribute to the WordPress codebase. Whenever a developer finds any bugs or security issues, it is reported to the WordPress software team, who then fix the issue and release a new WordPress update, with all the issues hopefully fixed. This approach to problem analysis/solving has largely been the reason why WordPress has managed to grow so rapidly.

However, the web is not  populated only by people with good intentions. There are entire cottage industries in operation that exist to employ hackers to actively look for vulnerabilities and loopholes in the source code. As it powers over a third of all the websites in the world, WordPress is a hugely popular target and often top of the list for hackers. If a vulnerability is found in an older version of WordPress, hackers will attack these sites and steal all valuable data (such as emails, billing information etc).

Apart from security fixes, users of WordPress will also get access to new features and better performances when they download the latest version of WordPress. For example, the latest WordPress 5.8 version has introduced a few new features that you can read in the release documentation.

Now you are aware and understand the need to upgrade WordPress, let’s take a detailed look at how to perform the upgrade. 

Things to do before upgrading WordPress

Whenever you plan to update the software, remember to always take a backup of the current site with UpdraftPlus. By doing this, you will be able to restore the site immediately if the new updates result in unexpected issues and break your website. It is recommended that you store your backup in a remote storage location (such as Google Drive), so you will always have access to it; even if an upgrade causes an issue with your server.

For extra safety and security, you can also use UpdraftClone to create an identical copy of your site and test out any update on, further removing any potential risks as UpdraftClone allows you to create a cloned test site of your live site instantly and directly from UpdraftPlus. Once you have created a clone of your site, you can carry out updates and tests, safe in the knowledge that your live site is completely safe from any potential issues. 

When it comes to WordPress backup, UpdraftPlus is the number one choice of users. At the time of writing this article, it is being used on over 3 million websites. Follow our guide: How to Backup a WordPress Site: Step by Step Guide for instruction on how to backup your site before updating WordPress.

Once you have your website backed-up, remember to choose the right time to schedule your upgrade. Updating WordPress usually only takes a minute or two, but in certain situations it may take longer than expected. During this process, it is important to remember that customers/visitors to your site should not face any unexpected behavior or access issues. To avoid this, it is best to pick a time when you typically have less users active on the site.

Manually upgrading WordPress to the latest version

WordPress regularly releases updates with both major and minor releases. Minor releases are typically reserved for security and bug fixes. Since WordPress 3.7 or above, automatic updates are turned on for minor releases. This means you do not need to upgrade it manually as WordPress handles these minor updates on it’s own.

When it comes to major releases, there are 2 options available to upgrade to the latest version – automatic (via a press of button) or manual. 

Upgrading WordPress from the Dashboard

This is a straightforward and easy to follow process. All you need to do is press on the “Update now” button and the upgrade will start automatically. It can be done in a few moments.

To access this option, go to Dashboard->Updates page in your WordPress site. You will see the ‘Update now’ button as shown below.

In the screenshot, you will see that it states that your site will be in maintenance mode until the updates are complete. As previously mentioned, this is the reason for picking the “low visitor” hours when carrying out your upgrade.

Press the ‘Update now’ button and WordPress initiates the upgrading process for you. It may take a couple of minutes.

Once WordPress has installed the updates, you should be redirected to a page where you can see a list of new features available in the latest update.

There may be some cases where this process is not possible. If this is the case, you can follow the below update process instead.

Upgrade WordPress using FTP Client

In order to update WordPress manually to the latest version, you will need to perform the following steps.

  • Download the latest WordPress zip.
  • Extract the zip.
  • Connect your site with an FTP client (FileZilla is a popular FTP Client).
  • Upload wp-admin, wp-includes directories (from the extracted zip) on your site, replacing older versions.
  • Upload all core files from the root directory of extracted zip. Remember not to change the wp-config.php file.
  • Upload wp-content/index.php. 

WordPress writes the code for core functionalities and new features in the wp-admin and wp-includes folders. The files in the root directory also contain the code for new updates. While updating WordPress, we need to only replace these files and folders. When developing your WordPress websites, remember not to touch these files – at any cost, as it can break the system. These files are part of the core development and must remain untouched.

Once you are done with the manual process, go to the admin area of your site. Sometimes you need to update your database for the new version. You may see the below notice asking to update your WordPress database.

If you come across this notice, just press the ‘Update WordPress Database’ button.

After this, login to your admin area – you should now see you have successfully updated to the latest version of WordPress.

It is important to carry out due diligence on your site after an update. Browse your site and make sure everything is in the right place and is working correctly. Most of the time, WordPress updates will not cause any issues if you are using the system correctly and carried out the update in the proper manner. However, if you are experiencing unpredictable behaviour, you can quickly restore your site to the older working version using your UpdraftPlus backup.

You can also save further time by automating the WordPress updates process using the Easy Update Manager plugin.

Manage automatic WordPress updates

The Easy Update Manager plugin is built by the same team that brings you UpdraftPlus. At the time of writing, Easy Updates Manager has 300K+ active installations. By using this plugin, you can automate WordPress, plugin and theme updates. 

Users can also use a free version of the plugin with a limited set of features. However, it is suggested that you install the Premium version, as it contains many handy features that can make updating easier and quicker. These include:

  • Safe Update – Block automatic updates if the update states a minimum PHP or WP version requirement that is not met by the site/server.
  • Schedule Updates. Customize your update schedule to minimize any downtime.
  • Auto-update protection. If something goes wrong during an auto-update, the plugin will alert you via email and then try to fix it automatically.

Upon installation, you can find the settings under the Dashboard->Updates options. On this page, you will see the different options to manage WordPress, plugin and theme updates. Under the ‘WordPress core updates’, press the ‘Auto update all releases’ button. 

Add your email address under ‘Core notification emails’. You will now receive an email at this address when your site updates.

When using the premium version of the plugin, you can set your updates to suit your schedule. As previously discussed, if you wanted to update WordPress and pick a time when your site had less visitors, go to the ‘Advanced’ tab and set your preferred schedule time under ‘Automatic update scheduling’.

These are the basic settings required to automate your WordPress updates. Now you can just sit back and relax and let the plugin handle all the upgrading stuff for you.

Conclusion

We have run through both the automatic and manual processes for upgrading to the latest version of WordPress. The user can use either process in order to help keep your site safe from hackers. Remember to always take a backup before updating using UpdraftPlus!

The post How to update your site to the latest version of WordPress appeared first on UpdraftPlus. UpdraftPlus – Backup, restore and migration plugin for WordPress.

How to create a WordPress custom theme

WordPress occupies a huge percentage of the world’s websites, making up 37% of all sites currently online. While there are many reasons and factors for this success, one of the main reasons is the popularity of features available to all users. Plugins, themes, posts, pages, categories, taxonomies, user roles and media handling just to name a few. To get the most out of WordPress, it is recommended users study and learn how to use all of these features. In this blog, we will focus on and discuss WordPress Themes and will walk you through the basics required on how to create a WordPress custom theme.

What is a custom theme?

Everything on the frontend of your site is being run from and controlled using something called a ‘theme’. A website’s theme is responsible for the specific design and functionality of the website. You can check out the WordPress theme repository or Themeforest for theme examples; here you will find thousands of themes listed for you to explore and download.

While established WordPress themes are great, if you have the ability and need, you may also want to build your own custom theme for a client, for yourself, or to submit to the marketplaces with the intention of selling it. When creating a commercial theme, you will need to follow the marketplaces guidelines for coding standards, structure of files and folders, etc. You can find more details regarding these guidelines on the marketplaces websites

In this blog, we will run through a tutorial to show you a basic overview on how to create your very own WordPress theme by covering all the basics and steps associated with the process. 

Create a WordPress custom theme

WordPress themes are built with template files, scripts, styles, images, etc. To proceed, you should have working knowledge of PHP, HTML and CSS, which are required to build a custom theme. Understanding JavaScript can also be an additional advantage.

To get started, we will first name the theme ‘Updraft’. Create a folder called ‘Updraft’ inside wp-content/themes. Within this ‘Updraft’ folder, you will write your theme related code, store files, images, fonts, etc. 

The main files of the custom WordPress theme are:

  • style.css
  • index.php
  • functions.php

The style.css will be the main stylesheet file and you can add all of your CSS in this file. Remember that you must include an information header about the theme. The header should look similar to the below format and be on the top of style.css.

</em></strong>
<strong><em>/*</em></strong>
<strong><em>Theme Name: Updraft</em></strong>
<strong><em>Theme URI: https://updraftplus.com</em></strong>
<strong><em>Author: UpdraftPlus</em></strong>
<strong><em>Author URI: https://updraftplus.com</em></strong>
<strong><em>Description: The custom theme built for the website.</em></strong>
<strong><em>Version: 1.0</em></strong>
<strong><em>License: GNU General Public License v2 or later</em></strong>
<strong><em>License URI: http://www.gnu.org/licenses/gpl-2.0.html</em></strong>
<strong><em>Text Domain: updraft</em></strong>
<strong><em>*/</em></strong>
<strong><em>

Next, go to the Appearance >>Themes, where you will see your theme listed. Activate it. When you check the frontend of your site, it will show a blank screen – as we have not added anything to the theme yet..

Remember to store your images, scripts and styles into your theme directory. The theme directory refers to the ‘wp-content/themes/Updraft’ folder. Be sure to keep them organized by using a good folder structure, creating specific folders for images, scripts and styles; Copy the files into the respective directory.

Functions File

The functions.php is the file where you can add code for different purposes. This file is automatically loaded during WordPress initialization, with the code written in it executed automatically.

The following operations in the functions.php file are usually carried out in this order:

  • Enqueue theme stylesheets and scripts (add the JS and CSS files to the website).
  • Enable Sidebars, Navigation Menus, Post Thumbnails, etc.
  • Define functions used throughout the application.
  • Etc.

The user can add their styles and scripts from functions.php file as follows. Please see the following link for more documentation.

function include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() . </em></strong>
<strong><em>"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "bootstrap" );
wp_register_script('bootstrap', get_stylesheet_directory_uri() . </em></strong>
<strong><em>'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');

The get_stylesheet_directory_uri() function gives a relative path of the active theme directory. The rest of the code can be seen to be the path of the assets.

Similarly, for adding Navigation Menus, Post Thumbnails:

function updraft_theme_setup() {</em></strong>
<strong><em>add_theme_support( 'post-thumbnails' );
register_nav_menus(
array(
'primary' =&gt; __( 'Primary Menu' ),
'footer1='  =&gt; __( 'Footer Menu' ),
'shop'  =&gt; __( 'Shop Page Menu' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );

Next, go to the WordPress dashboard and add a post or page. You should see the ‘Featured Image’ section. Additionally, under the Appearance >> Menus, you will find the Primary Menu and Footer Menu under Manage Locations.

These are just a few of the basic features you can cover while using the ‘Function’ file. There are a lot more you can add in this file if you so wished.

Template files

When building your theme, template files can be used to affect the layout and design of different parts of your website. For example, you would use the header.php template to create a header, or the comments.php template to include comments on your site. Template files have a .php extension. As they are PHP files, all pages output as HTML.

Using templates, developers can distribute code among multiple files. Listed below are some of the files in question.

  • index.php : The main template. This file should be responsible for post listing. When you set the Posts page from Settings >> Readings, this template gets executed.
  • page.php : This template is responsible for rendering your pages. This setting can be overridden by assigning a custom page template to individual pages.
  • single.php : Used when a single post is queried.
  • header.php : Add your header part in this template.
  • footer.php : Add your footer part in this template.
  • sidebar.php : Add widgets in this template.

Get a list of all template files available here.

Custom page templates

By default, all your pages are rendered through the page.php template. But in practice, you sometimes have to display separate flows on different pages. In this scenario, it is recommended that you use the power of custom page templates.

For example, if you have a ‘Career’ page and you want to add your code to this page; to achieve this you would need to create a career.php file into the theme directory and place the comment below at the top of the file.

&lt;?php</em></strong>
<strong><em>/*</em></strong>
<strong><em>Template Name: Career</em></strong>
<strong><em>*/

Next, go to the page edit section and assign this ‘Career’ template from under the Page Attributes box.

Now when you visit the Career page – code from the career.php will be executed.

Header file

Your website will have a common header on all pages. You can place this common header into the header.php. The header code will be something like this:

&lt;!DOCTYPE html&gt;</strong></em>
<em><strong>&lt;html &lt;?php language_attributes(); ?&gt;&gt;</strong></em>
<em><strong>&lt;head&gt;</strong></em>
<em><strong>&lt;meta charset="&lt;?php bloginfo('charset'); ?&gt;"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
&lt;?php wp_head(); ?&gt;
&lt;/head&gt;
&lt;body &lt;?php body_class(); ?&gt;&gt;
&lt;?php wp_body_open(); ?&gt;
&lt;!-- your menu --&gt;

In the above code, you will notice that we used some functions available in WordPress.

  • wp_head() : This method inserts crucial elements into your document – e.g., scripts, styles and meta tags.
  • body_class() : This will add different classes to the body element.
  • wp_body_open() : Used to insert code immediately after opening the body tag. An example of this would be the- Google Analytics script.

Menus can be added dynamically through the wp_nav_menu() function. Assuming you have first already created a menu under Appearance >> Menus and assigned ‘primary’ location to it. The code below generates the menu elements dynamically.

&lt;?php</strong></em>
<em><strong>wp_nav_menu(
array(
'theme_location' =&gt; 'primary',
'container_class' =&gt; 'menus',
)
);
?&gt;

Once your header file is set, use the get_header() function to include this file into your other templates.

Footer file

Similar to the header file, your common code for the footer will go inside the footer.php template.

&lt;!-- footer elements --&gt;
&lt;?php wp_footer(); ?&gt;
&lt;/body&gt;
&lt;/html&gt;

Here, use the wp_footer() that inserts elements, specifically scripts, at this location. Using get_footer() will include the contents of this file in other places.

Sidebar file

The sidebar is a vertical column used to display information on your site that is not shown within the main content. It may include popular articles, advertisement banners, a newsletter submission form, etc. Sidebars contain widgets that an administrator can customize. The sidebar.php template will include your site widgets.

In this example, we will create a basic sidebar by adding the below code to the functions.php file.

function updraft_widgets_init() {
register_sidebar(
array(
'name'          =&gt; esc_html__( Home Sidebar' ),
'id'            =&gt; 'sidebar-1',
'description'   =&gt; esc_html__( 'Add widgets here to appear in your sidebar.' ),
'before_widget' =&gt; '&lt;section id="widget" class="widget"&gt;',
'after_widget'  =&gt; '&lt;/section&gt;',
'before_title'  =&gt; '&lt;h2 class="widget-title"&gt;',
'after_title'   =&gt; '&lt;/h2&gt;',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );

Next, go to the Appearance >> Widgets. Here you will find the above sidebar. In this example, we are going to add some widgets to this sidebar. To add this sidebar to the frontend, add the following code in sidebar.php.

&lt;div class="sidebar"&gt;
&lt;?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar( 'sidebar-1' );
}
?&gt;
&lt;/div&gt;

Finally, remember to name the method ‘get_sidebar()’ so you can easily include the sidebar wherever on any other pages as and when needed.

Rendering pages and posts

As already mentioned, all WordPress pages are rendered and executed using the code you have written in the page.php file, except pages with custom page template. The below code is an example that will show a page featuring the page title, description and featured image.

&lt;?php
get_header();
?&gt;
&lt;div id="primary" class="content-area"&gt;
&lt;main id="main" class="site-main"&gt;
&lt;?php
while ( have_posts() ) :
the_post();
?&gt;
&lt;?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?&gt;
&lt;header class="entry-header"&gt;
&lt;?php the_title(); ?&gt;
&lt;/header&gt;
&lt;div class="entry-content"&gt;
&lt;?php the_content(); ?&gt;
&lt;/div&gt;
&lt;?php
endwhile;
?&gt;
&lt;/main&gt;
&lt;/div&gt;
&lt;?php
get_footer();

Similar code will go inside the single.php file to display the post information. To render the post listing properly (your index.php), in addition to the above methods – you may also want to use the following:

  • the_catgeory() : Displays category list for a post.
  • the_permalink() : Displays the permalink for the current post.
  • the_excerpt() : Display the post excerpt.

I18n for WordPress custom themes

While building a custom theme, try to remember that it should be developed in a way to support internationalization. By doing this, it makes it possible for your theme to easily be translated into other languages.

To add I18n support, remember to use a text domain which you can parse source files and extract the translatable strings from. In this example, we are using the text domain ‘Updraft’, but you can choose any unique identifier. We can define the text domain as follows. 

function i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'i18n_setup' );

Now whenever you use static strings in your theme files, wrap them inside __() or _e() functions.

&lt;h2&gt;&lt;?php _e('First Name', 'updraft); ?&gt;&lt;/h2&gt;
&lt;?php echo __('User Email', 'updraft'); ?&gt;

There are special tools available like POEDIT that help to generate translated language files. Please refer to this blog for more information.

This blog has covered the basics on creating WordPress custom themes. However, it is a vast topic that requires a lot of time and patience. Below are some helpful resources you should get acquainted with that will help you start to create your WordPress themes..

When create a new theme for your WordPress site, remember that you will need to back it up after every change or risk losing all your work. Use UpdraftPlus – The world’s leading and most trusted WordPress backup, restore and clone plugin.

The post How to create a WordPress custom theme appeared first on UpdraftPlus. UpdraftPlus – Backup, restore and migration plugin for WordPress.