Using WordPress for web development

When we started PLint-sites in 2013, we used WordPress for almost every website and application we built. It was easy to use and with a relatively small effort, it was possible to make a nice website. Back then, frameworks like Laravel and Vue didn’t exist yet, or weren’t mature enough to use in production. 

In the years that followed, we started experimenting with other tools. Laravel stood with its great tooling and ease of adoption and we currently use it for nearly all projects. For the frontend it took a bit more time. We tried Backbone, React and finally Vue, which is now our preferred frontend framework.

Consequently, we hardly use WordPress nowadays, but because WordPress is still the most well-known CMS, we like to share our experience with some aspects of developing websites using WordPress. For a full guide on how to develop a website using WordPress, please check the documentation

Background

Before getting started, it is good to realise that there are two versions of WordPress, a free hosted version on wordpress.com and an open source branch available on wordpress.org. Here, we mainly talk about the wordpress.org version. A few of the advantages of WordPress are

  • Managing the content of your site was never so easy and there is no excuse to not keep your site up-to-date! And all of this without the need of programming skills.
  • Content and layout are separated. This means that independent of your posts and pages you can quickly change the look and feel of your site.
  • A long history. Although WordPress started in 2004 as a blogging platform, today we can create professional websites and even complex applications using WordPress.

However, before you can start adding your content to the web, it is time to install WordPress, pick and configure a theme and add some must-have plugins. We’ll treat these points below.

Installation

We assume you have your domain ready and some server space. There are tons of hosting companies but not all are ideal for hosting a WordPress website. So take some time to choose wisely. You probably have access to a direct admin environment and you should be able to create a new database. This is where your settings, posts and pages will be stored. So go ahead and create that database. Write down the credentials, you’ll need them in a minute.

Download WordPress from the official page in the language you prefer and follow the instructions. Now you are ready for the next steps: choose a theme and add some plugins.

Themes

The look and feel of your website is dictated by your theme. A theme is nothing more than a bunch of templates and stylesheets that make your website look good. Depending on your wishlist, you can choose a simple free theme or a complex premium theme with lots of options. It is up to you! By default, WordPress has a nice and clean theme, so you can start directly with adding your content.

There are plenty of free themes in all kinds of styles, but the number of features in these themes is limited. However, for a simple site with a few pages and a blog, this is fine. Looking for a feature rich theme with lots of options and fully customizable? Then you probably end up with a premium theme. Premium themes are usually not free, but often worth the money. Themeforest is a well-known website with lots of beautiful themes to choose from. Each theme has a demo so you can see before you buy. However, demo’s often have beautiful stock images to make the demo look great. So, try to imagine how your content (text, images, logo, brand colors, etc) would look in this theme. 

When you finally found a theme it is best to create a child theme and make your own changes inside this child theme. This way you will always be safe when updating the original theme. If you are changing the templates of the theme itself, all changes will be lost if you apply an update to the theme.

Plugins

Soon you will recognize that the standard features of WordPress are rather limited. For example, a contact form is not a standard feature. Extended functionality can be easily included by using plugins. A plugin is simply some extra code that is attached to the WordPress framework to add some functionality. Well-known plugins are WooCommerce to turn your website into a webshop, and Yoast, which helps to make your website SEO-friendly.

There are many plugins out there, estimated at about 60.000 official ones currently. A direct consequence of this huge number is the difficulty to find a plugin that does exactly what you intend. Apart from that, not all plugins are well programmed or actively maintained. Therefore, a good advice is to only use plugins from the official WordPress plugin directory. Read the plugin description carefully, check the reviews and number of downloads and whether the plugin is compatible with your WordPress version.

Backups

Making regular backups of your WordPress sites is very important. Hopefully you never need the backup, but suppose your website gets hacked, the server crashes or maybe one of your co-workers messes up the site completely. Then you really need a backup to restore your website. Maybe your hosting company makes backups for you, but it is always best to have access to your backups yourself. Therefore, a backup plugin may be very useful. Make sure you use a plugin that backups both files and database. We use the UpdraftPlus backup plugin to create backups automatically, following a schedule we choose. The plugin enables storing the backups in the cloud (e.g. Google Drive and Dropbox) and offers a one click backup restore feature.

Updating WordPress

Sometimes when you open the WordPress admin interface you will notice an update message:a new major version of WordPress is available with a link to update. For security and minor updates WordPress can update itself automatically. Automatic updates are easy and handy to get your site up-to-date. This is important because every WordPress update contains improvements or bug fixes to improve the security of your site. The WordPress Codex also recommends updating to the most recent stable version. 

An automatic update will run a script to get the latest version of the WordPress system. Have you ever asked yourself what happens when this script fails? Of course this won’t happen most of the time but you never know. Therefore, make sure you always have a backup of your WordPress database and files before you start the update. The backup contains your complete site including posts and images.

In addition to updating WordPress itself, the plugins and themes that you use release updates. It’s advisable to install those updates, but before you do, check the changelog of the corresponding plugin or theme. A changelog lists the changes that are made, so you know what to expect from the update.

Nowadays, it is possible to enable so-called auto-updates for plugins and themes. This means that you no longer have to worry about updating as it may occur multiple times per week when you have a lot of plugins installed which is distracting.

WordPress security

In addition to the content and design of your website, it’s important to pay some extra attention to the security of your site. Hackers are all around and the platforms everyone uses (e.g., WordPress, Joomla, Drupal) experience a lot of attacks. This may sound scary, but it’s nothing to worry about when taking the required measures. Probably the most important step in keeping your website safe, is to make sure your website is up-to-date.

