A new theme I’m working on for city government has an interesting navigation feature. On the home page there’s an (optional) prominent menu that links to important sections of the website.
For each menu item, the user can select a font icon to use (from FontAwesome) by adding a css class. Here’s what the menu looks like with icons:
Full screen background images are a nice feature for a number of WordPress themes. It’s also one of the few theme modifications that can be handled well through a plugin.
The implementations I’ve seen generally use the jQuery script backstretch.js– which handles responsive layouts and large images elegantly.
If you’re not a theme developer and just want to add a full screen background to your site, I’d suggest trying out one of these plugins:
If you are a developer and want learn how to add this feature to a theme, read on.
Continue reading
Images are generally the heaviest assets on a webpage- so if you’re interested in fast load times for users, this is one of the best places to optimize.
One popular technique for speeding up the initial load time is called “lazy loading”. It works by replacing the source of images (src=”/example.gif”) with a transparent placeholder image (src=”/pixel.gif”). This allows everything else on the page (text,fonts,scripts,etc) to render first. Continue reading
I experimented with CSS preprocessing today (both LESS and SASS). I have to admit, it was much easier to set up than I thought and really intuitive to use.
To get started, I just downloaded a copy of CodeKit (OSX) and dropped a couple theme directories into it. When that happened, CodeKit started to watch all the LESS and SASS files in those directories- and automatically compiled them into actual CSS files whenever I saved.
To become more familiar with the syntax, I forked a copy of Jared Erickson’s LESS theme on GitHub and made some edits. Then I converted it to SASS syntax. If you’re completely new both SASS and LESS- I think that’s a fun small project to do. Continue reading
In Portfolio+ I use a custom post type for portfolio items and a custom taxonomy for portfolio categories. When someone views a portfolio archive page all of the portfolio featured images are displayed, and when someone goes to a portfolio category all the featured images of posts in that category are displayed.
But a common request I’ve had is for a template that displays all the portfolio categories with thumbnail images for each of the categories. This would allow someone to easily link to different sections of their overall portfolio (for instance, “Photography”, “Water Color”, “Sculpture”) rather than having them all show up in one jumble of the main portfolio archive template.
This gets a bit tricky because there is no easy way to associate an image with a taxonomy term (though Michael Field’s Taxonomy Images Plugin has made it work).
I decided the best route would be to just display all of the categories, and use the featured image from the most recent post in each category. This obviously won’t be the perfect solution for everyone (some may want to use a completely different image for the category thumbnail), but for most users I think it works well and is a dynamic way to show off new work. Continue reading
I get a lot of questions in the WordPress forums about how to edit or change small parts of a theme’s design. If you use the Chrome developer tools (or something like Firebug for Firefox), it makes really easy to track down those styles and know what to change.
Here’s a quick video showing how it works:
One of the great new features in WordPress 3.4 is the Theme Customizer which allows you to modify options for a theme and instantly preview them on the site.
I’d encourage you to try out the Theme Customizer, but first upgrade to the latest version of the Options Framework (1.3). Earlier versions explicitly checked for $_POST[‘update’] in the request before saving anything to the database, which doesn’t allow options set via the Theme Customizer to save properly.
I kept having to hunt through wp-includes/class-wp-customize-manager.php to see what the default sections in the theme customizer were registered as.
To save you the trouble, here they are:
[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”3-6″ show_line_numbers=”0″]
[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”8-11″ show_line_numbers=”0″]
[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”18-22″ show_line_numbers=”0″]
[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”24-28″ show_line_numbers=”0″]
[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”30-35″ show_line_numbers=”0″]
[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”37-42″ show_line_numbers=”0″]
If you’re not sure how to add options to these default sections, give Otto’s post a read.
