WordPress For Business Part 2: Design Customization & Updates

content writing checklist

When you install a new theme or plugin, not everything will look and feel as you want right out of the box. It may take some CSS tweaks, changes in settings or other tinkering to get there.

So it helps if you have rudimentary knowledge of HTML, CSS, PHP and the best practices to keep in mind when trying to customize your website. Otherwise you risk not only losing your changes, but also compromising on the uptime, security and business potential of your website.

WordPress For Business: Table Of Contents

Part 1: Domain Name, Hosting & WordPress Website Setup Part 2: WordPress Customization, CSS Styling & Updates
Part 3: WordPress Security, Backup & Performance Optimization Part 4: Attracting & Engaging Your Audience With WordPress

Part 5: Lead Generation & Sales Optimization With WordPress

Editing WordPress Files Via FTP

FTP (File Transfer Protocol) allows you to download, edit and/or upload files from your computer to your WordPress site. In order to use FTP, you will need an FTP client which is a desktop app that connects your computer to your WordPress hosting account.

It provides an easy to use graphics user interface, so that you can perform all FTP functions such as copy, upload, delete, rename, and edit files / folders on your WordPress site.

An FTP client can help you quickly fix common WordPress errors when you are not able to access WordPress admin area, which will happen more often than you think.

You will need a FTP username and password in order to connect to your WordPress site. This information can be found in your hosting account. If not, ask support.

First, you will need to launch your FTP client and enter your FTP username, password, host (usually your website address e.g. smemark.com), and then click on the connect button.

wordpress via ftp

Host is usually your website’s URL (e.g. smemark.com). There are several paid and free FTP clients (software) available with easy to use interface.

WinSCP is one of the most powerful and easy to use FTP client for Windows users. On your left, you have the files on your computer and on the right, you see the files on your server. Just click on a file to download, upload, or edit it.

Another option is CyberDuck. It is available for Mac and Windows computers. Unlike other cross platform applications, it actually integrates beautifully with your native Mac environment. The easiest to use is of course FileZilla, a popular free FTP client for Windows, Mac, and Linux.

Customization With CSS

If you’re willing to learn a bit of CSS to customize the design of your WordPress site, then this section is for you. However, I am not going to cover anything about CSS. There are many excellent tutorials you can find online for free.

Instead, I am going to share the things you must know and do before you start making changes with custom CSS. When trying to make changes to a website, a staggering number of people opt to edit their theme directly. This means they are changing or adding files in their current theme’s folder on the server.

The biggest disadvantage is that any modifications made to the theme in this way will be lost once the theme is updated by the developer. A much better idea is to use a child theme. This allows you to make any number of changes to a website without touching any of the original theme files.

From the WordPress back end, a child theme doesn’t behave any differently. You can find and activate it under “Appearance” → “Themes,” just like you would with any other theme.

The big difference is that a child theme depends completely on its parent in order to work. Without its parent theme present, it will not do a thing and cannot even be activated. That’s because a child theme uses everything present in the parent theme and changes only those parts that you want to be different.

The advantage is that you can upgrade the parent theme without losing your customizations. A child theme can contain image folders, JavaScript, CSS, template files and many other things. The beautiful thing, though, is that they don’t have to. You can include as much or as little customization as you want.

Many reputed theme companies and developers have already started bundling a corresponding child theme with each theme they sell. But if your theme package didn’t come with a child theme, setting it up is really easy.

The steps can be performed directly on your server via an FTP client. A child theme needs three things: its own folder, a style sheet and a functions.php file. We will start with the folder.

Create a folder in WP-Content/Themes. A best practice is to give your theme’s folder the same name as the parent theme and append it with -child. For instance, the child theme of Twenty Fifteen will be called twentyfifteen-child.

Now that we have our folder, we will need a style sheet and a functions.php file. In case you are not aware, a style sheet contains the code that determines the design of a website. Making a style sheet is easy: Simply create a new text file and call it style.css.

However, in order for it to actually work, we will have to paste the following code, the so-called “style sheet header,” right at the beginning of the file:

style.css
/*
Theme Name: Twenty Fifteen Child Theme
Description: A child theme of the Twenty Fifteen
Author: Hitesh Sahni
Template: twentyfifteen
Version: 1.0.0
*/

Feel free to copy it and make your own adjustments. Here is what each line means:

Theme name: This is the name that will show up for your theme in the WordPress back end.

Description: This description of your theme will show up in the theme menu when you click on “Theme Details.”

Author: This is the author’s name — that’s you, in this case.

