The importance of correct image size

The Web is a visual medium

This means it’s important to use images. A post with a nice photo or that uses imagery to make a point is likely to be far more attractive to a visitor than one with a lot of turgid text.

But this doesn’t mean that you should just add any old shots, especially that nice snap of a sunset you took last night with your smartphone. There is a balance to strike between making your site or post visually attractive and bogging your site down.

The problem is that your iPhone – and most other modern digital cameras and smartphones – take enormous images that will affect page load speeds, meaning that users will have to wait ages for a page to load. Search engines hate it too.

As standard, your iPhone 6 takes a photo that could nearly fill two 17 inch monitors, and a level of quality almost unthinkable when digital cameras first hit the market in the late 1990s. In many ways it’s great to have such technology at your fingertips – but these are not appropriate for use on your website.

If you load smartphone images straight to your WordPress site, you’re going to slow your site down dramatically.

Make it small

This means two things:

  1. Reduce the image’s dimensions. 600-800 pixels wide is usually ample. You can do this in any image editing software, such as Photoshop, or even in paint.
  2. Reduce the file size. This means using a compression tool such as JPEGMini. The file size of most images can be significantly reduced with no visible loss in quality. Our sites all use an extra image optimisation plug-in that will cut any remaining fat when you upload media.

Add some text

When you add the photo, remember to fill in the alt-text field. This is the text that displays when a user doesn’t or cannot load the image itself, and is used by screen readers for the visually impaired. Google rates this blurb as highly important, so not filling it in is likely to negatively impact the post’s search rankings. Ideally, you’ll use some text that targets the same keywords as the overall post while still sensibly describing the image itself.

Caption are also important. Image captions are read three time more than main body content, so don’t miss this opportunity to engage with your audience.

Setting up a WordPress Site on Webworks.Hosting

Most Webworks sites are hosted on webworks.hosting There are other hosts but I’ll note down the details for them in separate posts.


Manual process for setting up a new client with a hosted service.

We’re going to assume a few things:

1. The client is new and hasn’t used this service before

2. The new site will be a Webworks WordPress build – we’re not going to configure the site here, just get the host set up, The spec for the WordPress build can be found here.

3. The host is going to use a standard package. Currently Basic Hosting is the only option.

4. The new site’s domain has been determined and it is registered.


Logging into the Host

  1. Connect to the host manager and log in with the administrator account.
  2. Once you’re in, choose Create a New Account from the menu sidebar.
  3. Provide the Domain, Username, Password and administrative Email address for the new account. If it’s a basic hosting account and the client is going to look after their own affairs, use their address (not using the new domain, use another address). If we’re managing it, use [email protected]
  4. Choose a package. Right now we’re only selling one package -ulcli829_Basic Hosting. The others are test packages or ones that have been set up for specific sites.
  5. Leave the CGI settings as they are
  6. Enable DKIM and SPF
  7. If the site is new and the domain has been purchased for this purpose you’ll probably want to choose the local nameservers (so don’t tick the box to use the registrars servers). If it’s an existing site and you’re adding a subdomain, or you want to direct web traffic to the new host but send mail somewhere else, then check that box.
  8. Remember to configure the registrar according to what you set up here.
  9. Click Create and the host will set itself up – the email address you specified will receive details about the new host, address, account details, etc.

Copying and uploading the template site (Webworks WordPress Build)

Ok, so now we have a host, we can upload the new site’s build, we’re just talking WordPress here so let’s go and get the template we’ve been keeping for just such an occasion.

There is a live site out there running called template.webworks.london. This bad boy just ticks over and updates it’s version of WordPress, plugins and suchlike automatically. It’s there for each time a new build is required and it gets updated, tweaked, etc. every now and then. The build isn’t version controlled or anything like that, no real need but theoretically, the newer the site, the more advanced it’ll be.

There is a backup utility on this site that automatically backs up it’s entire file system and database here. Just pick up the latest version. If there isn’t a version less than a month old, you might want to go and log into the site and see why backups haven’t been running. Account and password available on request.

If you can’t access the shared folder then you’ll need to be granted access, drop me a line and I’ll sort it.


