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.

Woo Themes by Type

There are 62 Woo Themes available on the Commons, and this post breaks them down by type and provides a link to each theme’s documentation and a brief description:

  • Basic, Fully-Configurable Themes
    • Canvas Theme – great, minimalistic theme, and a great place to start.  Be sure to watch the four part screencast, made available by Woo.
  • Personal Blog Themes
    • Skeptical Theme – “very flexible in the sense that you can display “related posts” next to your latest posts on the home page, OR have a completely widgetized sidebar. Not only that, you can also add your Flickr stream to the footer region and showcase three noteworthy blog posts tagged with a specific tag that you declare in the theme options.”
    • Busy Bee – “a stylish design that will support large amounts of multimedia content. You can definitely use it for a magazine / news site or just for your personal blog, since the out-of-box features allows you to truly make this theme your own and adapt it to your content.”
    • Therapy – “powerful, feature-rich & flexible personal blog theme with Izuddin’s signature, vibrant and bubbly design style. This theme showcases your social media profiles neatly, whilst elegantly showcasing your latest blog posts.”
    • Typebased – “a free, personal blog design, with a very clean and elegant style. Along with the great design, we’ve also included all of the other Woo goodies in the backend i.e. custom widgets, integrated banner ad management, etc.”
    • Unite – “the perfect personal blog, or microblogging theme, for unifying all the conversation & interaction on your blog. Featuring a fancy pants & unique commenting system, Unite aims to increase reader interaction and make your blog more fun & more valuable.”
    • Open Air – “a magazine-style design or a stylish personal blog. The subtle use of gradients, borders and separating lines gives the theme a very polished and stylish feel, whilst the built-in video player is sure to be a hit for most users.”
    • Groovy blog – “part of the Groovy Series… another colourful, funky theme this time aimed at personal bloggers. The customizable home page showcases your blog posts in a neat tabber and your uploaded images in a js gallery component.”  17 color schemes
    • My Stream – “a flexible and extremely customizable personal blog theme with massive social media & lifestreaming influences. Change the background to your visual identity, move the many available widgets around and VOILA: you have YourStream.”
  • Magazine Themes
    • Headlines -“continues where our old magazine themes left off. It has tons of requested features like featured area, social bookmarks, author highlighting, flexible layout to name a few. It’s the perfect platform to launch your magazine or blog and reach out to the world!”
    • NewsPort” a stylish magazine theme aimed at those who want a more professional feel to their site. It includes a well laid out front page that showcases all your news with images, and also a cool category news feed on the side so that all content of your site gets to shine.”
    • Coda – “an elegant and feature-rich magazine template with a neat home page js scroller, and an otherwise completely widget based home page design. With a custom styled Twitter module, a “Share this” module and a “Like this” popularity-based post feature this theme will surely woo you.”
    • Continuum – “a Magazine theme which features a custom homepage, custom typography and some extra custom widgets, all to help your news/magazine website get a stylish and functional look.”
    • Spectrum – “a visually rich magazine theme for content rich sites showcasing their content with beautiful imagery. It’s packed with 7 widgetized regions and lots of custom woo widgets, like a video player, Flickr and Twitter streams, to customize huge amounts of the theme on the fly.”
    • Daily Edition – “a clean, spacious newspaper/magazine theme designed by Liam McKay. With loads of home page modules to enable/disable and a unique javascript-based featured scroller and video player the theme oozes sophistication.”
    • HeadLines – “continues where our old magazine themes left off. It has tons of requested features like featured area, social bookmarks, author highlighting, flexible layout to name a few. It’s the perfect platform to launch your magazine or blog and reach out to the world”
  • Portfolios
    • Caffeinated – “personal portfolio theme by Ryan Downie’s was originally designed for his own personal use – fueled by his passion for Coffee, Red Bull and lunchtime pot of noodles according to his Twitter stream. It’s perfect for anyone wanting a bold design to show off their work.”
    • Optimize – “builds on the popularity of Coffee Break theme, with stunning looks and super functionality built in to the brand spanking new WooFramework. The customizable front page will showcase your work or product in a sexy fashion. Impress visitors of your site with this optimized theme now!”
    • ProudFolio – “aimed at aspiring designers, developers, artists and photographers who’d like a framework theme which incorporates both a great-looking portfolio and a feature-rich blog. The best thing about this theme – is that you can manage your everything from one place!”
    • Fresh Folio – “the second in our portfolio based themes created to help you promote your skills on a clean, sophisticated design. With a Fresh News influence by default it boasts 7 other diverse styles to choose from.  We are confident you will be wooing new clients in no time.”
    • Mortar –  a “hugely flexible theme built on a neat JQuery layout plugin that arranges your posts vertically than horizontally with complete control over the number of columns on the home and archive page. Ideal for magazine, portfolio and gallery based websites.”
    • Geometric – “takes a structured approach to showcasing two rather non-structured things: blogs & design portfolios. The modifications made possible by the widgetized spaces however, takes all of the rigidness out of this template and enables you to be you…”
  • Musicians and Actors
    • Backstage – “is a powerful niche theme design for musicians and artists showcasing their media, upcoming shows and music using hugely flexible custom widgets and audio players. This beautifully crafted layout was designed by Elliot Jay Stocks and boasts 7 alternate styles.”

     

  • Business Themes
    • Apz – a theme to promote or sell your apps, either for iPhone or other platforms. This theme will show the features of your app in a featured slider, and also make it possible to promote it further via the modular homepage layout.
    • Boast – a modern business design with a lot of shine & gloss. The theme includes some nifty jQuery touches, which is especially present in the awesome slider on the homepage, as well as the scrolling widget boxes. This is a definite contender for your business makeover.
    • Coffee Break – “a professional theme built specifically to showcase your business, services or products. Heavily influenced by our recent WooThemes re-design, and packed with loads of options, you have complete control over what pages display on the home page.”
    • OverEasy – a minimalistically-elegant theme aimed at companies who’d like a serious, all-in-one online web presence. The homepage is perfectly suited for sales, whilst the inner pages & blog has been hand-crafted to publish important info efficiently and promote engagement through the blog.
    • Productum – “a business theme designed to help market your products or services. A custom home page making good use of prime real estate and a nifty image switcher that stylishly advertises your latest offerings, bundled with a feature rich theme options panel means you should be able to brand this theme to your liking with no hassle.”
    • Sealight – “a slick and colorful business theme that helps showcase your product/services using custom post types to highlight key features, testimonials and featured slides on the home page.”
    • The Station – “a super business theme with loads of different options for navigation spaces, widgetized sidebars and custom widgets. Everything has been designed for your user in mind and all of your most important content will stand out within this Station.”
    • VibrantCMS – “our first theme targeted at businesses. The design incorporates some recently popular usability trends (like the featured info scroller on the homepage), which should propell your business into the new online space, whilst creating a new market for your goods.”
    • Cushy – “a flexible and stylish business theme, perfectly suited to showcase your products and services, whilst showcasing your business to the world. Incorporating some nifty jQuery and an integrated blog, Cushy is a must for serious business owners.”
    • Delegate – “a shiny and feature-packed business theme that should appeal to the funky companies out there. Packed with all the goodness of a proper WordPress business theme, Delegate will most definitely make the impact you need from it!”
    • Feature Pitch – “a niche theme with one purpose: selling whatever you want to sell online (and thus making you money). The homepage sports a very functional design, which highlights all the great things about your products and / or services, whilst it’s a great experience reading more in-depth information on the inner pages. If you want to sell your stuff, then Feature Pitch is for you.”
    • Inspire – “a highly functional theme that has a custom homepage with a featured area powered by jQuery, and lovely mini-featured area. This along with the included portfolio page template makes it perfect to use for your business to show off your work or products.”
  • Photo Journal Themes
    • Aperture“a multi-functional photo-blogging theme with a unique home page, consisting of a latest posts slider, a visual category display, a blog module and lots of stylish widgetized spaces. With 12 alternate styles and a very visual archive system you should be able to house your photos/portfolio proudly in a theme that caters specifically for your needs.”
    • Exposure – a “revolutionary photo blogging theme with extreme control over image gallery displays in your posts and a completely widgetized home page with each blog post being a widget allowing them to be arranged however you please. One of those themes you just have to see to believe.”
    • Object – “a supremely flexible theme designed to publish your photos and videos perfectly. The design sports 1 – 5 column layout options, 15 amazing colour schemes and one of the sexiest jQuery image galleries you’ve seen in a WP theme.”
  • News Themes
    • FlashNews – “Flash News is a firm favorite amongst our users and it is easy to see why… Using a beautiful, clean rounded corner layout this theme incorporates all the best blogging features. And its unique colour scheme picker allows you to mix & match the colors until you are perfectly happy!”
    • FreshNews – “our most balanced theme to date and the ability to use a standard blogging layout has made it our most popular theme to date. It is ideal for everyday bloggers that would like to upgrade from a free WP theme and finally add some income potential to their blogs.”
    • Gotham News – “a clean and elegant news theme with a focus on creating a blank canvas with a strong structure to display your own personalized news; and broadcast it to the world. What more do you need from a news / magazine theme?”
    • Gazette Edition – “arguably our most sophisticated-looking theme to date, whilst the trendy featured scroller makes it very unique. The clean, white layout with professionally designed content areas are perfect for users that’d like to run a community newspaper website or a product showcase.”
    • Papercut – a grungy news theme with beautiful alternating stylesheets, built-in widgets, and layout control via a hand crafted theme options page. It’s the perfect out-of-the-box solution to give your website a stylish new look. Irrespective of your preferred style; Papercut will have one you like.
  • Organizations
    • Diarise – “showcases your company/organisation’s events in a neat home page tabber, along with past events, or featured posts in a slick scroller. Easily add events straight to your calendar application and link your events to booking forms. The possibilities are limitless for churches, event organizing companies, sports clubs, schools, etc.”
  • Travel Themes
    • Postcard Theme – “Postcard is a beautiful travel-blogging theme with neat Google Maps integration allowing you to geo-tag posts with locations and display your recent travels on widgetized maps. Its packed full of all the functionality a traveller needs to publish news and photos for friends and family back home.”
  • Tumblogs
    • Crisp = “all-new tumblog functionality with a quick publishing form on the dashboard Crisp is perfect for lazy bloggers who want a professional, slick looking site with Tumblr-like ease-of-use.”
    • Retreat – “packed full of easy to use quickpress publishing tools, unique to WooThemes. It also comes with a AJAX-based Twitter widget that updates every few minutes, and can track keywords mentioned on Twitter.”
    • Slanted – “a tumblog theme with an extremely unique – and should we say “slanted” – design. Using some progressive CSS3 attributes and jQuery wizardry, this tumblog theme (built for WordPress) is perfect for the more experimental tumbloggers.”
  • Video
    • WooTube – “a video player. Need we say more? Based on the same style that has made Busy Bee & Fresh News so popular, WooTube offers you some amazing multimedia goodness. Why not get cracking straight away… All you need is a camera, a nice smile and obviously this theme!”
    • Groovy Video – “a colourful, funky video blogging theme, which is sure to put you at the top of the pile. Video blogging (vlogging) is trendy right now (all the cool kids are doing it), so do get your groove on with this theme! Get it? Got it? Good!”

