WordPress ‘Single’ theme

The ‘Single‘ WordPress theme used on this website is a very simple single-column theme. It’s structured with only four main divs: #header, #content and #footer all contained in a #wrap div. There is no sidebar. Navigation is primarily through an archive page which is essentially a site map.


Installation

Install WordPress then upload the ‘one’ theme folder into the /wp-content/themes/ folder and activate it.

Add a new WordPress page then in ‘Settings / Reading’ make the homepage a static page, selecting the page you just created.

In ‘Settings / Permalink Settings’ choose ‘Custom Structure’ as /%postname% then Save Changes.

Add a new WordPress page titled Archive with ‘Page Attributes / Template’ as Category Archives.

Add a new WordPress page titled Thank you. After someone submits a comment they are redirected to this page.

By default the [ archive ] link at the top of the page shows a list WordPress Posts marked as ‘Uncategorised’ but this can be changed by editing the theme file category-archives.php with any number of extra lists with ‘category_name’ => ‘yourcategoryname’. When adding a new category in WordPress admin make sure to add a slug that matches the category name but with a dash between each word.

In ‘Appearance / Menus / Menu Settings’ check ‘Display location’ as ‘Footer Menu’ then add things to the menu. Save Menu.

In ‘Users / All Users /’ select users and in ‘Profile’ uncheck ‘Show Toolbar when viewing site’ then update the profile.

The Contact Form 7 WordPress plugin can be used to create a contact page (combined with the Contact Form 7 Honeypot plugin if the Akismet anti-spam plugin is not used). It’s better not to title the contact page as contact — choose a different title.

The theme should now be up and running.


Adding images to Posts and Pages

CSS classes dictate how images are displayed:

There are two maximum widths depending on which Post / Page template is used: 700 pixels and 1024 pixels. The borders are 30 pixels adding 60 pixels horizontally. A 640 pixel wide image with borders will fit in the default templates’ 700 pixel column width. A 1024 wide image with class=”centrenoborder” will fit in the wider templates with the correct spacing above and below it.


Layout

The pages are ‘responsive’ and adjust to different devices and screen sizes: desktops, tablets, mobiles etc. The ‘breakpoints’ — the screen sizes triggering the adjustments — are calculated not just according to screen size but also the width of the various elements of the pages themselves. The breakpoints are:

Generally the pages will be in the same mode on tablets and most mobiles regardless of whether they are in portrait or landscape mode. On desktop computers with a screen width of over 1366 pixels (everything over breakpoint 1) the content goes left with any blank space to the right of it.

Most of the work maintaining the theme in the future should be limited to reviewing the breakpoints as devices change and altering the style sheet to suit. The simplicity of the theme structure will make this easier, especially without a sidebar to deal with.

CSS main box layout

The default body element has left and right padding of 30px. When the screen width is less than 777 pixels the padding reduces to 20px.

When the screen width is 1104 pixels or less, the #wide content div (option) and all its contents no longer have a fixed width. The same applies to the normal #content div when the screen width is less than 777 pixels.

The #header div is positioned ‘absolutely’ at the top left regardless of anything else.

The #wrap div actually does nothing except contain the other three mains divs: #header, #content (or #wide), and #footer. It’s there in case a wrapper is ever needed in the future.


Additional styles

The theme contains an additional style sheet style-extra.css which is empty by default but can be used to edit particular styles in the main style sheet style.css. The extra style sheet is read by browsers after the main style sheet to allow default styles to be changed. Bear in mind that browsers will first read the default styles then the altered ones — reading them twice — so extra styles should be used sparingly, for example to change the header background colour or something else of a minor nature.