Uploading the site template

  1. Open up the new host’s control panel by clicking List Accounts from the control panel sidebar and clicking the symbol to the right of the new domain you created. You’ll go straight to the Control Panel as if you were logging in as the user account you created above.
  2. Click on File Manager and choose the Web Root (public_html/www) directory. It’s up to you if you want to always open this directory in the future but I would recommend checking the box to show hidden files as you might need to mess with .htaccess in the future. Click Go.
  3. Now you’re in the File Manager. You won’t see anything in here except the CGI-bin folder. Click the Upload link from the menu.
  4. Click Choose File and select the file in the Dropbox folder as above. If you haven’t mapped a drive to this area you might want to save the zipped file somewhere and then upload it to the host. You shouldn’t need to overwrite existing files unless you’re returning to reinstall the site, in which case you’re a moron and should be fired. Leave the permissions, you don’t need to touch these.
  5. Once the file is uploaded, you can close the tab and return back to the file manager.
  6. Refresh the page and you’ll see the zip file has been uploaded, right click over the new file and select extract. Extract the files to the default location, which should be /public_html.
  7. Right, now the compressed file has been extracted, you’ll see a file and folder structure. This is the base WordPress install – we’re nearly there, just need a database.
  8. Finally, find the file called blooi_ei1.sql and download it somewhere locally on your own computer. Remember where you saved it.
  9. Leave the File Manager tab open, you’ll need to come back here.

Creating the WordPress Database

First we need to create the MySQL database on the host.

  1. Go back to the Control Panel (for the host not the administrator section) and select MYSQL Databse Wizard.
  2. In the wizard, give the new database a name – note this name down somewhere, copy it into Notepad or something. Make sure you copy the entire name i.e. the prefix with the underscore and the new name you just gave. So it looks like this newhost_newdbname. Click Next Step.
  3. Create a new username, whatever you like but only 7 characters are allowed – note this name down, again with the prefix.
  4. Use the password generator to create a new password – note this down as well. You’ll need to confirm you’ve copied the password somewhere to finish this process.
  5. In the next screen, grant ALL PRIVILEGES to the new user. Click Next Step.
  6. Head back to the Control Panel home screen.

Importing and setting up the template database

  1. From the Control Panel menu, select PHPyAdmin.
  2. Select the new database from the sidebar on the left. It will load and give you a new menu,
  3. Click on the Import menu item.
  4. Click Choose file in the File to Import section. You don’t need to change anything else. Select the file you downloaded in the File Manager and upload it.
  5. Click Go
  6. The database export will now upload, you should see a green bar appear telling you the import has been successful.
  7. From the database tables that now show up in the sidebar on the left, select WWT_options.
  8. Change the top 2 option_values in the list of records to the new site’s domain – double click on the current value and change http://template.webworks.london/ to http://www.newdomain.com/. If you’ve actually entered www.newdomain.com here, please log out and don’t call me again.
  9. That’s it, the database is setup – for now.
  10. Close the PHPMyAdmin tab and go back to the File Manager tab that you left open earlier.

Connecting WordPress with the Database

So now we have a WordPress file and folder structure that wants to talk to a database. This is all configured in wp-config.php. This file lives in the root of the directory you opened and uploaded to.

Right click wp-config.php and select Code Edit (or Edit). You might get asked if you want to Check Encoding, click on Disable Encoding Check, we’re not concerned with this.

A new tab will open up an editor and wp-config.php open.

Find this line:

define(‘DB_NAME’, ‘blooi_ei1’);

and change it to:

define(‘DB_NAME’, ‘{name of new database}’);

You did copy those details down earlier didn’t you?

Then find this line:

define(‘DB_USER’, ‘blooi_ei1’);

and change it to:

define(‘DB_USER’, ‘{name of new database user}‘);

Finally, find this line:

define(‘DB_PASSWORD’, ‘mn8m4frs’);

and change it to

define(‘DB_PASSWORD’, ‘mn8m4frs’);

Click Save Changes at the top right of the screen, and then Close.

Open a new tab in your browser and type in the url of the new site. If your registrant details are correct and DNS has propagated, you should see the template site appear, with a bit of dummy content. If not, you’ll be seeing errors and bloodshed. In which case, you’d better get in touch with me.


That’s it, you should have a fully functional WordPress site, ready to build on.