Woo Themes

Click here to see a list of premium WordPress themes now available on the Commons, a brief description, and links to specific documentation.

All Woo Themes use a common framework that may be confusing at first. This post centralizes various Woo Theme screen casts to make it easier to take advantage of these themes’ functionality.


Themes Options Panel:

Woo provides theme-specific controls on the dashboard.  Depending upon the choice of theme, there may be more or less options available.  The screenshot on the left shows how the general Theme Options Panel appears on the dashboard. In this particular case, the “Canvas” theme is activated.

The options most commonly used are “Theme Options,” “Sidebar Manager” and “Custom Navigation.” “SEO” stands for Search Engine Optimization, and it is used to configure how search engines index your blog. Again, Woo offers much granularity.  In “Framework Settings, ” you can import and export settings when switching between Woo themes.  You can also disable the “Buy Themes” option here, and change the look-and-feel of the Woo backend panels on your dashboard.

Woo Theme Screencasts

There are currently over 15 great screencasts created by Woo to guide users through the themes’ nuances.  Click here to go to the page with all the videos, or to continue to read further to find the video for you.

An Introduction to Theme Options

Clicking on “Theme Options” provides a way to control of how your blog appears. This video shows how to use the Theme Options panel.

Brief Tour of Woo Framework

Woo themes all have a common framework, and this video explains how it operates.