Template: This part is crucial. Here goes the name of the parent theme, meaning its folder name. Be aware that it is case-sensitive, and if you don’t put in the right information, you will receive an error message, so double-check!

Version: This displays the version of your child theme. Usually, you would start with 1.0.

Once your folder and stylesheet are present, go to “Appearance” → “Themes” in the WordPress back end and find your child theme there. Note that the child theme is not ready to be activated because it doesn’t have any styles yet.

Next up is the functions.php file. The functions.php file allows you to change and add functionality and features to a WordPress website. Creating the file is easy too. All you need is a text file named functions.php, and then paste in the following code:

functions.php
<?php 
//* Code goes here

Add this file to your child theme’s folder as well. Next, to make the child theme usable, it needs to inherit the information in your parent theme’s style sheet.

The recommended way to load the parent’s stylesheet — and the reason why we created functions.php earlier — is to use a function called wp_enqueue_style(). This WordPress function will safely add style sheet files to your child theme. The corresponding code looks a little something like this:

functions.php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); 
function enqueue_parent_styles() { 
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }

Be sure to paste this at the beginning of your functions.php file, and save it (remember to upload the file if you are using an FTP connection).

Congratulations, you did it! You created your very first WordPress child theme. You can now go ahead and activate it from the WordPress backend.

Now we can start customizing our theme and change things around to get the result we are looking for. CSS allows you to customize colors, dimensions, fonts and other fundamental design elements. If you are proficient in CSS, you could actually change the entire layout of your website.

With the child theme’s style.css in place, you can override any styles in the parent theme by adding code to the child theme’s style sheet.

style.css
/*
Theme Name: Twenty Fifteen Child Theme
Description: A child theme of the Twenty Fifteen
Author: Hitesh Sahni
Template: twentyfifteen
Version: 1.0.0
*/

// Custom styles go here

You can not only target individual style declarations via the style sheet, but also override entire components of the parent theme. For every theme file present in the parent directory, WordPress will check whether a corresponding file is present in the child theme and, if so, use that one instead.

This means that a header.php file in the child theme will override its equivalent in the parent folder. So, if you don’t like something about a page’s layout, just copy the respective file, implement your changes, and upload it to the child theme’s folder.

The modifications will then appear in the child theme, while the original file will remain untouched. Just remember to give the child theme the same folder tree structure as the parent.

Customizing For Mobile Devices

In the previous section, you learned about changing the look and feel of your website with CSS. But depending on the things you change, you’ll also need to add additional CSS code for mobiles and tablets. This is because the changes you made may not look good mobile devices.

Most modern WordPress themes these days are built to be mobile responsive by default. And they already have the necessary CSS styles which define how the website and content will look on small screens.

So it is essential that you know a bit about what this code looks like and how it works. So when you make your own changes, you’ll remember and know what else you need to change to keep the theme looking great in small devices.

Most of the styles already in the stylesheet apply to desktop and mobile, so a responsive theme has additional CSS only for those parts which are different on mobile devices.

A responsive theme contains media queries in the theme’s stylesheet to define CSS that applies only to devices of a specified maximum or minimum width. The additional CSS starts by defining the target screen width.

It starts with the widest screen width (usually desktop monitors) and works down, adding CSS that applies to each screen width in turn. A media query consists of three main parts:

  • The @media rule;
  • The media type (the most common being print and screen — we’ll use screen);
  • The maximum width of the screen you are targeting.

For example, the media query to target mobile phones (and other small devices such as the iPod Touch) in portrait orientation that have a width of 320 pixels is this:

style.css
@media screen and (max-width: 320px) { 

}

The CSS to be applied to that screen width and any screen narrower than it would be written between the braces. Here are other media queries for commonly targeted screen sizes:

  • (max-width: 480px) Works for mobile devices in either portrait or landscape mode, because they are 480 pixels wide in landscape orientation but are still narrower than this maximum width in portrait.
  • (max-width: 780px) Works for iPads and other large tablets in portrait mode and any screens narrower than them.
  • (max-width: 1024px) Works for iPads in both orientations, as well as for small desktop browsers.

WordPress Staging & Migration

As your business grows and you start getting a lot of traffic, editing everything live is not the best option for a professional website. So I will show you how to create a staging (test) environment for your WordPress site.

To work on customizing, adding or updating anything in your WordPress site, it’s better if you create a test copy of your current WordPress installation (with all the current settings, plugins and files).

