Creating Your Theme

Whereas most WordPress themes are pre-designed and set in stone at time of download, TTG CE2 Theme for WordPress allows you to roll your own theme from out of Lightroom with all of the features you've come to appreciate in other TTG plug-ins. The purpose of this article is to provide an overview of how to design your theme.

TTG CE2 Theme for WordPress does not use any images from your Library, so feel free to work with an empty collection (i.e. no images in your filmstrip). This will keep your preview refreshing quickly and will minimize exported assets.

As usual, the best way to work is to begin at the top of the control panel, then work your way down through the options in order. And so, we begin with …

the Site Info control pane

The controls located in the Site Info pane are largely to do with the “big picture” aspects of your design and serve to establish a solid foundation for the rest of your site. This includes setup for your masthead, site navigation, footer and more. The components here are well explained under the heading The Core Elements 2 Framework on the wiki home page , so we will gloss over them here.

The default navigation values assume your blog will be at the location http://yourdomain.com/blog/. If this is not the case, you may need to revise the navigation hyperlinks.

If you plan to use the TTG navigation system, then either the Traditional or Drop-down menu styles will be acceptable. If you intend to override the standard TTG navigation using WordPress' in-built navigation system, you must use the Drop-down menu style. To make this change, locate the Navigation: Styling control group and specify the “Drop-down” Menu Type.

Being a blog, there will be a heavy emphasis on text. Be sure to spend some time with the Typography controls to get your text looking nice. Within the Lightroom preview, click on the Typography Samples article to access the typography test bed. To return to the front page of the preview, click the square icon in the toolbar 1)

the Color Palette control pane

As usual, the Color Palette control pane contains all of the controls for styling the block, which is where the majority of your blog is going to happen. In TTG CE2 Theme for WordPress, the block is divided into two columns, a main column for content and a sidebar. The standard box model controls are in effect and may be changed. Consider running with the default layout, though. By default, the blog is designed to a width of 960 pixels, ideal for desktop and mobile visitors alike, with columns proportioned according to the Golden Ratio.

Feel free to attack the colors with reckless abandon. Just keep readability in mind whilst deciding upon text and background colors; you'll want a fair amount of contrast so that text stands out from the page, but too much contrast – pure black text on a pure white background, for example – can also be hard on the eyes.

Beyond the block controls, you will find setup options for the blog itself, organized into the following control groups:

Blog Content Setup

These settings apply to the blog's main content column and provide options for styling of content dividers, image captions, and width of the main content column and, by extension, the sidebar 2).

Of particular interest should be the Featured Post Location option. Your most recent blog entry will be the “Featured” post, occupying the full width of your blog – big, bold and with a massive featured image; it's fantastic for photo blogging.

The featured post will appear on the blog's front page and there are a handful of options here. You can display the featured post within The Block, where it will occupy the full width of the block whilst adhering to the same rules as the rest of your content, or you can opt to display the featured post in The Grid (see below), which may be styled separately from the block, allowing the featured post to stand out with its own look. Finally, you can disable the featured post altogether.

If assigning the featured post to the grid, be sure to choose a Canvas Layout that includes the grid!

Sidebar Setup

These settings allow you to style the appearance of your sidebar – background color, padding, typography, etc. Pretty straightforward.

Footer Widget Setup

Optionally, your blog footer may be fitted with WordPress' widgets making it very flexible indeed. These settings allow you to style the appearance of those widgets, should you choose to use them.

Form Styling

The form styling options apply to comments entry and search box, as well as any other forms appearing on your pages, for example if you are using any for WordPress' many form plug-ins.

Comments Display

Background color settings for post comments.

Photoswipe Setup

TTG CE2 Theme for WordPress supports Photoswipe for any hyperlinked images or embedded galleries, allowing the images to be viewed at full-size without the visitor leaving your page. Here you can customize the Photoswipe implementation, or disable it altogether if, for example, you decided to install some other image handling plug-ins such as any of the various lightboxes available.

Photoswipe is a great feature, though, as it works wonderfully on mobiles (unlike most lightboxes).

the Appearance control pane

Just the standard box controls for The Grid. Really only of use if:

  1. You've opted to put the Feature Post into the grid.
  2. You plan to feed in extra content via PHPlugins.

the Image Info control pane

Because TTG CE2 Theme for WordPress does not use images from your Library, there is no metadata to be worked with. Therefore, the Image Info control pane is utterly pointless. Ignore it.

the Output Settings control pane

Again, because the engine typically does not use images from your Library, the Image Renditions control group can be ignored. If for some reason you want to export images with your blog, however, the image rendition controls are here to serve you.

If you're using TTG CE2 Cart, you will probably want to setup cart listening by supplying the URL to your cart installation. This allows visitors to access their shopping carts from the blog when they have items in the cart.

Export

At the end of it all, press that magical Export button. This will save your design into a folder ready to be donned by your new (or old!) WordPress installation.

1) Not sure where to find the toolbar? Tap the 'T' key on your keyboard to toggle the Toolbar off and on, making it easy to identify. The square icon is on the far left.
2) based upon your content width and the width of The Block, the sidebar width will be calculated naturally
Print/export