1. Documentation
  2. Themes
  3. On Topic

On Topic

Important: This theme was retired in October 2015 and is not for sale. Documentation is no longer being updated.

Installing your Theme ↑ Back to top

To learn how to install your theme please reference our documentation here: Installing a Theme

On Topic Theme Demo: demo.woothemes.com/ontopic

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: On Topic > Framework

Activate your Theme Key ↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

Please reference the WooCommerce Helper Documentation to learn more.

Setting Up On Topic ↑ Back to top

Welcome to our focus-driven theme, On Topic, specifically designed to feature your writing! This theme includes a Business Page Template and support for our WooCommerce e-commerce plugin! Let’s get started!

Adding your Logo ↑ Back to top

You have two options when adding a logo to your site. You can either use a text based Site Title and optional Tagline or you can use an image based logo as shown in the demo.

To upload your own image based logo:

  1. Go to: On Topic > Settings > General Settings > Quick Start > Custom Logo.
  2. Upload your logo image – we recommend using either a .jpg or .png for this.
  3. Save All Changes.

If you don’t have an image based logo, you have the option to add your Site Title and Tagline, you will find the settings for this just below the logo image upload area.

To enable the text based Site Title and Tagline:

  1. Go to: Settings > General to enter your site title and tagline.
  2. Go to: On Topic > Settings > General Settings > Quick Start and check the box to enable the text based site title and tagline.
  3. Optionally Enable the site description and adjust the typography settings.
  4. Save All Changes.

On Topic Homepage Settings ↑ Back to top

As On Topic is primarily intended as a reading-focused theme, the homepage includes your latest posts, as well as a switcher to jump to a grid of the topics (categories) you write about.

There are a few options when setting up your homepage.

Introductory Message ↑ Back to top

OnTopic-Intro-Message

To add the Introductory Message:

  1. Go to: On Topic > Settings > Layout Options and select the option to Enable the Introductory Message.
  2. Then Enter your Introductory Message below.
  3. Save all Change

Additional options on this page will allow you to:

  • Exclude categories from your homepage posts and ‘Topics’. To find the category slug go to: Posts > Categories and look in the right Slug column.
  • Exclude categories from the blog page template.

Post-Category-Slug

To change the background image of your homepage left side region go to: On Topic > Settings > Styling Options > Header and upload a .jpg or .png file. This image will scale the width and height with CSS. Please see the recommended image sizes below for more information.

Homepage Topics ↑ Back to top

To setup the ‘Topics’ section on your homepage, simply label your posts with categories. The categories for your posts will automatically fill this section in alphabetical order (A-Z). The Topics section uses the featured image from the latest blog post for that category.

OnTopic-Topics

Business Page Template ↑ Back to top

The On Topic comes with a useful Business Page Template to help display additional content on your site, including support for the WooSlider plugin and the FREE Features and Testimonials plugins. You must purchase the WooSlider plugin separately in order to use it on the Business Page Template.

Go to: On Topic > Settings > Business Template to select the business page modules you would like to display.

Business Template Settings

To set the business page template:

  1. Go to: Pages > Add New.
  2. Add a title and the page content.
  3. Go to: Page Attributes > Template just below the publish module to select the Business page template.
  4. Publish the page.

Setting the Business Page Template as the Homepage ↑ Back to top

To set the Business Page Template as your Homepage go to: Settings > Reading and select the Static Page – Front Page as your newly created Business Page (instead of the recent posts setting).

Please note! By manually setting a static front page in the Reading settings you will be disabling the Homepage widgetized area and the Homepage Theme Option settings as well as the homepage sidebar header.

To see an example of setting the Business Page template as the homepage please this see the On Topic Business Demo. You can also read more about how we created the On Topic Business Demo here: How we made this demo

To learn more about Page Templates please see our video tutorial here: Page Templates

Including WooSlider in the Business Page Template ↑ Back to top

