Using Theme Options

Klein comes with plenty of options and settings that you can use in order to customize your WordPress powered website.

To use the theme options panel:

  1. The ‘Theme Options’ panel is located inside your ‘WordPress Administration‘ panel (wp-admin) > ‘Appearance’ > ‘Theme Options.’
  2. In the ‘Theme Options‘ page has two main buttons:
    • The ‘Save Changes’ button to update the changes you have done in an option.
    • The ‘Reset Options’ button to ‘Revert‘ or ‘Use the Default‘ setting of an option.
  3. Navigate on each panels to adjust the value of each settings and to apply the changes in your site.
  4. Have fun!

Using the Theme Customizer

Klein comes with a theme customizer that allows you to change various theme parts colours with ease.

To access the theme customiser:

  1. Go to your ‘WordPress Administration Panel’ and click ‘Appearance’ > ‘Customize.’
  2. It will then redirect you to the ‘Theme Customizer‘ page.
  3. In the ‘Theme Customizer‘ page click the ‘Colors’ tab.
  4. Inside of the ‘Colors’ tab change the color settings of the ‘Header Text Color‘ and the ‘Background Color‘ settings.

To change the value of the colours found in ‘Colors’ tab. Click ‘Select Color’ button and select your desired colour from the colour palette. Alternatively, you type in the colour hex value such as ‘#e1e1e1’ or ‘#ff0000’ for red.

Click ‘Save & Publish’ to save the changes. Otherwise, click the close button (‘X’) to exit the theme customiser.

To revert the colour back into its default state or value, click ‘Select Color’ button and then click ‘Clear’ button.

Have fun!

Custom CSS

The best way to modify the styling of Klein is through custom CSS work. If you are knowledgeable with CSS, you can always inspect the elements of the theme through popular browser extensions such as FireBug for Firefox or Chrome Inspect Element feature of Google Chrome browser.

The CSS codes you have written should be applied to the theme options CSS settings so that your changes will not be overwritten when you update the theme.

Using the Child Theme

The child theme can overwrite selected theme files.  To learn more about child themes, please visit the following link:

http://codex.wordpress.org/Child_Themes#Template_Files

The link almost explains everything more than I can have in this documentation.

Custom Sidebars

One of the strong points of Klein is the ability to add, update, and remove custom sidebars.

  1. In your ‘WordPress Administration Panel’ go to ‘Appearance’ > ‘Sidebars.’
  2. You are now in sidebar management page. You can only see sidebars you have added; the theme does not allow the modification of theme default sidebar like ‘Sidebar ‘
  3. To add a new sidebar, enter the name and the description of the sidebar and click ‘Add ‘ It should add new sidebar on the right side of your screen,
  4. To check whether the sidebar works or not, navigate to Appearance > Widgets. Now, you should see your newly added sidebar. Go ahead and add some widgets there.
  5. In post or page section, under ‘Appearance Meta box,’ there are two drop-downs that allow you to select which sidebars you are going to show for that post or page. You should be able to see you newly added a sidebar. Nice.
  6. Select the sidebar and update the post. You are done.

The appearance meta box is also available in bbPress and WooCommerce product pages. So you have freedom to create as many sidebars as you can.

Page Layouts & Sidebars Positions

Klein has six different page layouts which you can use to take advantage of the widgets. Using the page layouts is very easy.

Inside the WordPress Panel, if you edit a post, under ‘Appearance’ meta box, there is a dropdown in which you can select the layout you wanted to use on the page. The layout is not limited to the post; you can also select a different kind of layouts for your ‘Pages,’ ‘Forums,’ ‘Topics,’ and ‘Products.’

The following is the complete list of layouts available for you to choose from:

  • Content / Sidebar Right
  • Sidebar Left / Content
  • Sidebar Left / Content / Sidebar Right
  • Content / Sidebar Left / Sidebar Right
  • Content / Sidebar Left / Sidebar Right
  • Sidebar Left / Sidebar Right / Content
  • Full Content / No Sidebar

Click ‘Update’ button or ‘Save’ button to publish the changes.