Working with the Sidebar Manager

All Woo themes uses the Sidebar Manager to control their widgetized areas (i.e. their sidebars and footers). You may specify how their widgetized area appear on specific pages and posts.    For more information, watch this video, courtesy of Woo Themes:

Setting up Widgets on a WooThemes website:

This video continues the discussion on how to configure sidebars and footers using installed and pre-installed widgets.

Getting Started with WooSEO:

The Woo Framework provide a common method to configure Search Engine Optimization across all their themes.  This video provides much useful information.

The Canvas Theme

This is a great theme, especially if you new to the Woo framework. The Canvas theme is minimal and clean, but totally configurable. The following 4 videos provide a good starting point for this theme, and all the other, more specific themes which Woo provides.

Canvas Theme – Part One

Canvas Theme – Part Two

Canvas Theme – Part Three

Canvas Theme – Part Four

Puzzling Questions

1.  It is easy to see that you can create a custom header image.  But how to replace keep your title from overlaying this new header?

Add the following to your custom.css

#logo .site-title, #logo .site-description {
display:none;
}

Good to Know “Woo” Terminology:

  • Tumblog

Some of Woo’s themes are Tumblog themes, meaning they have functionality that enables users to quick create articles,

  • Sliders

Some of Woo thems come with slider functionality.  This

WordPress Themes

Themes control the look and feel of your WordPress blog. They can be switched by clicking on “Appearance” tab on your admin dashboard. Thousands of themes have been developed for WordPress, and the Commons provides a couple hundred to choose from. Some are elastic and stretch across the entire width of your screen. Others are fixed width. Others are responsive – they respond to the kind of device being used.  Some have just one column, while others provide two or three columns to use for RSS Feeds, Blog rolls, and navigation. Themes are also categorized by color. WordPress.org offers five different filters to use to search through all their available themes.

With such a variety, how can you choose the right theme for your blog? One way is to simply page through the selections and preview ones that look good. When you are shopping around for themes, there is a preview button available which simulates what you’ll get. If you like it, simply click to activate. Another option is to look at the blogs on the Commons. If you find one that you really like, scroll down to the bottom and find its name. Them go back to the Appearance tab and look for that name.

Customization and Personalization

Don’t want your blog to look like someone else’s? Some themes offer additional configuration options on the dashboard, including ways to change pictures, logos, and fonts. Each theme offers at least one way to customize it by manually overriding its CSS (Cascading Style Sheets). This “Custom CSS” option is not for everyone, and requires some knowledge of the way CSS is used to “style” HTML. But if you find a theme that you really like, but don’t like the background color or the font, you can use this method to modify it to your liking.

Creative Commons License

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