The Business Page Template slider uses the WooSlider ‘Attached Images’ slideshow type. After you have purchased, downloaded and activated the WooSlider to include the slider on your business page template:

  1. Go to: On Topic > Settings > Business Template to select Display WooSlider.
  2. Next, go to: Pages > Edit to add images to your newly created business page.
  3. Select Add Media.
  4. Upload as many images as you’d like.
  5. Close (X) the Media Uploader pop-up window.
  6. Finally, save changes by selecting Update.

You must upload images directly to your business page template in order for the Business Page Template WooSlider feature to show.

Pro Tip! in the WordPress 3.5+ Media Uploader you can select Uploaded to this Page from the dropdown to only view the images uploaded to this page and thus used in the featured slider (see below). Drag and drop the images from here to reorder if you’d like.

ImageUploader-AttachedtoPost

WooCommerce Settings ↑ Back to top

To learn more about how to setup WooCommerce, please see our WooCommerce Installation and Setup doc.

On Topic has a few Settings for WooCommerce. To review go to: On Topic > Settings > WooCommerce.

Here you can:

  • Upload a Placeholder image for all WooCommerce products to use if an image is not uploaded.
  • Display a link to the cart in the main navigation

Product Archive Settings ↑ Back to top

The Product Archive page settings are as follows:

WooCommerce Settings

Here you can:

  • Select how many columns of products to display on product archive pages.
  • Select the number of products to display.
  • Chose to display the product thumbnail.
  • Chose to display the add to cart buttons.
  • Chose to display the aggregated star ratings per product.

Product Detail Settings ↑ Back to top

The Product Detail settings for the single product page are as follows:

Product Details Settings

Here you can:

  • Chose to display the product review / attribute tabs in product details page.
  • Chose to display related products on the product details page.
  • Set the maximum number of related products to display.
To learn more about setting up WooCommerce products, please see the Adding and Managing Products doc.
To learn more about how to make your On Topic theme look like our Product focused demo please see our post: How We Made This Demo

Subscribe & Connect ↑ Back to top

The Subscribe & Connect functionality for On Topic can be seen on the left side of the home and shop pages, in the header on secondary pages, the end of single post pages, as well as by using the Subscribe & Connect widget in the footer.

To setup Subscribe & Connect:

  • Go to: On Topic > Settings > Subscribe & Connect > Connect Settings to add links for each social media page. Adding links will enable the icon to show.
  • Go to: On Topic > Settings > Subscribe & Connect > Subscribe Settings to setup the email subscription form.
  • Go to: On Topic > Settings > General Settings > Subscription Settings to enter your preferred RSS feed URL.

Subscribe & Connect Settings

To enable the Subscribe and Connect icons on the homepage and secondary page header, as well as the single post pages go to: On Topic > Settings > Subscribe & Connect > Setup

Here you can also enable the related posts for the Subscribe and Connect area on a single post page and optionally set the title and description for this box.

Here is an example of the Subscribe and Connect icons on the homepage and secondary page header:

Homepage
Homepage
Secondary Page Header
Secondary Page Header

Here is an example of the Subscribe & Connect panel on a single post page with related posts enabled:

Single post page with related posts enabled
Single post page with related posts enabled

Here is an example of the Subscribe & Connect Widget:

SubscribeConnect-Widget

OnTopic-SubscribeConnect-Widget

 

 

 

 

 

 

 

 

 

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets

WooCommerce Settings ↑ Back to top

To review the following WooCommerce Homepage Options go to: On Topic > Settings > WooCommerce > General.

WooCommerce Settings

  • Upload a custom placeholder to be displayed when there is no product image.
  • Display a Header Cart Link in the main navigation.

Product Archives ↑ Back to top

To adjust settings for the Product Archives pages go to: On Topic > Settings > WooCommerce > Product Archives.

Options include:

  • Select how many columns of products you want on the product archive pages.
  • Select the number of products to display on the product archive pages.
  • Display the product thumbnail.
  • Display the add to cart buttons.

Product Details ↑ Back to top

To adjust settings for the single product page go to: On Topic > Settings > WooCommerce > Product Details.

Options include:

  • Display the product review / attribute tabs in product details page.
  • Display related products on the product details page. Related products are determined by the product categories. To group related products, add them to the same category/group.
  • Set the maximum number of related products to display.

