Tag Archives | responsive themes

Getting Started with Twenty Fourteen

t14 slider

When first installed, Twenty Fourteen doesn’t look much like what you anticipate from its pictures.  Here are some quick steps to make it to shine:

Accessing the Settings

t14 customizeOnce you’ve activated Twenty Fourteen, go to your dashboard, to Appearance>>Customize.  Click on Customize (circled in red) to access the theme’s settings.  You should see a panel like the snapshot pictured below.t14 panel

All the the theme’s configuration settings are found here.  You can set your site title and tagline and instantly see a preview of what it will look like.  Likewise with the background color, the title font color, and the background image, should you add one.

Be sure to click on “Save & Publish” if you are happy with the way your changes look.

Navigation

The Navigation settings are very similar to what you find on your dashboard.  But here you can preview changes before saving them.  You’ll still need to set up your menus in Appearance>>Menus.  The theme provides two menus and you control where (and if) they are displayed.

Static Front Page

This setting probably looks familar to you if you’ve gone to the Settings>>Reading in the dashboard.  But here you can use it to preview how such a change would affect you site’s home page.  Basically, you decide here if you want your home page to display a number of your latest blog posts, or if you want it to display a static front page.t14 featuredContent

Featured Content

This is where you control what the featured area on you home page looks like.  It could be totally non-existent, or a grid of boxes, or a slider.  It will display your latest blog posts if they are tagged to be shown.  The default tag –  “featured” –  can be changed to whatever tag you want.  You can change your home page’s entire featured content area by just changing the tag name, and by deciding whether to display a slider, or a grid.

Featured Images

featured imageThe theme relies heavily on featured images.  The boxes in the grid will display the featured images of each post along with the post title, tags and other links.  The slider will display your post’s featured images as well.   Slider images need to be big, or else you might see a black area on the right (depending on device and monitor size).  If you are using a full width page template to display your slider, the featured image’s width needs to be at least 1200px to look good on desktops.  If you are using a template that also shows a sidebar, the width should be at least 1000px.  Slider images scale down, but do not scale up.  This might make transitioning from previous themes difficult.

If you choose to display your featured content in a grid, featured images can be smaller, but you still probably want them large enough to span the width of your page or post (at least 640px), when your readers click to see the actual content.  (You can also experiment with different post formats to see how they display the featured image.)

You can set the featured image on both a page and a post.  They display quite differently on different devices.

Dynamic Magazine Functionality

Twenty Fourteen offers a lot, but you can customize it further by changing its CSS or by creating a child theme (contact the Commons Help if you elect to go this route).

Some drawbacks – the slider does not animate, and you have to manually advance it.  Some studies suggest this is a better user experience.  (If you make a child theme, here is a way to make it animate.)  There is no easy way to change color scheme.  If you like the black background, you are in luck – if not, polish up on your CSS skills.

Hope you have fun with this theme!

Twenty Twelve

The folks at Automattic release an annual default theme for WordPress designed to be both a great theme on its own, and provide a solid, well-organized, and compatible basis for spawning “child” themes.  You can read more about Twenty Twelve at its page over at WordPress.com, but here are some highlights:

It’s Responsive!

Twenty Twelve is designed to look great on all devices. When viewed on a smart phone, the layout collapses nicely and a menu button replaces the navigation bar. You can scroll up and down the page and not miss anything to the right or left. (Read more about Responsive Design.)

It’s Simple and Minimalistic

The theme does not have a lot of bells and whistles. It has just one sidebar, three page templates, and not a lot of default widgets. It doesn’t have a slider or all the fancy stuff some of our magazine themes have.

It’s Elegant

With its Open Sans typeface, your content is easy to read and looks great. Twenty Twelve provides a beautiful “Front Page Template” that puts you in control of your site’s home page. The area at the top is free-form – add a full width image, or an image and some explanatory text, or an embedded video, or whatever you want. Below the free form area are two columns that are ready for any widget from the theme or any of your plugins. For more information on how to set up your front page and a blog page, see these instructions.

Header Considerations

Unlike Twenty Ten and Twenty Eleven, the header image (if you choose to have one) appears below the navigation. You can probably do some fancy CSS to replace your blog title and tagline with a logo image above the navigation, or create a child theme with a differently formatted header if needed. (Read more about Child Themes.)

Other Considerations

The bylines on individual post pages don’t appear under the post title and can’t be changed except by creating a child theme (or I suppose, by finding a byline plugin). This might be an issue, especially if your site has content written by multiple users.

In time, I expect there will be some child themes of Twenty Twelve available on the Commons that address some of these considerations. Stay tuned!

Creative Commons License

css.php
Need help with the Commons? Visit our
help page
Send us a message
Skip to toolbar