Max (width)
<div class="max">
Goes full-width for up to full-width images (or anything else).
On everything except mobiles, which with 'Works Unit' always have 20px side paddings by design.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
White background for illustrative purposes only.
</div>
Installing the theme
- Install WordPress in the usual way: database, wp-config.php etc, then login.
- In Settings / General Settings / Site Title enter the title of the website. It will be the text shown at the top left of the website on larger screens and at the top on mobiles etc. Don't make it too long or it won't fit across a mobile screen without a line break.
- In 'Appearance' select and activate the theme 'Works Unit'.
- Create a new Page named "Home" (or whatever you want the heading of the home page to be) with the slug 'home' then go to Settings / Reading Settings and check "homepage displays a static page" selecting 'Homepage' as whatever you titled the home page as. To see 'slug' edit 'Screen Options'.
- Create a new Page named "Archive" with the 'slug' "archive".
- Install and activate plugins Akismet Anti-spam, Classic Editor, UpdraftPlus, WP-Optimize, Contact Form 7 and Remove Meta Generators.
- Install and activate my plugin 'Corrections'.
- In 'Users' select "Disable the visual editor when writing" and disable "Show toolbar when viewing site."
- Set permalinks in Settings / Permalink Settings / Permalink structure as 'Custom Structure' /%category%/%postname%.
- Create and write a 'Thank You' page with the slug 'thank-you' to thank visitors for comments if they leave any.
- In Appearance / Menus / Menu structure put 'Footer Menu' in 'Menu Name' and save menu with the Front Page and 'archive' page.
- Create a contact page if required, using the Contact Form 7 plugin.
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.
Wide image
1024 pixels wide
Gallery
Theme functions
WordPress themes contain a file named functions.php to add features and functionality to the site. The 'Works Unit' functions file does the following:
- Removes actions that add unwanted elements in the document <head>.
- Simplifies the <title> in the document <head> to match the written heading.
- Removes the text "Private:" from the title and heading of private pages.
- Removes the text "Protected:" from the title and heading of password-protected pages.
- Registers a footer menu named 'Footer Menu'.
- Directs submitted comments to a 'Thank You' page that has to be created when the theme is installed.
- Discourages archives to be indexed by search engines.
- Edits the password form for password-protected pages.
- Removes the comment author link to discourage spam comments.
- Excludes categories from site search.
- Removes /category/ base from category link path.
- Adds widget 'area one' to footer.
Additional styles
White box with drop shadow. Inside width 640px or 964px depending on template used.
<div class="bg">
White box with drop shadow.
</div>
600 pixel wide with smaller text on desktop computers and laptops with wider screens. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="w600"><div class="col">
class="w600" narrows the column to 600 pixels, or use class="w640" for 640 pixels or "w700" for 700 pixels.
</div></div>
Style sheet breakpoints
For pages that respond to different screen widths
A 'breakpoint' is a width defined in a style sheet at which the page behaves differently than when it was wider or narrower (as the case may be). This is so the page design 'degrades gracefully' by collapsing or expanding when a user moves from wide to narrower or narrow to wider. Breakpoints cover the whole range of screen widths, from a large desktop screen to a small mobile phone screen, the main issues being readability and no horizontal scrollbars at any width.
The principle of 'cascading style sheets' (CSS) is to put all the main styles in a separate .css document that informs the HTML 'body' of a page how to behave. Style rules can also be put in the invisible HTML 'head' and 'inline' styles can be put in the HTML of the visible page. That's the cascade: style sheet » document head » inline in the HTML.
Basic structure
A <div> is HTML for a block of content. Works Unit has three 'principal' blocks: header, main and footer. The block 'main' has two IDs: #content 700 pixels wide and #wide 1024 pixels wide. The two 'parent' blocks (or <div>) can contain other 'child' blocks but those are constrained by whichever 'parent' block they are in. The child blocks become parents to other child blocks, and so on.
Breakpoints
The Works Unit theme has the following breakpoints:
Over 1101px wide: main#content and main#wide centred at 700px and 1024px respectively, main#full-width 100% width, header 100% width not centred, footer centred with no width specified.
Breakpoint 1 max-width: 1101px: main#wide (1024px) centred with width auto and 30px side margins.
Breakpoint 2 max-width: 777px: main#content (700px) and main#wide (1024px) centered with width auto and 20px side margins. Nothing at less than 777px wide has a fixed with.
Breakpoint 3 max-width: 600px: centres the header.
Breakpoint 4 max-width: 480px: is essentially as guess at mobile portrait and continues to alter text sizes etc.
max-width means anything less than or equal to the specified dimension.
The breakpoints are set to suit the column width + side margins + scrollbar. For a 700 pixel wide column the breakpoint is 700 + 30 + 30 + 17 = 777 pixels. For a screen width below the breakpoint the side margins reduce to 20 pixels and the column and its content shrink with it. Similarly for a 1024 pixel wide column the breakpoint is 1024 + 30 + 30 + 17 = 1101 pixels.
The style sheets also use the same breakpoints as, eg:
Breakpoint 3 min-width: 601px for style rules that apply to any screen width over 600 pixels.
Just over a third of the visits to my websites are on a screen 1920 pixels wide and the rest on a screen width of 1152 pixels or less, right down to mobile phones.
Slide show
The markup
<div class="slideshow-container" style="max-width: 700px;"> <div class="mySlides fade"> <div><img src="img/cms-boat-slide-01.jpg" width="700" height="530" alt=""></div> <p>Caption (1)</p> </div> <div class="mySlides fade"> <div><img src="img/cms-boat-slide-02.jpg" width="700" height="530" alt=""></div> <p>Caption (2)</p> </div> <div class="mySlides fade"> <div><img src="img/cms-boat-slide-03.jpg" width="700" height="530" alt=""></div> <p>Caption (3)</p> </div> <div><a class="prev" onclick="plusSlides(-1)">❮</a></div> <div><a class="next" onclick="plusSlides(1)">❯</a></div> </div> <div class="dotcontainer"> <div class="bullets"> <span class="dot" onclick="currentSlide(1)"></span><span class="dot" onclick="currentSlide(2)"></span><span class="dot" onclick="currentSlide(3)"></span> </div> </div>
Modal image
Click picture to enlarge
Native image width: 1024px
The markup
<div class="relative" style="max-width: 700px;"> <p class="enlarge">Click picture to enlarge</p> <img src="img/filename.jpg" style="width: 100%; max-width: 700px;" alt="Caption" class="modal-target"> </div> <p class="caption">Caption</p> <div id="modal" class="modal"> <div id="modal-close" class="modal-close">×</div> <div><img src="#" alt="" id="modal-content" class="modal-content" style="width: 100%; max-width: 1200px;"></div> <div id="modal-caption" class="modal-caption" style="width: 80%; max-width: 640px;"></div> </div>
