Tag Archives | 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!

Responsive Themes on the Commons

What’s a Responsive Theme?

Responsive themes use fluid layouts, flexible images and media queries to make your site look and act great on a variety of devices.  Sidebars and navigation menus collapse gracefully, and retain functionality.  Approach designs vary, and you should check out how each theme handles display when real estate becomes narrow.  Many themes provide live demos that show how a site would look if the width was very narrow.  On a desktop, you can experiment by narrowing the browser window for these themes to see how they respond.

See more about Responsive Design.

oxygen

What Responsive Themes are Available on the Common?

To find all our responsive themes, go to Appearances >> Themes on your blog dashboard and search our installed themes for “responsive.”  Here are some options:

  • Twenty Twelve is the old default theme released with WordPress 3.5.  Minimalistic, easy to use, this theme is a great basis for a child theme. Few bells and whistles, but a solid, attractive theme.  Check out demo.
  • Twenty Thirteen is the new default theme released with WordPress 3.6.
  • Oxygen is also written by Automattic, provides a sleek, magazine look to your site.  Check out its live demo.
  • Clean is a premium theme by Theme Trust.  As advertised, it is “extremely stylish theme that looks amazing across multiple devices and screen resolutions. This versatile theme can be used as a blog or a portfolio to show off your work. It features infinite scrolling and a touch swipe slideshow.”  Check out its Live Demo.
  • Luna is a premium theme by ThemeForest and lets provides two homepage types – blog or portfolio.  It’s a neat theme with lots of configurations.  Check out its Live Demo.
  • Presswork is a free WordPress theme and has an array of features, including some drag and drop admin design functionality.  It’s a beautiful theme (it’s actually a framework), but sadly the authors have decided not to support it any more, which could prove problematic.
  • Simplex is a minimalistic WordPress theme that provides great responsive design.

I’m sure that we’ll be adding more responsive themes. Stay tuned!

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!

Random Headers and Showcases with the Twenty Eleven Theme

The Twenty Eleven theme is the default theme for WordPress 3.3 and builds on all the great stuff included in its younger sibling, Twenty Ten. Twenty Ten is extremely popular on the Commons, while Twenty Eleven is largely under-used and under-appreciated. Take a look at how you can customize the home page, and see what you think.

Header Images

As in Twenty-Ten, users can use the “Featured Image” function to attach an image to a page or post, and if it is large enough (1000 x 288, or bigger), the theme will automatically use it for the header image. This is really nice for creating distinctive and unique content. But Twenty-Eleven also allows you to load up a bunch of header images and display them randomly or sequentially for pages with no attached feature image. The header image will change on these pages each time the page is refreshed. Go to Appearance>>Header on your dashboard to control these configurations, and add header images.

Showcases

Twenty Eleven lets you customize a homepage that display any number of “Featured” posts. These posts are displayed one at a time, and your readers can cycle through them by clicking a radio button above the content. The featured posts can be all text, all image, or a combination of the two.

To implement a showcase in Twenty Eleven, follow these four easy steps:

Step One – Create a Showcase page

In your WordPress dashboard, go to Pages>>Add New. Provide a name for your page – this could be anything – but to remember what you are doing, maybe call it “Showcase”. Then scroll down to the “Page Attributes” section, where you find the available page templates. Select “Showcase.”

Step Two – Make Your Showcase page your site’s Home page

In your dashboard menu, go to Settings>>Reading. There you will find a section that controls what your front or “Home” page displays when first opened. You want your showcase to be your Home page, so select “A static page” and from the dropdown, select your showcase page (from Step One).

Step Three – Make your Featured Posts “Sticky”

Identify which posts you want to appear in your Showcase. Go to your dashboard and edit each of these posts and mark them as “sticky.” You will be able to do this by finding the “Publish” section. Where you see “Visibility: Public” click on “Edit”. This will open up the visibility options. You want the post to be “Public” and you want to check the box that will stick this post to the front page. (You can toggle the “Sticky” box on and off to control which posts you want to feature.)

Step Four – Attach Featured Images (optional)

You have now created a showcase, and if you just want you featured posts to appear as simple text, your job is done:

But if you attach a featured image to one of your featured posts, Twenty Eleven will dramatically change the way you showcase appears. You have two options: (1) have one large image (1000 x 288 or bigger) in the showcase, over-layed with the title of the post; or (2) a portion of text and a smaller image, flushed to the right. Both are clickable and will take the reader to the post page.

Screenshot of option (large featured post):

Screenshot of option two (smaller feature post – text and image):

So now the Home page has (from top to bottom) a Title, a header image, and a showcase that displays three featured posts, each differently. Below all this is a section for “Recent Posts” and a showcase sidebar, that you may configure in the Appearance>>Widgets section. It is called the “Showcase sidebar” and is only displayed on the showcase page.

Creative Commons License

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