The theme
The 'Works Unit' theme has two WordPress templates for Posts and Pages. They are both single-column with a fixed header at the top and a footer at the bottom. There is no 'sidebar'.
The header contains a few key navigation links. The default is the left hand link to the home page, a link to an archive page and a link to WordPress admin when logged in to WordPress. One or two extra navigation links can be added but it must be done manually by editing the header file header.php. Care must be taken not to extend the header links too far because as the screen is narrowed from full desktop towards tablet and mobile it must not fall onto two lines. It is best to add only one to the archive link, or two more at most depending on the length of the text.
The footer can contain any number of links but again it is best to limit the number to four or five at most.
Inasmuch as many websites contain a menu, the archive page serves this purpose by letting links to other Posts and Pages to be written in WordPress admin. The archive page can be renamed 'menu' but this requires a manual edit of header.php.
The main content column between the header and footer can be 700 pixels wide by selecting the default template or 1024 pixels wide by selecting the wider post or wider page template.
The default width of 700 pixels gives a readable column of text and accommodates an image file with a native width up to 700 pixels. 640 pixel wide images can be accommodated with a white border 30 pixels wide on each side (plus top and bottom). The wider width template accommodates an image file with a native width of 1024 pixels. It is generally recommended that the maximum standard webpage image widths on desktop would be between 1024 pixels and 1920 pixels. Any wider wastes bandwidth. 1920 pixels is a common width for a desktop computer screen but that includes the scrollbar so an image 1920 pixels wide would be slightly squashed so is a bit too wide. 1024 pixels is a good maximum width.
The theme contains a <div> classname 'max' that stetches the whole width of the screen excluding the scrollbar. This class can be used in either template to spread an image across the entire screen without triggering a horizontal scrollbar in any device at any width. The <div class="max"> can be used to spread anything across the entire screen but it is too wide for readable text.
The theme contains <div class="w700″>, <div class="w640″> and <div class="w600″> to contrain the column width to 700 pixels, 640 pixels or 600 pixels as required within the wider templates or <div class="max">.
Remember to add </div> at the bottom of all <div>s.
Images wider than the screen cause a horizontal scrollbar by default, always to be avoided. The theme however generally constrains images to the width of the element they are in but it depends on how they are specified in the page. <style = "width: 100%; max-width: 100%;"> often does the trick (depending on the circumstances).
The standard desktop text size can be reduced slightly with <div class="col">. On mobiles it has no effect. Again, remember to add </div> at the bottom.
Category: Theme Features