Instead of uploading your changes to the live site, you can upload them to a staging site on the same server. A staging site is a separate development area on your site (usually a sub-domain) with restricted access. This is where you can test your changes or use it for all your development.

Use this test environment to make any changes and test if everything still works fine. Once you are done and satisfied, you can migrate this test copy onto the actual, live website. Once you have thoroughly tested your site, you can then upload it to your live site.

If you don’t have the time to go through the hassle of creating a staging environment,  managed WordPress hosting providers like WPEngine offer built-in staging functionality. Another host, SiteGround, also offers the staging functionality in their grow-geek plan which is much more affordable.

First thing you need to do is to create a subdomain on your main domain. A subdomain will allow you to run your website in a separate folder, not affecting your main database, files, or uploads.

To do this, log into your cPanel (other control panel’s will be similar, look for Domains or Subdomains). Under the Domains sections, you need to click on Subdomains.

cpanel domain section

On the next screen, enter the name you’d like to use for your subdomain (typically staging or dev) and then choose your main domain from the drop down menu.

This should automatically fill in the Document Root text box with a location based on the name of your subdomain. You can change this if you’d like, but usually the default will be okay (public_html/staging).

create cpanel subdomain

Now you just need to click Create when you are done. Now you need to create a separate FTP account for your staging environment. A dedicated FTP account will only have access to your staging directory preventing accidental changes to your live environment.

cpanel files

In cPanel, navigate to the FTP Account section. Complete the fields in the Add FTP Account section. The Directory should match the directory you specified when creating your subdomain.

add ftp account

Click Create FTP Account to create your new account. This account will only have access to the directory you specified not the entire server.

Now that you have setup your subdomain, the next step is to copy the data from your live site to your staging site (also known as Cloning/Migration). This will make your stating site exactly like the live site and allow you to test changes in your staging environment with the same data without affecting your live site.

Knowing about migration will not just help you in creating a staging environment, but also come in handy later if/when you need to move/copy your website from one domain or host to another.

The easiest way to copy a WordPress installation from one place to another is the All In One WP Migration plugin. It lets you create a copy for your current WordPress installation, and then replicate that into another WordPress installation.

For a small website, the free version of the plugin will work fine. You can create a copy of your website, download it to your computer, and then upload it to the new environment.

But if your website is more than 512 MB, you’ll need to purchase the unlimited extension ($69) to be able to clone your WordPress site.

Plus, it’s better if you use dropbox extension ($99) to get done with the process fast. So instead of downloading the file to your computer, it’ll be stored in dropbox, from where it can be exported to the new site.

Access your staging site, via the subdomain we previously created. Your login details will be the same as on your current live site. Any changes you make to your staging environment will now be independent from your live environment.

This means that you are free to change settings, install new plugins, edit theme files, and more without affecting the experience for your customers.

Updating WordPress Plugins

Plugins are created by third-party developers. Most of them keep improving their plugins by adding new features, improving code quality, and keeping them secure. These changes are then released as updates.

You should always keep your WordPress plugins up to date to ensure that those changes are applied on your site immediately. This improves WordPress security and performance of your website.

WordPress comes with a built-in update system. It automatically checks for updates and shows you notifications when there are updates available for your WordPress plugins, themes, and WordPress core software. And then you can update them with a click.

But before you update a plugin, it’s important that you click on view version details to see what changes the plugin author has made. This will keep you informed.

Unless the version details specifically say security update, we usually wait one full week before updating the plugin. In this time, all errors usually get caught, reported, and fixed. If you have a heavy traffic site that is generating a lot of leads, then do the same.

Sometimes a plugin update can produce unexpected results like some plugin features may not work properly. In that case, first you will need to deactivate that plugin. If you can access the Plugins page in WordPress admin area, then simply click on the ‘Deactivate’ link below the misbehaving plugin.

After that you can install the WP-Rollback plugin. For more details, see our step by step guide on how to install a WordPress plugin. Upon activation, go back to the Plugins page, and you will be able to see a rollback option below each plugin.

Always make sure that you have setup an automatic backup plugin on your WordPress site. This will allow you to restore your WordPress site in case something goes wrong. Last but not least, you ca always test new plugin updates on a staging environment before going live.

WordPress For Business: Table Of Contents

Part 1: Domain Name, Hosting & WordPress Website Setup Part 2: WordPress Customization, CSS Styling & Updates
Part 3: WordPress Security, Backup & Performance Optimization Part 4: Attracting & Engaging Your Audience With WordPress

Part 5: Lead Generation & Sales Optimization With WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *