The only place I ever saw Highlights for Children magazine was at my dentist office, a short distraction while waiting for the drilling and fat fingers of weird old Dr Cooper.
The tagline of the magazine was “Fun With a Purpose”.
But no connection here, except the name, it’s a brand new WordPress theme I just hoisted onto GitHub.
Not yet blogged (it shall happen) just uploaded first release of a new WordPress calling card theme based on an HTML5 Up one.
Check out WP-Highlights https://t.co/vxWC6li77o
— Alan Levine (@cogdog) January 27, 2018
This is another theme I have built upon the solid foundation of a Creative Commons licensed template from HTML5 Up called Highlights “A Fun Little {Responsive} Single Pager.”
The content on this one is rather narrow, yet spoke to me as a nice simple calling card, top of the domain type design. The nifty hook is, when you look at the demo, as you scroll down, the background image subtly changes to match the content.
This joins my previous conversions of these well built HTML static themes to WordPress, WP-Dimension and WP-Big Picture.
You can find a working demo at http://lab.cogdogblog.com/highlights/
This one is close to WP-Big Picture which I used as a starting point. I use Posts to represent the front page sections, and the featured image becomes the one in the background as the front page is scrolled.
That stumped me a while until I picked through the code, there is an image inserted into the HTML, and the scroll action triggers a jQuery function to bring the image in. So in the original HTML, it does not look like anything special:
Stuff I do
Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet vulputate.
In narrow mobile screens, the image moves to be inserted inline, so there is some
mediaelements in CSS controlling how the image is used. I actually could not exactly figure out the Javascript, so I just experimented with the template to insert the featured image in the same place:And it worked.
What my WordPress version does is a a bit more than you get in the HTML one; that one has three sections wired into the front page, you can add more, and re-arrange, by some not too terribly complex HTML copy/paste/editing.
But in the WordPress version, you just create posts for the front (I have allowed up to 10 sections, an arbitrary limit easily changed), and the order is controlled by using the Post Order metabox in the editor (added in my theme).
And it’s even easier to do via the dashboard Quick Edit, and the listing of Posts includes the order:
Using the Quick Edit to modify the post order
I also have it designed to use the WordPress
Read Morecode, if you have longer content where you want just the opening on the front. Simply inserting theRead Morething into a post, you define where that split occurs, it then automatically adds the button on the front, and when clicked from there, it jumps to the content that follows.And I also have a Page template, because there might be other stand alone content you do not want on the front page, but perhaps to link to.
I have some Customizer controls to edit the top title and the sub title (different from the blog title and tagline, I use that in the footer), and, with the Font Awesome 4 Menus plugin, you can add a menu of social icon links to the footer.
The Customizer Header Image control creates the background image used at the top of the site (the demo site uses a set that are randomly loaded all set up in the Customizer), and the top of all single post and page views, where the image switches, like on the front, when you scroll down to the content.
Finally, I added to these theme, and the others, a 404 Not Found template, which offers links to posts, pages, etc.
Enough describing, check out the demo including
- Single Post with Read More split on the content.
- A Page that is not part of the front content.
- What happens for a URL not found
This is a first release, and it’s likely I missed something or there might be funky CSS issues. Try it out and if you have suggestions, bugs, swiss bank account numbers, let me know in the GitHub Issues.
It’s pretty easy to leverage off of the ones I have built, and let me know if there is another one at HTML5 Up worth WordPress-ifying.
This was certainly “Fun With a Purpose” to make. I may have spent more time than worth mocking up the fake cover:
The full cover of an old magazine I appropriated just for this blog post
Featured Image: A photoshopped version of a magazine cover of a September 1986 issue of Highlights magazine, found in Reddit, not really licensed. Sometimes, well, oh heck, I really needed an image to remix. Send in the lawyers.
