Atomic Smash homepage splash

Things to remember when testing your theme

Words by Anthony HartnellSeptember 10, 2018

While running through the development testing phase it’s very easy to miss some of these edge cases. This tutorial highlights some simple fixes and checks you can make to ensure that your WordPress theme is fully tested, compliant and as bug-free as possible.

Is your theme accessible?

Developing for accessibility should be a part of your thinking process when developing but it can still be an on-going task even after a website is finished. You may find there are better ways of displaying your content or you found a plugin that lets people access your content in a different way. It’s really difficult to think about all the ways someone can use your website so that’s why it’s important to keep an open mind and read lots of articles about it. It’s quite easy to assume that everyone uses a mouse for example but that’s a false assumption. Think about the following:

Can people access your site using just the keyboard?

If you can use the TAB key to cycle over content that’s great, but have you thought about the header navigation or anywhere that uses a dropdown on hover? You might have set a header to reveal on hover but what about focus or focus-within?

Learn how to build a keyboard-accessible navigation bar with drop-down menus

Read more

Have you thought about device orientation?

Try resizing your browser or using the phone simulator mode on a modern browser to see what your site will look like at different screen dimensions. If you are using breakpoints, don’t forget to test the height of a screen too. Things can get really compact on a narrow height screen with a big menu and a slider for example.

Other ways you can check for accessibility:

  • Use headings correctly to organize the structure of your content.
  • Include proper alt text for images
  • Give your links unique and descriptive names
  • Design your forms for accessibility
  • Use tables for tabular data, not for layout
  • Use ARIA roles and landmarks (but only when necessary).
  • Make dynamic content accessible

Reference: https://webaccess.berkeley.edu/evaluating/self-assessment/tools

Test Wordwrap

Word wrap is often forgotten when testing a design as it’s not always obvious that a word could break out of the container unless you test with a huge amount of words. Copy and paste the following line into a text field or input:

Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloreLoremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloreLoremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloreLoremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloreLoremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdolore

You can fix this by adding the following property:

div {
    word-wrap: break-word;
}

Style the log-in page

It’s quite easy to forget to style the WordPress log-in page and it’s the first thing you’ll notice is wrong when you login and see the WordPress logo instead of your website logo. You can easily fix this by adding some CSS that only gets loaded and rendered on the login page. This needs to be enqueued using a WordPress hook called an action that is fired when the login page loads its scripts. In the code below, change the /path/to/ directory where you’ve stored your login stylesheet.

add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/path/to/login.css' );
}

I have written a tutorial about putting this in a plugin so you can use it as a utility. Here are all the styles you need to change the login form and there is a whole section of information on the WordPress Codex. Unfortunately, it’s written as CSS so if you’re using SASS and gulp it can feel a time consuming to copy your SASS styling across.

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Don’t forget login form errors…

Try logging in with no password and the password error form notification comes up as so:

Wordpress default error field

The colours and styling might look odd if you’ve got completely different branding to WordPress default colour scheme so add the following to code to the block above to add your own styles. The code below contains the default WordPress styling.

.login #login_error,.login .message,.login .success {
    border-left: 4px solid #00a0d2;
    padding: 12px;
    margin-left: 0;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1)
}

.login .success {
    border-left-color: #46b450
}

.login #login_error {
    border-left-color: #dc3232
}

Style the WordPress content editor

It’s very easy to forget to style the content editor as customizing this will possibly be the last job after all the styling and testing is completed. As with the login form, it’s a straightforward fix but you have to copy across all your text and colour styling to a CSS file.

Add the following code snippet to your theme:

add_action( 'admin_init', 'my_editor_styles' );
function my_editor_styles() {
    add_editor_style( get_stylesheet_directory_uri() . '/path/to/editor.css' );
}
body {}
a {}
a:visited {}
a:active {}
a:focus {}
h1, h2, h3, h4, h5, h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
cite {}
dfn {}
em {}
var {}
i {}
del {}
pre {}
strong {}
blockquote {}
blockquote:last-child {}
blockquote:before,
blockquote:after {}
blockquote:before {}
blockquote:after {}
blockquote cite {}
ul {}
ul li {}
ul li ul {}
ul li ul {}
ul li ul li {}
ol {}
ol li {}
ol li ol {}
ol li ol li {}

Final checks

Overload the navigation menu by adding nested navigation

Maybe your theme is only designed to have two levels of navigation and have short page links. Try and be the devil’s advocate and add a layout like this: It might reveal something as simple as text not wrapping properly.

Testing accessibility on the navigation

Test really wide images and really short images

You’re likely going to be using a few images in your theme so now’s a good time to check what happens if you upload different dimensions. You could try this in the WordPress gallery or in an image slider. Either your theme will display them at their intended size or will resize/crop them so that they appear correctly. Ideally, try using images with people in as it’ll be very clear when a photo is warped or a person is half visible.

WordPress have developed a test XML file called the Theme Unit Test. To get started:

  1. Clone the theme test data file themeunittestdata.wordpress.xml from the GitHub repository https://github.com/WPTRT/theme-unit-test (last updated 18/Apr/2017) Or Download a copy from https://raw.githubusercontent.com/WPTRT/theme-unit-test/master/themeunittestdata.wordpress.xml
  2. Import test data into your WordPress install by going to Tools => Import => WordPress
  3. Select the XML file from your computer
  4. Click on “Upload file and import”.
  5. Under “Import Attachments,” check the “Download and import file attachments” box and click submit.
    Note: you may have to repeat the Import step until you see “All Done” to obtain the full list of Posts and Media.

The full information can be found here: https://codex.wordpress.org/Theme_Unit_Test

Install Fakerpress plugin

Fakerpress is a great plugin that will create tons of dummy content in any way you’d like. The best thing is that you can delete it all in one click so you don’t have to worry about it messing up your content. It will inject images and categories too. Follow the steps at https://en-gb.wordpress.org/plugins/fakerpress/ to install.

Summary checklist

  • Test word break on really long words
  • Style the WordPress Login Form including any errors
  • Think about hover vs. click on touch-based devices
  • Adjust the screen dimensions and height to mimic how your site might look on narrow or thin screens
  • Ensure that you can use tab to visit links, navigation and hover elements
  • Style the WordPress Text Editor
  • Try hammering the theme with the WordPress Unit Test or plugins like Fakerpress
  • Try exceeding the specifics of your design where possible, e.g. if there are 3 carousel slides- add 13

If you follow these steps during development you will catch bugs and issues a lot earlier and it should help you to develop better code the next time around. I hope this article has triggered some things you might have forgotten but if you have any  more suggestions please add them in the comments below.

Profile picture of Anthony Hartnell

Anthony HartnellDeveloper

Anthony works in the development team and enjoys creating plugins and integrating maps, libraries and other APIs into Wordpress.

Go back to top

Keep up to date with Atomic news