Skip to content

WordPress

More… wide…

Screenshot of improved UI for WordPress theme
More… wide.

It’s fleshing coming at a personal project with the learning of some of the big Agency projects of the last couple of years. The techniques learned scale well for this smaller project, but there’s also loads of room for improvement as ever.

Today had a fight with filtering Categories in WordPress. WordPress won. But I will not be beaten forever!

Meanwhile:

  • I’ve pulled all of the colours from the Sheru experimental theme so it uses just 3 base colours now. The rest are processed on the fly.
  • The site is no longer restricted-width (well, to a point)
  • Content now scales
  • All that gloomy black is gone. Bring on the brightness.
  • Prep for SVG icons.

A quick guide to hosting WordPress sites on Ubuntu

I’ve recently set-up a clutch of new WordPress sites on an Ubuntu server. This post pulls together my notes for doing it with minimal fuss.

Prerequisites

  • SSH access to the server
  • Admin level user for editing Apache settings
  • A user with permission to create databases (root)
  • A domain name already pointed at the IP address of this server
  • Basic knowledge of Nano (file editing)

Setup the database

We’ll assume we know how to get into our database. We’ll be prompted for a password (in this case for the user root):

mysql -uroot -p
CREATE DATABASE mysite;
CREATE USER 'mysiteuser'@'localhost' IDENTIFIED BY 'passwordhere';
USE mysite;
GRANT ALL PRIVILEGES ON mysite.* TO 'mysiteuser'@'localhost’;
FLUSH PRIVILEGES;

This creates a database called “mysite”, and a user that has full privileges to just that database.

Download WordPress

Now we need to download the latest WordPress release using wget.

cd
wget https://wordpress.org/latest.tar.gz
tar -xzvf latest.tar.gz
This will result in a folder named wordpress/ in our home folder.
On Ubuntu servers, web sites are usually located in /var/www/. So we’ll create a new folder there for our WordPress site, copy WordPress into that folder, and ensure the web server (Apache) has rights to serve any files.
mkdir /var/www/mysite
cp -r wordpress/ /var/www/mysite
cd /var/www
sudo chown -R www-data:www-data mysite
sudo chmod -R 775 mysite

To check the permissions applied, use ls -ltr.

Setting up the Web Server

Now we need to tell Apache about the site.
cd /etc/apache2/sites-available/
There’s likely a default configuration file already here, or files for other sites already setup. We’ll take a copy of the default one (on an Digital Ocean WordPress droplets this is named 000-default.conf.dpkg-dist) and name for our site:
cp default.conf mysite.conf
We now need to edit this file and ensure that we change any references to our new site and the folder we previously copied it into are correct.
sudo nano mysite.conf
The file should be edited to look similar to this:
<VirtualHost *:80>
 ServerAdmin webmaster@localhost
 ServerName mysite.com
 ServerAlias www.mysite.com
 DocumentRoot /var/www/mysite

 <Directory /var/www/mysite />
 Options Indexes FollowSymLinks
 AllowOverride All
 Require all granted
 </Directory>

 ErrorLog ${APACHE_LOG_DIR}/error.log
 CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Enabling SSL and starting your site

All moderns sites should also use SSL as it promotes security of our visitors. The default Digital Ocean WordPress droplet comes with this pre-installed, but it’s easy enough to add to Ubuntu yourself. Lets Encrypt* will walk us through the setup.
sudo letsencrypt --apache -d mysite.com -d www.mysite.com
sudo a2ensite mysite
service apache2 reload

Note that we add all the aliases for this site where we want SSL to be enabled (which should include all subdomains!).

That’s our site good to go.

* If Lets Encrypt complains that it’s unable to verify the domain it’s likely that the DNS entries for our domain are not yet resolving (can’t find a server). If we’ve only just setup this domain, we may need to wait up to 24 hours.

Project Sheru

Project Sheru: A Pattern Library based modern WordPress theme (and playpen).

  • Truly mobile first (code, UX, UI)
  • Truly responsive (natural visual breakpoints)
  • Accessible (screen reading, WCAG AA+ and ADA)
  • Modern development workflow (grunt + sass, handlebars patterns, clean theme)
  • Prototyping via CodePen
  • GitFlow on GibHub of WordPress theme and Pattern Library

This project has been time boxed for 2 months (February – March).