Building a Custom WordPress Website from Scratch

We all know WordPress has grown to a mature content management system these days. There are several great WordPress themes you can use to build a professional corporate website. You are not limited to creating a magazine or blog site if you choose WordPress as your CMS.

Wordpress websiteA few days ago I launched my company’s website at finalwebsites.nl and that website was one of my first WordPress websites that used all of the common WordPress features like widgets, shortcodes and custom post types. Don’t get me wrong, I used them all before (like for this blog), but in the past I created complicated sidebars without the use of widgets.

Remember, this series of articles is not on using or modifying an existing theme. These tutorial are designed for those with some HTML, CSS and PHP experience who used WordPress to build websites before. You should be familiar with common WordPress concepts and functions.

This WordPress tutorial series is about:

  1. Building a custom WordPress website from scratch – How to setup a theme and which template parts are important.
  2. Dynamic sidebars and widget logic – The default WordPress widgets are often to limited in their functions. This article is about using your own widgets and other solutions.
  3. Using custom post types to build an FAQ – Learn how to create a custom post type and how to build a simple FAQ page.
  4. WordPress plugins for regular websites – You need plugins for every WordPress site, this article is an update on my previous WordPress plugin list.
  5. Optimize your WordPress website – The first tutorials in the series are about building a website and the last one is about how to make your WordPress website better.

Build your WordPress theme from scratch

In most of my previous projects I used a child theme structure to create a WordPress website more quickly. This time I started my theme with my “own” empty files.

Create a new directory inside the themes directory with a name of your choice, than create your first file called style.css and add this comment:

This information is used by WordPress to recognize your theme. Let’s continue with the header.php file. This theme file is very simple because it doesn’t have a lot of PHP code.

I used common WordPress functions for the standard values, paths and the navigation menu. The WordPress function “wp_head” will add all the other header elements. Notice the outer DIV element which stays open in the header file. We close that DIV element inside the footer.php file.

The file for the footer is often very simple. The function “wp_footer()” is very important, because this function is by WordPress to include other codes if needed. Let’s create also the sidebar.php file.

If the sidebar doesn’t exists or if the sidebar doesn’t contains a widget, a search form will show up. If you like, you can remove that one as well. Create also the file functions.php and add the following PHP code to get the navigation and the widget area working, we will add more PHP code later in this series.

In theory you can run a WordPress website with the index.php file only, but this is not very clean and not flexible. Place the “WordPress loop” in your index.php file and include the functions for header, footer and sidebar. While doing this you should have this code in your index.php file:

When your first theme-set is complete you can activate the theme from the WordPress admin panel. Create also a custom menu and use “Primary Navigation” as the theme location. Test your theme, you should see a list of posts from the post section.

More theme files for your WordPress website

How many theme files you need depends on the structure of your website. A custom homepage is always a good idea. But first we copy the index.php file and call it page.php. There are only a few things you need to change: replace the H2 tag with an H1 tag, remove the link from the title and replace the function “the_excerpt()” with “the_content()”. The theme file for the custom homepage is based on the page.php file and we call it page-home.php. If we create later a page with the slug “home”, WordPress will pick up that theme automatically. We use the following code that shows the content for the homepage and also the latest 5 blog posts.

I don’t use a H1 element or the “get_the_title()” function for the homepage theme, because I like to call the page “Home” (to recognize that page between the others). I put the H1 element with a real header or title into the content field. The next theme file is the one we use for the posts. Copy the page.php file and save it under the name single.php and use this code.

This theme file looks the same as the file for the page theme, except the function “comments_template()”. This WordPress function will provide the comment list and also the comment form. You can change the look using CSS or you can create a comments.php file with several other comment functions. For the last option you should check the WordPress codex for more information.

The last theme file I create for this tutorial is the file we need for the category archives. It looks (again) a lot like the index.php file except that there is some category information, like the category name and the description. Create a file named category.php and add this code.

Below the while loop there are some simple navigation links, your need them to provide access to previous articles.

This was my tutorial about building a custom WordPress theme. I think it’s very easy to create the files and I’m sure it’s much more work create the style sheet for your WordPress website. The next tutorial is about how to create custom widgets for dynamic sidebars, stay tuned.

How-to choose a WordPress Hosting Provider

If you’re using the popular blog tool WordPress, you’re probably looking for the best possible WordPress hosting provider. Choosing a host might be hard because the are a lot of them. I advise you to take your time and make sure you’re choosing the best option. WordPress doesn’t require a lot of “special” server features, one reason more why most hosting provider will offer to host your blog. You don’t need one at the top-of-the-line and don’t go for the cheapest plan you can find.
WordPress Hosting
For the beginning blog a shared hosting plan should be enough, be sure an account upgrade is possible at any time. This is because you never know how fast your site is going to grow or how big it is going to get, and it’s always better to be well prepared. Check also the possibilities to move your account from a shared hosting plan to a VPS or dedicated server. You also want to avoid the smaller, lesser-known hosts. Go for the companies where a lot of people talk about, don’t host by some new company from a guy you met on forum for example.