Don’t forget to Save all Changes once you are done adjusting the settings!

Image Dimensions ↑ Back to top

In order to get perfectly round images, you must set your Thumbnail Settings with the same proportions for height and width. To do this go to: On Topic > Settings > Dynamic Images > Thumbnail Settings the demo image size setting for this is 270px x 270px.

On-Topic-Featured-Image-Size

Please note! We do not recommend that you force the height of your slider or product images with CSS as this will break the responsiveness of the theme images. Rather, it is best to save out your slider/product images with the same height before uploading.

Recommended Image Sizes ↑ Back to top

  • Homepage left side region suggested minimum size: 365px x 1080px
  • *Logo suggested max width: 300px
  • **Featured Image for Single Blog Post Page suggested minimum size: 1500px x 500px this will scale to fit the width of your browser.
  • Single blog post page images inserted into post max width: 900px
  • ***WooSlider on Business page template suggested minimum width: 1064px – height will scale to fit
  • ***Testimonials icon images: 60px x 60px

*The logo suggested max width is scaled by the #header CSS width setting of 25%.

**The Featured Image for the Single Blog Post Page is set using the CSS ‘cover’ property. This will scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. This will be dependent on your browser width and your header height.

Note: To display featured images in single posts, you need to go to Settings > Dynamic Images > Thumbnail Settings and enable Single Post – Show Thumbnail.

**Requires WooSlider and/or Testimonials plugins.

WooCommerce Product Images ↑ Back to top

To adjust the Shop Image settings go to WooCommerce > Settings > Products and scroll to the bottom of the page to find image size settings. If you change these settings after you’ve uploaded images, you must Regenerate Thumbnails for the changes to take effect.

Due to the product layout on archive shop pages, square product images work best. This can be achieved by using the WooCommerce Hard Crop feature found in WooCommerce > Settings > Products > Product Image Sizes and setting the same pixel dimension for both the width and the height.

WooCommerce Product Image Settings

To learn more about WooCommerce product images please see further documentation here: Adding Product Images and Galleries and here Using the Appropriate Product Image Dimensions

Featured Blog Images ↑ Back to top

To set the Featured Blog Image size for the blog page go to: On Topic > Settings > Dynamic Images > Thumbnail Settings.

To learn more about Featured Images please see our tutorial here: Featured Images

Removing Round Image CSS ↑ Back to top

To remove the round images across your entire site please add the following to your Custom CSS:

.post img, .type-page img, .post img.thumbnail, .type-page img.thumbnail {border-radius:0;}

Contact Page ↑ Back to top

To setup a Contact Page:

ContactPage

  1. Go to: Pages > Add New
  2. Title your Contact Page
  3. Go to: Page Attributes > Template just below the publish module to select the Contact page template.
  4. Publish your page.
  5. Go to: On Topic > Settings > Contact Page to enter the Contact Form Email address.
  6. From here you can also enable the information panel (see below), and enable the Subscribe & Connect panel to display your social icons (see demo example)
  7. Be sure to Save All Changes when finished.

Contact Page Settings

To learn more about how Page Templates work please see our video tutorial here: Page Templates

Contact Page Maps ↑ Back to top

Contact Page Map Settings

To setup Google Maps:

  • Enter your Google Maps coordinates. Example: -33.924868,18.424055 – To find the Google Cordinates, search for your location on a Google Map, right click the pin and select “What’s Here”. This will input the Google Coordinates in the search box.
  • Optionally disable mousescroll for all the Google Maps on the site. This could improve usability on your site.
  • Set the map height.
  • Set the Default Zoom Level.
  • Select the Map Type: Normal, Satellite, Hybrid or Terrain.
  • Enter Map Callout text to be shown when you click on the map marker for your location.

Custom On Topic Widgets ↑ Back to top

The On Topic theme includes 5 custom widgets in addition to the Woo – Component widget mentioned above. Here are the other 5 custom widgets:

  • Woo – Adspace
  • Woo – Blog Author Info
  • Woo – Embed/Video
  • Woo – Flickr
  • Woo – Subscribe/Connect

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment