mat martin | Resources

  • This series of posts is intended as a resource for people working with designers and developers on sites or graphic assets. Guest posts include thoughts and essays from other designers as well as site users and clients.

    The Site Maintenance posts are particularly aimed at clients using WordPress sites which I have created for them. Much of the content is applicable to any wordpress.org site but some of it may reference specific functionalities or plugins which I have written or installed and set up. Where third party code is used or referred to I try to give the appropriate credit. Please contact me for further or more specific information.

  • 28 October, 2016, 10:30 | Blog · Resources · Site Maintenance

    Protect Your Content: Backing Up WordPress

    The WordPress install

    It may not be the most intuitive way to visualise the contents of your site, but everything you publish on a WordPress site is kept in a database on your server. Each page or post can be reduced to a matrix of title, contents, images, links etc. Backing up WordPress by keeping a copy of this database is key to the health of your site. No matter how well constructed and maintained, any site is in some danger of suffering from a hack, a server error or any number of other corruptions which necessitate a restore. Keeping regular backups protects you against loss of content and unnecessary down-time.

    Remember: If you wait until you need a backup of your site to start making one, it will already be too late: you cannot back up what has already been lost. So, take a moment to review the information and options below, talk to your developer, and make sure you’re looking after your content. If you never need your backups, you can count yourself lucky and you’ll not have have lost much time at all.

    Types of data, types of backup

    Consider the structure of your data as existing on two levels. The database contains text and formatting information, and instructions on what to do with media files (images, audio, etc.). The media files themselves are stored separately and called by the database when necessary; they form part of the complete set of files which make up the WordPress install. This set of files also includes your theme and the WordPress core.

    Both of these sets of data need to be backed up, as they work together to create the front end of your site. It is important to note that a full backup of your site consists of two things:

    1. A copy of the SQL database (suffix .sql, most likely only a few KB in size),
    2. A full set of files, exactly as appears in the root folder of your install, on your server (anything from a few MB to a few GB).

    This can be achieved in a number of ways. The database file itself is small and easy to backup regularly, whereas the full set of files which make up the contents of your install can stretch to one or more GB in size, depending on how much content your site offers. Consequently, full file backups are usually made less often than database backups.

    If you use an automated script or plugin to create your backups (see below) these elements may come bundled into a single file or folder, but it is worth being sure all of this information is present in one form or another.

    Backing up WordPress regularly and to a safe location

    The important thing is to make sure that you have available to you a version of each of these sets of information which is current and fresh at all times. For this reason I recommend downloading and filing away a fresh copy of both sets at least once a month.

    Keep these safe, on a high quality external drive if possible. this is good practice for two reasons:

    1. your backups can take up a considerable amount of space which on your computer’s hard drive could definitely be used more efficiently,
    2. if your computer dies, is stolen or explodes, you won’t have lost everything (would now be a good time to mention backing up other things, too?).

    Backing up with a plugin

    This is the simplest option, and in some cases can even be automated. I suggest installing a plugin that will either take care of backups for you or allow you to make them from within the WordPress dashboard, thus keeping things as easy as possible. This will mean you are much more likely to get around to backing up than if you rely only on the manual approach described below. It is important though to make sure the backups your plugin is creating work properly and can actually restore your site. To protect yourself against this danger it is a good idea to make a manual backup (or ask a developer to do it if you’re not sure) twice a year or so at least, even when making more regular backups in this way.

    There are many free plugins designed specifically for backing up WordPress – wpmudev have a good list of them here. There are paid options with premium features which doubtless offer more options (and probably more support) than most free ones, too. Here are the two I have experience of using.

    Backup plugin: BackWPup

    BackWPup is the plugin I use to back up this site. I am currently using the free version which still allows me to schedule a number of backups of differing types to happen automatically. It also saves them directly to a designated folder in my Dropbox. I suggest setting it up to perform a full backup of your site once a month, and a database backup once a week (unless you are updating the site on a daily basis).

    To install BackWPup within your site is to visit Admin > Plugins > Add New in your dashboard and type “BackWPup” into the search bar. Once found, you can simply hit “Install” followed by “Activate” and you’ll see the BackWPup menu appear in the left hand menu bar. Click on this to open the BackWPup dashboard. To set up an automated backup task follow these steps:

    1. Go to BackWPup > Add New Job
    2. Name your job (e.g. Monthly Full Backup)
    3. Under “Job Tasks” select everything you want the backup to contain/do. For a full backup check all boxes. To backup the database only (a much smaller task) check only “Database backup”.
    4. Fill in the remaining options on this page according to your preference. The file naming convention will work well if you leave it untouched. I suggest choosing “zip” under Archive Format, and using either “Backup to folder” or “Backup to Dropbox” as a job destination (thie latter option will ask you to link your Dropbox account with your WordPress account).
    5. Hit “Save changes”, and navigate to the “Schedule” tab at the top of the page.
    6. Under “Schedule”, if you select to start job using WordPress cron a “Schedule execution time” table will open up lower down the page. Here you can select the parameters for your backup times before hitting “Save changes” once more.
    7. Leaving the default settings under “DB Backup”, “Files” and “Plugins” should give you the results you need when backing up.

    Backup plugin: Duplicator

    Duplicator is an established, regularly updated plugin with both free and premium versions. The simplest way to install Duplicator within your site is to visit Admin > Plugins > Add New in your dashboard and type “Duplicator” into the search bar. Once found, you can simply hit “Install” followed by “Activate” and you’ll see the Duplicator menu appear in the left hand menu bar.

    The free version does not allow for scheduled/automated backups or connection with third party services such as Dropbox to store your backups, although both of these options are offered in the Pro version if desired. This means that backups must be made manually and downloaded if you would like to store them elsewhere than on your server. It’s easy to do:

    1. In the WP admin area, navigate to Duplicator > Packages and hit “Create New”.
    2. The next screen shows the proposed name for the backup (YYYYMMDD_sitename – change it if you like), and offers some other options which we can leave at the default settings. Hit “Next”.
    3. The plugin will scan your site to create an overview of the backup and predict any possible issues. Ideally you will receive a green “Good” status for all aspects of the package but you can receive a warning in some cases (e.g. if you have very large files or any of your posts have unusual titles). Provided the plugin will allow you to, acknowledge the warnings and proceed by hitting “Build”, as often warnings can be false.*
    4. When the scan is complete you will be given the option to download the entire package (put it on that external drive we mentioned earlier). It will also be stored in a directory in your root folder (wp-snapshots) so it can be accessed later either via the WP dashboard or via FTP.

    *If you get warnings in Duplicator and they are not false the package will not be created and the process will be interrupted. This could be due to the size of the files being backed up and the timeout settings on your server being incompatible. There are different ways of circumventing this, including contacting your hosting provider and asking them to alter these settings. The plugin’s developers offer a good troubleshooting guide here, too. If you’re still stuck, you may need to ask your developer to install a backup system and get it working for you before you can begin creating backups from within WordPress.

    Backing up WordPress via cPanel and FTP

    Important: This is quite a complex process and while it shouldn’t affect your site at all, it does give you access to the databases on your server and thus the ability to change or even delete them if you don’t know what you’re doing. Unless you’ve very confident here, use a plugin (above) or speak to a developer about backing up your site for you.

    This is the manual approach to backing up, and is perhaps both the most complicated and the most reliable. These instructions assume you have a basic knowledge of file management via FTP and can gain access to the cPanel interface as a way of managing the contents of your server. Not all hosting providers offer this service but it is by far the most widely used option. If your host does not offer this the chances are they have something similar within their own site, or will be able to advise you on gaining access to your PHP files.

    You will need information sent to you by your hosting provider when you signed up. Remember that email? If you didn’t file it, make a note of the info, or just can’t find it now, then contact your host and ask them for the following:

    1. Your cPanel access or equivalent (URL, username, password),
    2. Your FTP credentials (server address, username, password).

    Step 1: Backup your database

    For this you will need to access your cPanel dashboard. Visit the URL given to you by your host and log into the system. Once you’re in you are looking for the function labelled phpMyAdmin.

    Backing Up WordPress

    Open this and you will be redirected to the phpMyAdmin service, where you will see your database listed on the left (if you see more than one database and you’re not sure which one is for the site you’re backing up, check this post from wpmudev). Follow these steps to download a copy to your computer:

    1. Hit “Databases” in the list of tabs along the top of the page, then select your database on the resultant page. This will bring up a list of the tables that make up your database, under the title “Structure”.
    2. Now that your database has been selected, click on “Export”, again in the top list of tabs.
    3. You will want to use the “custom” options here – check the box and you’ll see a list of variables come up. In my experience, only one change is needed from the defaul settings in there: scroll down to “Object Creation Options” and check “Add Drop Table Statement”.
    4. Scroll to the bottom and hit “Go”. This should generate a download via your browser.

    Step 2: Backup your files

    This requires access to your server via an FTP client (I use FileZilla). Using the server address, username and password provided for FTP by your host, establish a connection with your server and locate the folder which contains the WordPress install. It should look something like this:
    Backing Up WordPress: Protect Your Content

    A WP install root will usually look similar, and will always contain the folders wp-admin, wp-content, wp-includes and the wp-config.php file. This is a surefire way to recognise that you’re in the right place.

    On the left here I’ve created a folder on my desktop called SITE BACKUP, into which I can then download the entire contents of that root folder (that’s everything – all files, all folders, every time). This copies everything to a new location (in this case the folder on my desktop), which I can then group with the database file downloaded as above, and the two together complete the backup.

    A developer would then be able to restore your site to the point at which this snapshot was taken, regardless of what happened to it next.

  • [ N.B. This series of posts is intended as a resource for my development clients who are using WordPress sites which I have created for them. Much of the content is applicable to any wordpress.org site but some of it may reference specific functionalities or plugins which I have written or installed and set up. Where third party code is used or referred to I try to give the appropriate credit. Please contact me for further or more specific information. ]

  • 21 October, 2016, 10:00 | Blog · Resources · Site Maintenance

    WordPress Account Management: Basic Navigation

    WordPress Account Management:

    WordPress account management is quite a simple process provided you know where to find the various settings and variables within the dashboard. In order to give you access to your WordPress site, the system automatically creates an identity (ID) for you as a user. For sites with more than one contributor this is used to identify the author of a page or post, and to offer differing levels of access to the site’s content and settings to different people. For static sites or sites with a single user the ID simply manages your security and settings.

    Here are a few things about running a WP account which it may be useful to refer to.

    WordPress: .org vs .com:

    It is easy to get confused between WordPress’ .com and .org offerings. The accounts are not identical, and the basic differences are as follows:

    1. .com is a free service hosted by WordPress themselves – you sign up and create your site on their servers, using an off-the-peg theme to adjust the look of the site. Content is managed entirely via their online CMS (content management system).
    2. .org is more complex, but still free at the WP end – you host this system yourself via a third party hosting service (Not free, but can be cheap. I recommend HostPresto [disclaimer: that’s an affiliate link] for this), and manage the content via a combination of their CMS and by managing the files on your server.
    3. .com offers limited options and functionality compared to .org. If you are having a bespoke site built you will almost certainly be using the .org platform, although a good developer will take care of everything apart from the in-site content management, so your user experience should be similar to that of a .com site.
    4. .org allows the use of plugins, which we’ll go into in another post, but which allow for a great deal of extended functionality, from virus protection to multilingual site management. Again, these will most likely be researched, installed and set up by your developer.
    5. The visual/design aspect of a .org installation is much more controllable. With a .org site you can choose from a much wider variety of existing themes, both free and premium, or even develop your own bespoke theme (or have one developed). The level of control possible on a .org install far exceeds that of the basic .com version of WP.

    These differences in WordPress account management are all set out pretty neatly by WP themselves right here.

    In some cases it will be necessary to have an account at wordpress.com even if your site is built in a .org install. Examples include setting up a Gravatar image for use across the platform, or for certain plugins/functionality. These instances will be covered in these articles as and when they come up.

    Login & Access:

    On handover of your new site, you will have been provided with a login URL, username and password. It is important to keep these safe and accessible. The login URL for your site is usually [your domain]/wp-login.php, where you will be prompted to give your credentials in a screen which looks like the one above.

    You’ll see that there’s a lost password link beneath the sign-in box. You can use this to generate a new password if you lose the current one, provided your email settings are correct (this is worth being sure of). If you need to choose a new password be sure to select something secure – WordPress is one of the most popular CMS platforms in the world and thus is subject to attacks from hackers who will trawl and crack simple passwords much more easily than ones which include symbols, numbers and a combination of upper and lower case letters. This article on the construction of safe, memorable passwords is worth a read.

    Alternatively, you can use a password generator (a search will offer you a selection) to create something random, which you’ll need to write down or record in a safe place.

    Your account settings:

    WordPress Profile LinkYour account settings are accessed, once you have logged into your website, in the top right hand corner of the page. When logged in to a WordPress site you’ll see a black admin or tool bar along the top of the page (by default you’ll see this whether you’re looking at the front end (pages) or the back end (admin area) of the site, although there’s a setting to turn this off on the front end of the site – see below). This admin bar is key to handling yourWordPress account management. In the top right hand corner of that bar you’ll see a greeting. Hovering over this offers you the option to edit your profile or to log out. Clicking on it takes you straight to the profile edit screen, where you can adjust the settings.

    The Profile Edit Screen:

    1. Visual Editor: Disabling the visual editor will remove the option to select “visual” or “text” tabs above the content areas in your page/post edit screens. This is only useful if you’re comfortable enough with basic HTML code to add your own hyperlinks, paragraph/header tags and the like in-line, and even then it can somewhat interrupt the flow of typing. However, leaving it enabled won’t restrict your access to the “text” tabs if you do need to get technical.
    2. Admin Color Scheme: This makes no difference to the running of the WordPress system, but is good if there isn’t enough purple in your life.
    3. Keyboard Shortcuts: By default, this is left unchecked, but you can use it to allow use of the keyboard shortcuts as defined here by WordPress within the admin area of your site.
    4. Toolbar: As mentioned above, you can choose here whether or not you want to see the black admin bar on the front end of the site when logged in. I recommend leaving it checked, as the bar provides an excellent navigational route between front and back ends.
    5. Username: This cannot be changed within the WP system, so is greyed out here.
    6. First/Last Name: Not required but can be useful in some contexts, especially if you begin commenting on your own or others’ blogs.
    7. Nickname: This is a required field, as it is used by the WordPress system. Usually if this is left blank the username will be used.
    8. Display name publicly as: This dropdown will give you a choice between the last three options, for display on the front of the site should you be named as the author of a post or comment. This can be carried over onto other WordPress sites if you engage in discussion there.
    9. Email: The main admin email for your site. This will be used for warnings, admin updates and password resets. It is very important that this is up to date. It shouldn’t be displayed publicly at any point, although it is possible for some themes to call it (I never do this on client sites, but if your theme wasn’t built by me you can check with your developer or theme author).
    10. Website: This can be left blank, you can input the URL of the site you are in, or indeed the URL of another if you have more than one. The link will be displayed if and when your nickname is used on sites.
    11. Biographical Info: An optional field which allows you to add a little detail about yourself or your business for display if anyone views your profile directly. It isn’t bad practice to simply duplicate your Twitter bio or similar here, in case it might help with your SEO.
    12. Profile Picture: This is set via WordPress’ .com service, using a system called Gravatar (see below).
    13. New Password: Here is where you reset your password for your account, and your access to your site. A password generator is offered, which should keep your account secure.
    14. Sessions: This allows you to make sure you are logged out everywhere. Useful if you’ve been using a public or borrowed computer to work on your site, and worth remembering.

    Avatar/Gravatar:

    Your WP avatar image is not as straightforward a proposition as you might think. This is because WP uses Gravatar to make sure that your visual ID on their platform is scaleable and helps your online presence to be coherent. Here’s how they put it:

    Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums, so why not on any site?

    Signing up for a Gravatar is entirely optional, and not doing so won’t stop you doing anything with your site. If you do want one though, this is one of the situations in which a wordpress.com account is needed even if you don’t run a site there. The signup is here – it costs nothing and could be useful later, too – for example if you want to incorporate the JetPack plugin into your site (more on that in another post), or if you use other Gravatar-compliant services like HootSuite.

    Multiple users in one site:

    A note should be made here to acknowledge the possibility of adding several users to a single WordPress site. In many cases this simply won’t be necessary, because separate authorial voices or levels of access are not relevant to the content of a site which either represents a single individual or an organisation with a master admin account. However, on blogs where conversation is encouraged or contributors’ identities are to be made distinct this is an important aspect of the WP functionality.

    Users can be granted one of four levels of access. The following is reproduced from WordPress’ own article on the subject (there’s little point in rephrasing what the horse says).

    Types of user account:

    • Administrator: An administrator has full and complete ownership of a website, and can do absolutely everything. This person has complete power over posts/pages, comments, settings, themes, plugins, import, users – everything. Nothing is off-limits, including deleting everything.
    • Editor: An editor can view, edit, publish, and delete any posts/pages, moderate comments, manage categories, manage tags, manage links and upload files/images.
    • Author: An author can edit, publish and delete their posts, as well as upload files/images.
    • Contributor: A contributor can edit their posts but cannot publish them. When a contributor creates a post, it will need to be submitted to an administrator for review. Once a contributor’s post is approved by an administrator and published, however, it may no longer be edited by the contributor. A contributor does not have the ability to upload files/images.

    There is one more level of access that can be granted in some cases:

    • Subscriber: In your comment settings, if you’ve selected “Users must be registered and logged in to comment”, once they have created an account, they will be given subscriber role. Subscribers only have the ability to leave comments.

    To create a new user within your site:

    This can only be done by Administrators, who select the level of access the new user receives.

    1. Go to Dashboard > Users > Add New.
    2. Fill in the new user’s name, email and other info, as above (if this user already has a WordPress account or Gravatar they will be recognised by the system when you complete this process).
    3. Generate or set their password. Check the box to “Send this password to the new user by email” and they’ll receive a confirmation of their new account and the means to log into it.
    4. Select the role you wish to assign to the new user and click on “Add New User”. This will take you back to the main user screen.
  • [ N.B. This series of posts is intended as a resource for my development clients who are using WordPress sites which I have created for them. Much of the content is applicable to any wordpress.org site but some of it may reference specific functionalities or plugins which I have written or installed and set up. Where third party code is used or referred to I try to give the appropriate credit. Please contact me for further or more specific information. ]

  • 14 October, 2016, 10:00 | Blog · Resources · Site Maintenance

    Achieving a Clear Browser Cache: See What's Really There

    A Clear Browser Cache

    A clear browser cache is a beautiful thing – it’s like the mind of a meditation guru. It allows us to see what is really on the page we are viewing, and means our experience isn’t clouded by fragments of past experiences.

    I admit I’ve made it sound very good here. The caching features on our browsers are there for a reason, of course. Our interactions with the sites we visit on a regular basis are rendered much quicker by their processes. This is done by the browser “remembering” stylesheet info and keeping copies of images which have been downloaded previously. For the most part it’s a positive thing: it has been developed to make our online life less frustrating.

    However, caching can cause problems when repeatedly viewing sites which change regularly. This is particularly evident when developing a new site: I often find that changes I make to in-progress sites are not rendered, or rendered incorrectly, when viewed by clients. This is because the browser is helpfully “remembering” the site from last time and either ignoring new information or being confused by it.

    Here are some things you can do if you suspect you’re not seeing something on a webpage that should be there*:

    N.B. PC/Linux specific information is researched for inclusion here but not tested as thoroughly as on Mac systems. For the purposes of this article I’m using the most recent (at the time of writing) versions of the browsers on Mac OS, which are:

    • Chrome Version 53.0.2785.143
    • Firefox Version 48.0.1
    • Safari Version 10.0
    • Opera Version 40.0.2308.81
    • Internet Explorer Version 11 (not on Mac system)

    Hard refreshing

    A hard refresh or two is your first port of call in the search for a true page read and will usually fix any issues. The benefit of this is that you are changing nothing in the browser and it’s very easy to do. In theory at least this should force the browser to reload everything on the page from scratch instead of reloading with the cache (think of the difference between the C and AC buttons on a calculator), although it doesn’t always work perfectly. Browsers can sometimes hold onto their memories very tightly (can’t we all?).

    • Chrome: Mac: Cmd+Shift+R | PC/Linux: Ctrl+F5 or Shift+F5
    • Firefox: Mac: Cmd-Shift+R | PC/Linux: Ctrl+F5 or Shift+F5
    • Safari (Mac Only): Shift+Click on Refresh button in address bar
    • Opera: Mac: Shift+Click on Refresh button in address bar | PC/Linux: Ctrl+F5 or Shift+F5
    • Internet Explorer (PC/Linux Only): Ctrl+F5 or Shift+F5

    Hard refreshing in mobile browsers

    It’s harder to force a complete reload on most mobile devices (iOS, Android). A cache clear (see below) will usually work, but even then it’s often necessary to refresh a page several times. Just look for the refresh button, in or near the address bar.  It usually looks something like this: ⟳

    Clearing the cache

    If hard refreshing the page once or twice doesn’t help, it’s time to clear your browser cache.

    Important – Read this first: Clearing your cache removes information from your browser’s temporary files. This can affect some features you may be relying on, such as auto-saved passwords. Ideally this should not be information which you rely on browser caching to keep track of for you in any case, so consider keeping track of your passwords in a safer way. Officially, clearing only the cache should not remove your cookies, browsing history or auto-fill info, but because each browser is different this cannot be guaranteed. Different browsers also offer different levels of control over exactly what you can avoid clearing along with the cache. As always, the lesson is: back up, and make sure that you are not relying on your browser to remember things for you.

    After doing any of the following, it’s a good idea to hard refresh the page you are looking at one last time.

    To clear browser cache in:

    1. Chrome

    History > Show Full History… (⌘Y / Ctrl+H) opens a new window/tab. From here hit “Clear Browsing Data”, uncheck everything except “Cached Images and files” and hit the “Clear Browsing Data” button to complete the operation.

    2. Firefox

    History > Clear Recent History… opens a new window. Use the “Details” dropdown arrow (⌵) to reveal the options and uncheck everything except “Cache” before hitting “Clear Now”.

    3. Safari (Mac only)

    Safari > Preferences… (⌘,) opens a new window. Select the “Advanced” tab and make sure the option to “Show Develop menu in menu bar” is checked. Once this is done you can clear the cache at Develop > Empty Caches (⌥⌘E).

    4. Opera

    History > Show All History… (⌘⇧H / Ctrl+H) opens a new window/tab. From here hit “Clear Browsing Data”, uncheck everything except “Cached Images and files” and hit the “Clear Browsing Data” button to complete the operation.

    5. Internet Explorer (PC/Linux only)

    Click the gear icon in the top right of the window, and select Safety > Delete Browsing History… (Ctrl+Shift+Del). In the resultant window uncheck everything except “Temporary Internet files and website files”, then hit “Delete”.

    N.B. If you use Internet Explorer and really want to make sure you are having a true and optimised web experience most developers (myself included) will tell you that the best thing you can do is download Firefox or Chrome and use that instead.

    6. iOS (Apple phones)

    The iOS browser is a version of Safari, and its settings are accessed from within the iPhone’s Settings app, rather than within Safari itself. The pathway is as follows:

    Settings > Safari > Clear History and Website Data

    After doing this, return to the Safari app and refresh the page once again using the ⟳ button in the address bar.

    7. Android (most other smartphones)

    There are many variables in this area due to the number of device models and browsers available. A quick search should reveal any more specific information than is given in the main points below. Type in “clear browser cache on [my phone make and model]”.

    • Android browser: Launch your browser, and go to Menu > More > Settings or Menu > Settings > Privacy & Security. Tap “Clear Cache”.
    • Chrome: Launch Chrome, and go to Menu > Settings > Privacy. From here tap “Clear Browsing Data” at the bottom of the screen, uncheck everything except “Cache” and tap “Clear”.

    After doing this, return to the browser and refresh the page once again.

     

    *Key sources: Wikipedia: Bypassing Your Cache, Refresh Your Cache.

  • [ N.B. This series of posts is intended as a resource for my development clients who are using WordPress sites which I have created for them. Much of the content is applicable to any wordpress.org site but some of it may reference specific functionalities or plugins which I have written or installed and set up. Where third party code is used or referred to I try to give the appropriate credit. Please contact me for further or more specific information. ]