Note: I have displayed just about all of the layout possibilities for you to see in this Child Theme, you can add or subtract as you see fit to create your own look depending on your needs, you can see a working version of this Child Theme at Accessibility News.
I have also removed the HTML 5 Section Elements from the site because of the problem they cause with Heading structure, you can read about it in this article JAWS, IE and Headings in HTML5 and because of all the extra chatter they cause when using a screen reader every day, after a while it just amounts to noise.
The list below is ordered as the Site appears to a screen reader, I wasn’t happy with the way the Right Sidebar was presented before the Left one but fixing it proved to be a lot of work, accessing it quickly can be accomplished with the Skip Link at the top of the page.
This is also based on using the Blog as the Home Page rather than a Static Page.
- Custom Header
- Content Area
- Right Sidebar
- Left Sidebar
- Custom Footer
Note: You can also find more instructions on the Badeyes Theme Options Page in the Admin area, especially for screen reader users.
Skip and Colour Changes Links
There is a list of “Skip Links” and “Colour Option” visible at the top of every page, the opposite colour choice will be the only one available.
If any of the Menus described below are implemented then a corresponding skip link to that menu will appear in this section, if not then it will not show up.
Depending on your menu(s) structure you may find you need to change the link text for the Left Hand Menu, this can be done in the Badeyes Theme Options page in the Dashboard.
Logo/Image, Title, Tagline and Menus
The below options are in the following order and can be used in any combination you see fit but know that you can not move them up or down without going into the code and rearranging them manually which can also be done in the header.php file.
- Header Logo/Image
- Page Title
- Custom Widget
- Primary horizontal menu
If you decide to go with a Logo/Image in this section then when you initially upload the image in the Header section you will not be able to crop the image it has to be an exact size, you can however crop in it in your Media library if you can see.
Note: I have found that if you upload your image using the “Customize” area for adding an image you will not be able to give it any Alt text.
Title and Tagline
If you want to use any combination of Title or Tagline it will appear after the Logo/Image area if you have used it as part of your Header layout.
Unfortunately if you choose not to use the Title or Tagline it strips it out of the Home Page Title, using the options in the Customize and Header pages do not work, obviously a 2014 Parent bug.
In order to get around this you’ll need to use a Plugin like All in One SEO or WordPress SEO by Yoast
which you should use anyway as it is good for Search Engine Optimization(SEO) and Accessibility.
This section comes with 2 possible menu structures, one is a simple horizontal menu the other is created using “Custom Menu” widgets and is aligned in columns, in this case 5 columns, the first being a Logo and the next 4 with 5 vertical links in each.
Keep in mind that using more than 5 columns will break the layout as will too long a link name so design wisely.
Note: I have used the same Custom Menu for simplicity’s sake, you can create the others in the Menus section as you need them.
You can add Intro Text at the top of the Blog, Single Post and Pages by going to the Badeyes Theme Options page in the dashboard.
I’ve changed the default Thumbnail setting from 672 x 372 to 300 x 300 because I found it fit best when using a Featured Image with the Post.
I have also added the ability to change the number of posts in this area, you need to specify how many in the Customize page first, I have used 3 as it appears to look best visually when using an image with the post. Using multiples of 3 look best as far as I am aware.
Currently I dont recommend the Slider because it isn’t accessible to my screen reader if anyone has a better option let me know.
Note: If you dont have any items for this area then it will not be visible.
I’ve removed the Post Formats such as “Asides, Quotes, Gallery..” from the Blog section because I found them confusing if they didn’t have a heading and found adding a Heading a waste of time.
Note: If you want to change the heading text “Featured Content” and “Latest Headlines” you can do this in the Badeyes Theme Options page.
Right Hand Sidebar
Only Screen Reader users will notice the heading text “Right Hand Sidebar in this section and if you dont have any Widgets activated it will be empty.
Putting the “Twenty Fourteen Ephemera” Widget in this Sidebar worked best for my development of this Theme but you can make your own choices, see below about using them in the Left Hand Sidebar though.
Left Hand Sidebar
Note: As above the heading text “Left Hand Sidebar” will only be available to screen readers.
At the beginning of this Sidebar is the Secondary Menu option.
You can use it as your sub Menu or if you dont want to have navigation in your Header then it can be your Main Navigation, just specify them in your “Manage Menus” section on the backend.
Note: If you want to change the Heading text from “Side Menu” for the above menu you can do so again in the Badeyes Theme Options page area.
You can also add “Custom Menus” in this area or use any of the available Widgets.
I found during development that using the “Twenty Fourteen Ephemera” Widget in this Sidebar didn’t work/look so well so unless you can see it for yourself then avoid putting them here.
I removed the default Footer because I didn’t like the way it floated Widgets and trying to fix it in the css proved to be a tad daunting so I created a simple Custom Footer instead, as Widgets are added they start by floating from the center out instead of from the left hand side.
Badeyes Theme Options Page
I created an Options page where you can change the following items:
- If you know how to write CSS you can rewrite the classes you want, just add the new values
- Add intro text at the top of the Blog, Single Post and Pages
- Change the Heading text in the “Featured Content”, “Blog” and “Side Menu”, if you dont want to use any just leave them blank, you can also change the skip link text at the top for the page for the side menu
- Edit the CopyRight notice at the bottom of the site, you can add your own text before the current year
- Add or remove credit to Badeyes Design & Consulting
- You will also find more instructions on other aspects of the site, especially if you are a screen reader user
I’d like to thank all of those people on the WordPress LinkedIn groups who helped me with this project and for all those around the Internet whose Tutorials and code snippets I used to get it working the way I wanted.
If you want to have your name here in lights and you are any of those people let me know and I’ll add them below.
- How to create a WordPress Theme Options Page, it was the basis of this tutorial that I created my own Options page, many thanks!