In addition, there are plugins that add extra layers of security to your website. We use the  iThemes security plugin. The configuration takes some time but it is well worth the effort.After successful installation of the plugin, you will see a new item in your WordPress backend menu which is named Security. Clicking this icon leads to the following screen where you can do a quick configuration. Follow their guidelines, starting with making a backup.

Setting up iThemes security

After making a backup, click the second blue button Allow File Updates. Now the plugin has write access to the .htaccess and wp-config.php files. The next quick security measure is the One-Click Secure to get the basic configuration. Clicking Dismiss leads to the dashboard page of the plugin. Here you can see a list of security holes ordered by priority.

The plugin is able to fix a lot of the common security holes and the descriptions of most of the points are quite clear. In our experience, it is best to install and configure this plugin in an early stage of building your website. To fix some of the security issues, changes to your database are required and that may conflict with other plugins.

Multiple languages

Offering your websites’ content in multiple languages is a great way to increase the reach of your content. If your blog is for example in a non-english language, translating it to english gives a good change to increase traffic. Make sure the translations are correct, which means you can not just use Google Translate for this task. Also, there are some SEO tweaks you need to consider as Google writes in its guidelines.

Luckily, there is a plugin that helps you correctly setting up a multilingual website: WPML. It’s a premium plugin, but well worth the costs. 

Installing the WPML plugin

Installing this plugin works as usual (new plugin > upload) and after activating the plugin you can couple it to your WPML account by clicking the register WPML button in the upper right corner. Just follow the instructions on the screen and you will get a site key. Put this key in the correct field, click OK and you are done!

Setting up WPML

Then it is time for the less obvious part. There are a bunch of add-ons for the plugin that you may want to download now. Click the checkbox of the ones you want to install and they are installed for you. I recommend just installing them all since any one of these might come in handy later on.

Configuration of the plugin

Now it is time to configure the plugin. By clicking the WPML button in the WordPress backend menu you can:

– add a language.

– setup the URLs of your pages. For this blog with dutch as the standard language and english as the second language we have a base URL of blog.plint-sites.nl/en for the english part.

– setup the language switch. This is a simple dropdown menu you can include on several positions within your theme (assuming your theme understands the WPML plugin) and you can choose how the language switch should look. 

– Then you can configure the way your posts are handled. It is possible to only translate some posts and you need to configure what happens with posts that are not available in all languages.

– In the next section you can disable the translated version to show up in the frontend. This can be very handy if you have a lot of content to be translated. Behind the scenes you can simply translate everything and when you are done, you can quickly make this available in the frontend.

The translation begins: posts and pages

The translation of posts and pages itself is pretty straightforward. On the overview page of your posts or pages you see a blue plus sign after each post that needs a translation. Once you have a translation, the blue plus sign changes in a pencil to edit it. Clicking the icon opens the post editor and you can start translating. By default it opens with an empty post but you can use a button in the right sidebar to put the content of the original post in there.

Synchronising the menu

After translation of your posts and pages, it is also necessary to translate your menu. This can simply be achieved by opening the menu page or via the WPML submenu. You end up in a menu manager where you are asked to type in the names of the menu items. This is relatively simple, but if not, just try out the WPML forum, it is really great for this type of thing.

Local development

When developing a website, it’s good practise to develop it locally, and put it online when you’re finished. This is also the case when you add new features to an existing website. Nowadays, there are version control systems like Github and Bitbucket that help with this, but for a WordPress website there are some additional things to take care of.

Part of the configuration of a WordPress website is stored in the database, which is usually not in version control. This means that when moving a WordPress website from a local to a production environment, you have to make some changes in the database and specific files:

  • The wp-config.php file contains the database credentials. They should match with the credentials of the corresponding environment  
  • In the wp_options table change the records with option_name = site_url and option_name = home. Make sure the option_value links to the live site. Note that it is possible that the table prefix is no longer wp_ due to the action of the security plugin. In that case, find the ***_options table.

Now, your website should be functioning in the production environment. The last step is to make sure the internal links are correct. Therefore, login to the admin panel, go to general settings and save (without making changes). Do this also for the permalinks. 

When you wrote your posts and pages locally, you probably used some internal links. These are still pointing to the local environment. You can change this using a plugin or manually. If you want to fix this manually, perform a query on the wp_posts table since all posts and pages are stored in this table. This is the query:

UPDATE wp_posts SET post_content = REPLACE(post_content, ‘localhost/test/’, ‘www.your-domain.com/’)

In this query, you have to adjust the paths to your own situation. It’s advisable to make a backup of your database before running this query. 

If you don’t want to make manual changes to your database, the WP Migrate DB Pro plugin will perform the required modifications. 

Summary

Even though we don’t use WordPress anymore for web- and application development, WordPress is a beautiful platform to create a website or webshop. It’s still a popular platform and widely used: 64% of the websites with a CMS use WordPress. When choosing WordPress as the basis for your next project, make sure to select a hosting platform that is specialized in hosting WordPress websites. Next, choose a theme and start adding your content. If needed, add some plugins to extend the basic functionality of the platform. And last but not least: take care of backups, platforms updates and the security of your website.


Mijn Twitter profiel Mijn Facebook profiel
Leonie Derendorp Webdeveloper and co-owner of PLint-sites in Sittard, The Netherlands. I love to create complex webapplications using Laravel! Latest post
Handling cron jobs in Laravel

Leave a Reply

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