WordPress ‘Single’ theme
The ‘Single‘ WordPress theme used on this website is a very simple single-column theme. It’s structured with only three main divs: #header, #main and #footer. The #main column is either 700 pixels wide (standard) or 1024 pixels wide, depending on template selected when creating a page. There is no sidebar. Navigation is primarily through an archive page which is essentially a site map.
Install WordPress then upload the ‘single’ 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.
A footer menu is initiated in functions.php and footer.php. Activate it in admin via ‘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 exactly as it is on this website.
Adding images to Posts and Pages
CSS classes dictate how images are displayed:
- class=”border” adds a 30 pixel border.
- class=”left” floats the image left with text flowing round it.
- class=”centreborder” centralises the image and adds a 30 pixel border.
- class=”centrenoborder” centralises the image without a border.
- class=”border left” adds the border and floats it left.
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 (with a border, the maximum image width is 964 pixels).
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:
- 1. 1440px (#main .wide centred less than 1441)
- 2. 1367px (#main .content lefted above 1366)
- 3. 1104px (auto #main .wide div on tablets)
- 4. 760px (#main .content centred, auto images)
- 5. 600px (floated div on mobiles and centres #header)
- 6. 480px (mobiles portrait mode)
CSS main box layout
The default body element has left and right padding of 30px. When the screen width is less than 761 pixels the padding reduces to 20px.
When the screen width is 1104 pixels or less, the #main .wide div (option) and all its contents no longer have a fixed width. The same applies to the normal #main .content div when the screen width is less than 761 pixels.
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.
More about it here »