- How to Back Up a WordPress Site with CodeGuard
Thursday, January 15, 2015 by Martijn Broeders
What Is CodeGuard?
CodeGuard is an automated, cloud-based backup service for websites and databases, and it's well suited to securely backing up your WordPress sites in real time.
When it comes to backing up WordPress, we need to consider all the files in our WordPress configuration, e.g. WordPress itself, themes, plugins, image uploads, etc., as well as our database. CodeGuard can manage backups for all of these.
Every day, CodeGuard will watch for changes and update its backups:
In this tutorial, I'm going to walk you through the process of using CodeGuard to configure backups on a typical self-hosted WordPress site.
How Much Does It Cost?
With the Ninja plan, you can back up one WordPress site for $5 per month, while the Ronin plan covers 12 sites for $39 monthly. More advanced plans are shown below. Every plan includes a 14 day free trial.
Signing Up With CodeGuard
Visit CodeGuard's website and click Sign Up Free to begin your trial. You'll be asked to provide your contact information and billing details:
You'll also need to specify a password:
Configuring CodeGuard for WordPress
CodeGuard works by backing up your files and databases via FTP, Secure FTP, and optionally SSH tunneling. Here's the information you'll need to configure CodeGuard for your site:
- Your FTP server information.
- Your MySQL server information.
- If using a shared WordPress host, you may need access to cPanel—some hosts may need you to whitelist CodeGuard's server IP addresses.
Here's a short video that shows how to set up CodeGuard with WordPress on a shared host environment with cPanel support:
I'm going to walk you through setting up CodeGuard with a typical self-hosted WordPress site on a Linux server. In my case, I'm using my generic Digital Ocean WordPress configuration.
Adding Your WordPress Site Files
Here's the CodeGuard Add Your Website form:
As I described in Securing Your Server Login, I like to run my instances on different ports. CodeGuard supports this as well:
When you click the Test Website Connection button, you should see the following success notice:
Before you go to Connect Your Website, let's make sure that our WordPress directory tree is accessible via FTP/SFTP on the account that we've specified for login in the above form.
Typically, FTP/SFTP will allow users to see their home directory. But often, the WordPress directory tree is in
/var/www/and/or outside the user's home directory.
CodeGuard has a simple recommendation provided here: How do I backup files not in my FTP/SFTP user's home directory? I'll walk you through the basics.
The short answer is to create a symbolic link to your WordPress tree in your user's home directory. For example:
cd ~ ln -s /var/www/wordpress
In some cases, you may also need to ensure that the user account you're providing to CodeGuard has permissions to see the WordPress directory. One approach to this is to create a user account just for SFTP access and add it to the
www-datagroup, e.g. the Apache user. Something like this:
sudo chown -R www-data:www-data /var/www sudo chmod -R g+rw /var/www sudo adduser sftp sudo adduser sftp www-data
Configure CodeGuard to use the
sftpuser account. Then, when you click Connect Your Website, you should see your WordPress directory in the selection tree:
You'll need to select the folders and files to include and/or exclude from backups:
Now, CodeGuard is ready to begin your backup. At this time, you'll be offered a tour of the Dashboard!
Here is the Backup Progress Tracker, which shows you how far along CodeGuard is in capturing your first site image:
Every day CodeGuard will watch your site for changes and update its backup:
Adding Your WordPress Database
Does your WordPress site have a database? Of course it does.
Here's CodeGuard's standard Add Your Database form, but this time click Skip This Step, because we're going to use the advanced form.
Here's the Advanced Form, but with a typical Linux configuration, you'll actually need to choose the radio button for Tunnel over SSH:
Here's what the Add New Database form with SSH Tunneling looks like:
In order for CodeGuard to reach our MySQL Database, it will create an SSH Tunnel connection using our SSH login credentials—the same ones we log in to our server with, including the unique SSH port. Then, ideally, you'll have MySQL database credentials specific to your WordPress site, and provide those for it to access the database. I prefer to set up individual WordPress site database permissions, as opposed to using root or a global database account.
Once CodeGuard connects, it will ask you to choose from available databases which you can add:
Here's CodeGuard's Database Backup Progress Tracker:
When completed, CodeGuard will show you how many posts, pages, comments and users you have in your database:
The CodeGuard Dashboard
The CodeGuard Dashboard will provide you a daily summary of its activities. If you have lots of sites and servers, CodeGuard can back up one or all of them:
In case you're wondering, CodeGuard used to offer a WordPress plugin, but has moved away from that solution for security and reliability reasons.
If you're interested in WordPress Multisite, there are a couple of ways to configure CodeGuard to back up WordPress Multisite.
I hope you've found this introduction to CodeGuard for WordPress to be useful. Please feel free to post corrections, questions and comments below. I do try to keep up with the Tuts+ discussions. You can also reach me on Twitter @reifman or email me directly.
- CodeGuard Website
- CodeGuard WordPress Backup Walkthrough (video)
- CodeGuard: How do I backup files not in my FTP/SFTP user's home directory?
- CodeGuard Video Tutorials
- How to Use Filters in OpenCart
Monday, January 12, 2015 by Martijn Broeders
Let's first try to understand the concept of filters in OpenCart. In a conventional store front-end, you'll probably find an "Advanced search" feature so that users can filter products according to their preferences. But sometimes, you want to group different kinds of products together, although they belong to different categories. Or you would like to attach a tag to certain products so that they can be found easier in the front-end.
To understand it more clearly, let's take a real-world example. Let's assume that you have a "Monitors" sub-category available under the "Components" main category. And you would like to categorize monitors further by "LED", "LCD", and "CRT".
The first option that pops up in your mind is to create another level of categories under "Monitors". But instead of creating another level of categories, which could make things a bit more complex, you can use filters in OpenCart.
The benefit of using filters in the above scenario is that when you enable the "Filter" module, it provides a nice block in the front-end which allows users to refine the relevant products of their choice.
Let's go ahead and set this up.
Create the New Filter Group and Filters
Head over to the admin section of OpenCart and go to Catalog > Filters. Click on the Insert button to open the screen which allows us to create a new filter group and filters. Filter Group Name is the title used to distinguish the filters when more than one set of filters is available for display. Just fill in the details as shown below.
As you can see, we've created a filter group "Monitor Types" and the filter values are "LED", "LCD", and "CRT". Click on the Save button to commit the changes.
Assign the Filters to Categories and Products
Now we've set up the filter group and associated filters. Further, we need to assign the filters to the relevant category and products.
Assign Filters to a Category
Let's first assign filters to a related category. I assume that you're using the default categories and product data which comes with the OpenCart default installation.
Continuing with our earlier example, let's go ahead and edit the Monitors category. Go to Catalog > Categories and edit the Monitors sub-category under the Components main category. Click on the Data tab, which shows different fields, amongst which is Filters.
Filters is an autocomplete field. So you can select the values by just typing a few letters. In our example, you would like to choose "LED", "LCD", and "CRT" as filter values. Click on the Save button to apply the changes.
It'll make sure that when the "Filters" block is displayed on the "Monitors" category page in the front-end, it'll display all three of the options we've selected in the "Filters" field under the Data tab.
Assign Filters to Products
Now we need to assign filters to the each product that we would like to be filtered by our "Monitor Types" criteria. Obviously, we would like to edit the products under the "Monitors" category as we've set up the filters for that category in the previous section.
Go to Catalog > Products and edit the "Samsung SyncMaster 941BW" product. Under the Links tab you'll see the Filter field. Let's select "LED" and save the product.
In the same way, go ahead and assign "LCD" to the other product "Apple Cinema 30". So now we have two different products assigned with two different filter values. Also, you can assign more than one filter to the same product if needed. But in our case we'll keep it simple.
Enable the Filter Module
We're almost done with the setup! The only remaining thing is to enable the filter module and assign it to the appropriate layout in the front-end. Go to Extensions > Modules and install the Filter module.
After installing the Filter module, click on the Edit link to open the module configuration page. Click on the Add Module button to add a new row, and choose the options shown below.
In our example, it'll only make sense if we display our module in the "Category" layout. It'll make sure that when a user is browsing the products by category, the "Filters" block will be helpful in filtering out the products further. So we've selected Category in the Layout drop-down, and we'll display it in the Column Left position. Click on Save to apply the changes.
Testing the Front-End
So finally it's time to see things in action in the front-end. Head over to the front-end and select Components > Monitors (2) to list the products available under the "Monitors" category. You should see the Refine Search block on the left sidebar. Pretty cool, isn't it?
So as you can see, it's a really nice-looking block showing the different filter options, with the total number of products available in each filter. Just select LED and click on Refine Search to see the filtered product listing.
If you are familiar with "Faceted Search", the interface looks similar to that. In the same way, you can set up more filter groups and filters to display a rich refining interface in your front-end store!
In this article, we've explored one of the exciting features of OpenCart, called filters. I hope you've enjoyed it, and learned something useful about OpenCart. I would love to hear your comments and queries in the feed!
- Getting Started With Redux Framework: Introducing It and Integrating It Into Your Theme
Sunday, January 11, 2015 by Martijn Broeders
When site owners install a new WordPress theme, the first thing they want to do is to tweak its look and feel to match their branding or personal preference. And most of the time, the people who buy, download, or install WordPress themes have little or no coding experience.
So how do you, as a theme developer, enable the end users of your theme to have as much control as possible over the look and feel of their site without having to learn to code?
By creating options pages/panels, of course!
However, theme options pages are not easy to create—especially for those developers who don’t have much experience with WordPress or programming in general. Luckily, there are options frameworks.
What Are Options Frameworks?
Options frameworks are code libraries, plugins or classes that provide a solid foundation that developers can easily and quickly build upon to create and add options pages to their themes. This enables non-developers to use such panels to quickly customize the look and feel of their site, without touching code.
Options panels can be used to:
- upload a logo
- change the background color or any CSS property of an element (such as the header or footer of your theme)
- select a pre-defined skin or layout
- and more
Basically, options panels can place the power into the hands of your themes’ users by enabling them to change almost any aspect of their site’s design.
In this series, we are going to look at a very popular and widely-used options framework—Redux Framework.
This series will be divided into the following parts:
- Part 1: Introducing Redux Framework and Integrating It Into Your Theme
- Part 2: Adding Sections and Fields & Working With Configuration Settings
- Part 3: Using the Options in Your Theme (and Widgets)
- Part 4: Alternatives to Redux
- Part 5: Conclusion
What Is Redux Options Framework?
Redux Framework is an options framework that was born out of the combination of four frameworks, namely:
- NPH, which was created by Lee Mason with the aim of creating a framework that was compatible with ThemeForest’s submission requirements
- SimpleOptions, which is a merger of the above frameworks, created by Dovy Paukstys
- An earlier version of Redux (Redux 2.0), created by Daniel Griffiths and based on NPH
The Redux core team consists of these three developers. The project is under active development, with updates released quite regularly.
- Uses the WordPress Settings API
- Multiple field types
- Built-in validation classes
- Import/export functionality, enabling you to port settings across sites
- Free: Redux is free and 100% open source. You can use it in both personal and commercial projects without paying a cent.
- ThemeForest-Compliant: Redux meets Envato’s submission requirements, making it a good option for theme developers wishing to develop themes or plugins to be sold in Envato’s marketplaces.
- Popular: Redux is used by over 250 (known) items in the Envato marketplaces that have sold for well over $6 million. This popularity alludes to the power of this framework.
- Easy to Use: If you understand how arrays work, than you can use Redux. Getting started with Redux is as simple as creating a configuration object that consists of nothing more than nested arrays.
- Flexible: If it doesn’t quite meet your needs, Redux can be extended to create custom fields and validation/error handling.
- Well-Documented: Redux is well documented. The Redux website has a knowledge base, codex (developer documentation), and video tutorials.
- Strong Community: A strong community has mushroomed around Redux. If you are having a little trouble and would like help, you’ll probably find someone who has encountered the same problem before. And if it’s a feature you require, then more than 50 contributors will be willing to listen (and perhaps add it in the next release).
There are several ways to install Redux. But for the purpose of this tutorial, we are going to install it from WordPress.org.
Install the plugin as you would any plugin:
- Go to Plugins > Add New.
- In the search box, enter
Redux Frameworkand then click Search Plugins.
- From the results page, click Install Now on the first entry.
- After you install it, proceed to activate it as you would any other plugin.
Activating Demo Mode
To activate demo mode, go to Plugins > Installed Plugins and scroll to Redux Framework. You will see something like this:
Click Activate Demo Mode.
This will activate the demo mode and create a sample options panel called Sample Options in the WordPress Dashboard.
Demo Mode and the Sample Options page will allow you to play around with Redux and explore the various field types that it allows you to create.
Integrating It Into Your Theme
So far we have installed Redux and activated the Demo mode to allow us to explore the different fields that Redux allows us to create.
To integrate Redux into our theme, we have to initialize it with a new configuration file. Follow these steps to initialize a new instance of Redux:
- Navigate to the
redux-frameworkdirectory within your WordPress Plugins directory (
wp-content/plugins/) and copy the
sampledirectory to your theme.
- Open your
functions.phpfile and add the following line of code:
<?php require_once (dirname(__FILE__) . '/sample/sample-config.php'); ?>
When you refresh your WordPress Dashboard and hover over Sample Options, you will notice that nothing has changed—you still have the same sub-menus as before. This is because our configuration is exactly the same as before. We simply moved the config file from the Redux plugin directory to our theme directory.
Furthermore, you might see the following error message:
This is due to the fact that we are loading two identical config files. You can fix this by going to the Plugins panel and deactivating Demo Mode.
What we want to do is to start with a blank config file. Redux comes with one for your convenience. So let’s link to it instead.
To do so, change the line you just added to your
<?php require_once (dirname(__FILE__) . '/sample/sample-config.php'); ?>
<?php require_once (dirname(__FILE__) . '/sample/barebones-config.php'); ?>
If you go back to your Dashboard, you will realize that our Sample Options panel contains one section—Home Settings—and one field, a media uploader field aptly named Web Fonts.
We now have a barebones config class that we can add sections and fields to.
In this first part of the series, we looked at Redux Framework, what is and why it's worth using it in your projects. We went ahead and installed a fresh installation of Redux and examined the different features it affords us as theme developers.
We also created our own barebones configuration files to demonstrate how we can begin to tweak Redux to meet our specific needs.
In the next tutorial in the series, we are going to learn how we can add more sections, and also look at adding fields to these sections.
- Planning a WordPress Knowledge Base
Saturday, January 10, 2015 by Martijn Broeders
Many years ago, I used to write technical manuals for clients. These would generally take the form of paper documents, with hundreds of pages of technical information printed off and probably used as a handy place to rest a coffee mug by most of the people they were produced for. If the client was exceptionally advanced, there might have been a PDF version, but it was rarely used.
Times have moved on, and most manuals, or knowledge bases as they are often known, are in a digital form. They may take the form of an app or website, or some kind of simulation, but they will always have data at their core. Knowledge bases must be easy for users to search and navigate around, and they must be easy for writers to add content to or edit content, without having to work on any piece of data more than once.
This is why any system that's driven by a database will be the most appropriate. I've been using WordPress to drive this kind of internal website for a while now and I find the flexibility WordPress gives you over how you display and query data, combined with the admin interface that's familiar to a lot of people, make it an ideal tool.
In this series, I'll show you know to build a knowledge base using WordPress. I'll take you through the following steps:
- Planning your knowledge base, in particular planning how your content will fit with WordPress's content types. Identifying what the structure of the site will need to be and what custom template files you'll need to create, if any.
- Structuring your knowledge base. Creating the relevant template files and writing any custom queries.
- Creating your knowledge base's front-end. Creating the template files, styling them, and adding additional navigation, search and help.
- Making your knowledge base live. Looking at the constraints you might face here, how you'll allow access to the site, and how it will be maintained and managed.
The first part of this is planning, which I'll cover here. Throughout this series I'm going to work on an imaginary knowledge base and I'll provide any code so you can use it yourself.
Identifying Your Knowledge Base's Content
The first step is to identify what types of content your knowledge base will contain. My knowledge base is going to be a resource for WordPress users and developers.
It will contain the following types of content:
- Quick Tips
This content will then be sorted according to the target audience and the high level topics. It will also make use of tags for more detailed sorting.
My audience is split into two groups:
For developers, the high-level topics are:
- Theme Development
- Plugin Development
- Action and Filter Hooks
- Queries and the Database
For users, the high level topics are:
- The Dashboard
- Adding and Editing Content
- The Media Library
- Installing, Customizing and Activating Themes
- Installing, Customizing and Activating Plugins
- Site Management
As already mentioned, the site will also use tags which will be added by contributors. These won't be specific to users or developers.
The site will be managed by an imaginary team of WordPress experts who are all busy with other work so need to be able to add content quickly. Some of them will be using the WordPress mobile app to add content.
Having identified what my content will need to be, I need to match it to WordPress content types.
Matching Your Requirements to WordPress
As with so many aspects of developing with WordPress, there isn't necessarily just one way to match your content to the way WordPress is organised. So to identify the most appropriate one for you, you need to start by understanding how WordPress organises content.
WordPress Content Types
Out of the box, WordPress comes with three content types:
Note that there are other content types in WordPress such as links, comments, and navigation menu items, but the three above are the ones which are most relevant here.
You can also add your own content types, creating as many as you need, using custom post types. These can behave like posts or pages, the main difference being that pages are hierarchical and posts aren't. In this case, hierarchy isn't an issue for my main content types.
WordPress has two taxonomies built in, which you can use with your posts, pages, and custom post types:
In addition, you can register extra taxonomies to allow for better sorting and querying of your data.
Identifying What You Need
If your knowledge base has multiple content types, you can deal with this in one of three ways:
- Use one content type (such as posts) and use categories to identify what content type each is.
- Use one content type (such as posts) and use a custom taxonomy to identify the content type.
- Register a post type for each of your content types.
The first option is the easiest for beginners, as you don't have to write any custom code and can work with WordPress as it comes. The second option gives you more flexibility and is an efficient approach if you want to list all of your content types together rather than always splitting them up. It's also useful if a piece of content might come under more than one content type. The third option gives you the most flexibility as long as your content types will always be separate.
In the case of my knowledge base, some of my content might be of more than one content type (for example a quick tip might take the form of a video or include a link), so I'm not going to register separate post types. Instead, I'll create a custom taxonomy for my content types.
As well as the content types, I need to think about how my data is categorized. Each post will be in one or more topics with one or more audience. As the topics are clearly matched to the two audience groups, I'm going to register two taxonomies: one for user topics and one for developer topics. This means I can list the topics for each audience on the relevant pages of the site.
This means my knowledge base will use the following:
- three custom taxonomies: user topic, developer topic, and content type
So I'll need to register those three taxonomies but won't need to register any post types. In addition, as I won't be using built-in categories, I'm going to turn those off so that my authors don't accidentally assign items to categories.
Planning Your Knowledge Base's Structure
Now that I know what content my knowledge base will include and how the data will be stored, I need to think about the structure of my knowledge base's pages. The site will use a combination of archives and static pages, with a home page including the latest posts from all topics.
I also need to think about my navigation—as well as navigation in the menu, I'm going to include topic navigation in the sidebar, and also a search box.
So, my site will include:
- a home page with the latest posts from all topics
- a static page for each of the two user groups and for content types
- an archive page for each content type
- an archive page for each taxonomy term
- single pages for each post
Sidebar and Footer
I'll include a sidebar and footer on all pages of my site, but I'm going to vary it slightly according to which area of the site the user is in.
Here's what will be in the sidebar:
- On all pages there will be a search box at the top.
- On the home page, search page, and 404 pages there will be links to each of the user and developer pages, with a list of relevant taxonomy terms under each with links, and a list of content types with links to their archive pages.
- On the users page and archive pages for the user topic taxonomy there will be links to the user topic taxonomy terms archives.
- On the developers page and archive pages for the developer topic taxonomy, there will be links to the developer topic taxonomy terms archives.
- On the content type page and archive pages for the content type taxonomy, there will be a list of content types with links to their archive pages.
- On a single page we will have links to the archives for the user topic and developer taxonomies.
This all sounds a bit complicated, but it will start to make sense when we start building it. I'll create each of these elements with a function and then use conditional tags to attach the functions to an action hook which I'll add to the sidebar template. I'll also add a widget area to the sidebar just in case.
The footer will include lists of the taxonomy terms for all three of my topics plus a list of the latest posts.
This means I'll need the following template files:
Hooks and Functions
I'll add one action hook, which will help me to populate the sidebars: a
tutsplus_sidebaraction hook in
I'll create one function attached to this hook, which will contain the following lists:
- links to the archive pages for the user topic taxonomy terms
- links to the archive pages for the developer topic taxonomy terms
- links to the archives for the content type taxonomy terms.
Each of these will include conditional tags so they're added to the sidebar on the right pages.
I now have a plan for the content and structure of my knowledge base and I've matched that to WordPress capabilities. So I've identified exactly what I'll need to create in WordPress to make this knowledge base work.
While it's tempting to dive in and start coding, it's a good idea to spend some time planning your knowledge base in this way so you know exactly what template files and functions you'll need. That way when you come to write the code, it will be much quicker.
In the next part of this series, I'll show you how to register post types and taxonomies for your knowledge base's data and remove any you don't need.
- Developer Plugin: Essential for WordPress Theme Development
Saturday, January 10, 2015 by Martijn Broeders
Learning how to develop WordPress themes and plugins is an exciting and adventurous journey for any WordPress developer. In each stage of the process, you get discover new, exciting, and powerful features of WordPress.
Setting up a good WordPress development environment will go a long way to assist you when coding either a new WordPress theme or plugin. In this first part of the series, we will set up an environment that will aid us in having the a solid experience when building themes. In subsequent parts of the series, we will review the recommended plugins and significant role each plays.
Before we begin I'll assume the following;
- You already have WordPress installed either on a local or hosted server.
- You are familiar with the WordPress dashboard.
- You already have an idea for a WordPress project be it a theme or a plugin.
WordPress Developer Plugin
The first plugin that I highly recommend when setting up development environment is the developer plugin. It basically provides links of all the plugins will require along with additional settings that are key for any WordPress development environment.
Login to your WordPress dashboard and then click to install the developer plugin you have just downloaded from the WordPress plugin repository.
Once you finished installing and activating the plugin, you will be prompted to choose a development environment depending on the type of project you want to work on.
In this case, I selected a theme for a self-hosted WordPress installation.
Once you click Save Changes on the previous step, a list of recommended plugins will be shown on screen. Click to install each of the plugins mentioned, but do not activate them.
We are almost done installing the WordPress developer plugin. As I mentioned earlier, the best thing about this particular plugin, is the fact that not only does it give us a list of recommended plugins, it also recommends additional settings to optimize our development environment.
Before you start working on any theme, you need to enable the debug mode on your WordPress configuration file. When you browse the
wp-config.phpfile, you will come across a section that looks like this:
By editing this file and inserting the following line of code
define('SAVEQUERIES', true);, debug mode will be enabled, allowing you to see notices during theme development in case of any errors. The
SAVEQUERIESdefinition saves the database queries to an array and that array can be displayed to help analyze those queries. The array will be displayed by installing a plugin, that will do on the next part of this series.
Take note that
SAVEQUERIESwill have a performance impact on your site, so make sure to turn this off when you aren't debugging.
In this article, we setup the Developer Plugin and prepared our WordPress environment to ready itself for development. We looked at tools and strategies that help us to do a better job of catching warnings, errors, and notices.
If you have any questions or comments about anything covered here, please leave a comment below!