Don’t forget, if you blog has frequent reader and traffic a hosting failure can ruin your blog site.

User and file permissions

WordPress has great features to maintain the core system, any plugins and your WordPress themes. While for the download and update from external files an build-in FTP function act as a kind of fall-back feature, you need the ability to edit your files right on the server. The last one requires some permissions to edit files thought the WordPress backend.

A normal webserver is configured that files have a 0644 permission and directories have a 0755 permission. Most PHP/Apache powered webserver using one user ID to process the PHP files. This permission is okay for most PHP functions but not for file based functions used to edit template or plugin files. A few hosting provider offer services where PHP scripts are executed with user ID from the web hosting account. Providing hosting accounts this way is more secure than raising the values for the file/directory permissions to 666/777. If the PHP scripts are executed by the host account user WordPress doesn’t need the FTP fallback feature and all updates and downloads are served much faster. The file upload tool from WordPress back-end works without any problems if PHP scripts are executed with user permissions.

Live Chat Software

Important features you need

  • Your host has to provide daily backups, ask them how long each backup is stored (several days are a must to have feature, more than a week is nice)
  • Host your blog in the country where you except to have the most visitors. This way most of your visitors will see your site very fast.
  • Check if the database and mail service is not hosted on the same machine as the website service. Most of the the mail server can slow down a server if mail related service have to fight back a lot of spam.

PHP related requirements

These features are not required by the WordPress core system but many plugins: cURL, safe_mode=off, simpleXML, Socket support

WebFaction, smarter web hosting

Now that you know what to look for in a host, it shouldn’t be too hard to make a decision. If you’d like to go the fast way and skip researching, I recommend webfaction.com hosting, we use it for this blog site. WebFaction fits all of the discussed requirements, and it’s very affordable overall. It’s literally perfect for hosting WordPress sites, and if you know for a fact you are going to be a webmaster for a while, you can save a significant amount of money by pre-paying for 2-5 years. WebFaction has hosting plans ranging from 10GB to 60GB, and from $5.50 to $34.50 per month. There’s a great selection, so you can find a plan that’s perfect for your budget and your wallet.

Create custom reCAPTCHA images using their API

If you need to spam protect your contact, comment or any other public form you should think about using a CAPTCHA image. A CAPTCHA image is an image with a random text which spam bots can’t read. The visitor need to enter that text into a form field and only if there is a match the form get processed.

Google has released a new “No CAPTCHA reCAPTCHA” service! Using their new API it’s possible to add CAPTCHA validations without to force your visitors to enter a random string if they like to post a comment. My demo is updated and I posted a new blog post about how to add the new reCAPTCHA checkbox to your WordPress comment form.

Try a search for “CAPTCHA image” on Google and you will find a lot of scripts, some of them are powerful and some of them are not very effective. I’m using reCAPTCHA since several years, their challenge image is very effective and safe and if people can’t read it they can listen to an audio file.

recpatcha_red

I’m sure you have seen this image before, this is the challenge image you get with their default configuration. if you don’t like this huge RED image (like me) you need a custom theme. The good news is they offer a very powerful API system for the client side and also for the server side. In this tutorial we use some jQuery code together with the reCAPTCHA ajax library to generate the challenge images. The validation process is done by a PHP script that use a simple cURL function to submit the request and response to the reCAPTCHA server to test the submitted match. We use also the jQuery form plugin to process the form fields and client side validation.

If you like to see how it looks like check this reCAPTCHA example.

reCAPTCHA client side script

Before we start we need to register a domain name at the reCAPTCHA website to receive a public and private key. To create a custom challenge image the Ajax way, we need to include the external file recaptcha_ajax.js and we use the following JavaScript code:

There is only one option required for this custom function, check this link if you like to set more options.
Next we need a small HTML snippet to show the challenge image:

To get this working you need to create a form text field with the name and ID recaptcha_response_field, use the same ID name of the target DIV container as you used in the JavaScript function. Using both snippets in used in a HTML page will generate a neutral CAPTCHA image like:

captcha

The current code doesn’t process our CAPTCHA validation script. We do this using jQuery and the jQuery form plugin. In this tutorial we do not explain how the plugin works, we did that already in this jQuery form plugin tutorial. In the next JavaScript snippet we check if the text field is not empty and if there is a response we hide the form and show the response in the DIV container output.

Server side validation script

Next we need to create a PHP script called recaptcha.php that will validate the entered text from our CAPTCHA image.

In this script we create a post array for the cURL function and post all the data to the reCAPTCHA API URL. Note all used variables are required, the post variable recaptcha_challenge_field is generated by the client API. The value for the challenge entry need to be encoded before we can post that value to the reCAPTCHA API. After we received the response we split the string and check if the first part is equal to true and output a success or error message which is presented in the target DIV container.

If you like to use this script on your own website feel free to download the script on finalwebsites.com.