Archive | Site Themes

How to use WordPress Themes to customize the look and feel of your site.

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!

WordPress 3.8 Now Available on the Commons

WordPress WordPress 3.8 (nicknamed “Parker” in honor of Charlie Parker) offers many improvements:

admin themeFirst off, the Dashboard looks very different.  Although everything is basically the same, the layout is much more attractively styled, and you now have the option to choose between seven different color schemes.  Go to Users>>Your Profile and find the “Admin Color Scheme” settings, pictured at the right to make any changes.  The Dashboard looks especially great on mobile devices and tablets and has a “fresh, uncluttered design that embraces clarity and simplicity.”   (I was not a big fan of the default color scheme and chose the “Light” option which I found easier on the eyes.)

Theme management has been refined.  You can more easily flip through the themes that are available on the Commons.  Sit back and use page up and page down keys to view available themes (we have hundreds).  Find one you like?  Hover over the theme and two things will happen.  You will see a box in the center (circled in red, below) that, when clicked, provides “Theme Details.”  This provides information that will help you decide if the theme will meet your needs.  You will also see the “Activate” and “Preview” buttons (highlighted by the red arrow).  Use the  preview button first to get a sense of what it will look like.  If you like it, you can click “Activate.”

themes

widget changesWidgets are now easier to manage, especially on smaller devices.  Just click the widget you want to embed and a dropdown list of available widget areas is displayed.  Select the widget area, click the “Add Widget” button, and the Widget Area is auto-populated.  You can drag its position up or down to get it in the right place.  Then you need to click the “Save” button.   You can still use the old method of dragging and dropping too.

The new Twenty Fourteen theme is now the default theme on the Commons.  It is a sleek and responsive magazine style theme with three widget areas and two page templates.  Here is a link to its demo page and below are some screenshots of what it can look like.  On larger screens, the number of boxes on the rows increase.  You can also substitute the grid of boxes with a manually advancing slider.  For some quick start information, see Getting Started with Twenty Fourteen on the Codex.

Twenty-Fourteen-3-e1392482645412

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!

WordPress 3.5

Named after drummer Elvin Jones, who played with a host of other jazz greats, including John Coltrane, WP 3.5 has a number of enhancements that focus primary on the media component of WordPress, and make it easier to find and display images in pages and posts. You’ll notice the Add Media button has a new look (see below), and when you click on it you’ll see how the new image management system arranges your media in a horizontal grid. Previously, you were just taken to the Media library and you would have to page through it to find an existing image.

In the new version, you can click on an image, and all the metadata about the image is listed in a nice, editable panel on the right. To upload new images, click on “Upload Media,” and select files from your computer or drag and drop them onto the box provided.

Adding Media

The following screenshot shows the screen displayed after clicking on “Add Media.”

Under the “Attachment Display Settings” you’ll find all the important settings for positioning and sizing your image, and controlling where it links to. By default the image will link to its page in your Media Library, but you can create a custom URL here. The setting here are dropdowns, where previously they were radio buttons. Once you are satisfied with the settings, click on the blue button below to “Insert into page” or “Insert into post.”

Galleries

Galleries are a lot easier to create with the new version of WordPress. Simply click on “Create Gallery” link, found in the upper left hand corner, select the images you want to include, and then click on blue “Create Gallery” button, found on lower right hand corner. You will be taken to a screen called “Edit Gallery” where you can drag and drop images to get them in the proper order, add an image that you might have forgotten, or delete an image from the gallery that doesn’t work for you. On this screen, you can also determine whether the image should link to its media page, or to the page which it is attached to. (An image is automatically attached to the post or page it was originally inserted into.) You can also set how many images should appear in a row, and configure your gallery so that they appear in a different order each time the screen is refreshed. Click on “Insert Gallery” to finalize the operation. You will see a dotted box with a large camera icon that represents your new gallery creation.

The screenshot below shows the “Edit Gallery” page:

Here is an example of a page showing the gallery. Roll you mouse over each image to see where your viewer will be taken if s/he clicks on the image.

Other Changes

There are a several other non-media related changes with this release.

  • You’ll notice a slight change in the tab that toggles back and forth between the Visual/HTML view when you are editing a page or post. “HTML” has been renamed “TEXT.”
  • Unless your site is using “Links,” this functionality will no longer appear in the dashboard or as a widget. (Links can be brought back by installing the Link Manager Plugin.)
  • There’s a new, more user-friendly color picker available.
  • There’s a new Welcome Screen on Admin panel (see screenshot, below) that neatly summarizes some of the more commons things you’ll want to do when starting your site. You can optionally dismiss this feature to provide more dashboard space.

And Finally, the Twenty Twelve Theme!

Twenty Twelve is officially out and will become the default theme for the Commons! Simple, flexible, elegant, responsive – it’ll look great on any sized device. For more information, see a separate post on the Commons Codex called Twenty Twelve Now Our Default Theme.

Welcome to WordPress 3.4!

Grant Green (June 6, 1935 – January 31, 1979). Photo Credit.

The marquee feature of Commons 3.4 or “Green” – in honor of guitarist Grant Green – is the “Theme Customizer” which lets you try out new settings on your current theme or on a new theme without saving them.  The “Preview” option for new themes has been replaced by “Live Preview,” and it lets you visualize the new look of your site, and make adjustments.

Gone are the days of rushing to update your header, background, and the like as soon as you activate a new theme. You can now customize these options before activating a new theme.

The customizable options vary by theme – some have only a few, while others have many.  Check out themes like “Twenty Ten,” “Twenty Eleven,” and soon, the much anticipated “Twenty Twelve” (to be released with WP 3.5) to see examples where there is a lot of ad hoc customization available.  Stay tuned as theme authors double down to add more “Live Preview” customization possibilities to their themes.

When you first go the Appearance>>Themes, you will see the notification pictured on the left announcing this new feature. (You can click “Dismiss” to permanently get rid of the announcement.)

The image on the right shows the options available when customizing the Twenty Twelve theme.   You can play around with the look and feel of your site, and see the results without actually saving them.

Another huge improvement, especially for us at the Commons – you no longer have to “page” through the hundreds of themes we make available!  Simply use the slider bar to scroll through them all, in an instant!

Another nice to have feature of 3.4 is the ability to easily embed a tweet from Twitter.  Simply cut and paste the tweet’s permalink onto its own line and click save.  (Make sure you have checked the “Auto Embed” option in your dashboard under Settings>>Media.)

Notice that you can Follow, Reply, Retweet, and Favorite right from the embedded image.  Here is an example of an embedded tweet:

Another enhancement in 3.4 has to do with image captions.  You can now include some HTML in captions that create credit links, like the one in the Grant Green image, above.

Hope you enjoy all these new features!

CommentPress

Commentpress lets readers comment on each paragraph of a document, and respond in-line to other comments. Developed by the Institute for the Future of the Book, it is a terrific way for writers to solicit and track critiques of their work, from either a controlled or open group of readers:

Annotate, gloss, workshop, debate: with Commentpress you can do all of these things on a finer-grained level, turning a document into a conversation. It can be applied to a fixed document (paper/essay/book etc.) or to a running blog.

Commentpress’ documentation (written using Commentpress) shows how documents can be structured (title page, table of contents, pages, posts, numbering, etc.) and is a great resource once you’ve got the tool up and running.

Getting Started with CommentPress

To get started on the Commons, first activate both the Commentpress theme and its plugin. Then on your WordPress dashboard, go to Settings>>Commentpress to configure the plugin. Be sure to check the box to “Create All Special Pages.” All the other default settings are fine to begin with. You can always come back to the setting page to fine tune your site. By default, CommentPress uses pages as chapters and for its Table of Contents.

Readers may comment on an entire page or post, or on a specific paragraph within the page or post. There is no approval process for comments, but members must supply their name and email address (and optionally, their website’s url) to comment. To avoid spam, make sure to install and configure Akismet or some other spam filter. To control the pool of responders, you might want to set up your site as private, and invite the readers you want to join.

Here is a screenshot from Shakespeare Quarterly, to give you an idea what Commentpress looks like in action:

Woo Themes

Woo Themes have arrived!  Click here to see a list of these 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 screencasts 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