Documentation for Koehn

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

TIP: More info on how to download and install a theme here.

Image Sizes

The minimum recommended image sizes for Koehn are:

  • Post thumbnail: 750x500px
  • Item thumbnail (used on widgets): 555x415px
  • Tall thumbnail: 555px in height
  • Fullwidth featured image: 1140x550px
  • Hero image: 1920x240px
  • Slider image: 1920x1080px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use the latest version of this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • MaxSlider: You can use our slider plugin to generate sliders for your homepage or any other page you want.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Adding a new post

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. Toggle the post’s sidebar,
  4. add a category and/or tag to the post,
  5. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  6. and finally publish the post.

Creating a page for your posts

To setup your blog page you can go to Pages > Add New and create a page named Blog. Then navigate to Settings > Reading and set that page as your posts page.

settings_reading

Now you can add that page to your menu to give your visitors easy access to all your posts.

Adding a new team member

To add a new team member navigate to Team > Add New.

  1. Fill in the title, which will usually be the team member’s name,
  2. add any related content,
  3. in the Team member options metabox you can fill in the member’s job title and major social profile links,
  4. add a featured image,
  5. and finally publish the team member.

Creating a listing page for your team members

Go to Pages > Add New, add a title to the page and from the Page Attributes metabox select the Team Listing on the Template drop down.

From the Team Listing options metabox you can select between a two or three column layout for the listing. Once done you can publish the page and add it to your menu.

Adding a new Project

To create a new project, navigate to Projects > Add New.

  1. Add a title to your project,
  2. fill in the project’s content,
  3. in the Project Options metabox you can add a location and date for your project,
  4. select or add a project category for the item,
  5. add a featured image,
  6. and finally publish it.

Creating a listing page for your projects

Go to Pages > Add New, add a title to the page and from the Page Attributes metabox select the Project Listing or the Project Listing Grid on the Template drop down.

From the Project Listing Options metabox that appears when you select a template, you can select a base category for the listing if you don’ want to display all items and an items per page number. When the Project Listing template is selected you can also select a project layout between Plain, Alternative and Alternative with no excerpt. When the Project Listing Grid is selected you can choose a column number for your grid and toggle masonry and isotope filtering.

Adding a new award

To create a new award item navigate to Awards > Add New.

  1. First add a title to the award item,
  2. fill in any related content,
  3. in the Award Options metabox you can add a subtitle, the year the award was received and the project it was about,
  4. add a featured image,
  5. and finally publish the item.

Creating an award listing page

To create a listing page for your awards you can create a new page and select the Awards Listing template from Template drop down under Page Attributes.

Using the Homepage template

To use the homepage template we have built for the Koehn theme create a new page and apply to it the Home page template from the Page Attributes panel on the right.

If you want to add a slider to your homepage you can do so by using our MaxSlider plugin. Check this article out on how to install and use the plugin. Once you have created the sliders you can select the one you want to display from the Home Page Options drop down.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using a page builder of your choice. On the theme’s demo we have used extensively the Elementor page builder plugin.

Creating menus

Neto offers three menu locations. The Main, Top and Footer. You can customize these menus any way you like to make navigation easier for your visitors. For info on how to create menus in WordPress, please have a look at our guide here.

Customizing the theme

All the theme’s options can be accessed via WordPress’ customizer. Navigate to Appearance > Customize and you will be presented with this panel.

If you have used any theme from the WordPress.org theme directory you should be familiar with the usage of the customizer, if not you can read more about it here. Below we will take a look at the options each section offers.

Using this tab you can create new or modify existing menus. For more info on menu creation please check the Creating Menus section above.

Site Identity

Here is where you take care of your site’s branding. You can set a logo, the site’s title and tagline and add a site icon which will be used on browsers and as an app icon on mobile devices.

Layout Options

In this tab you can toggle the sticky header, control the number of words on the automatic excerpt and toggle between numbered and previous/next pagination styles.

Listing Options

Here you can make team members link to their individual pages.

Posts Options

As you might imagine, this tab helps you configure the layout of single posts. You can toggle the featured image, the categories, tags, comments, author box, post navigation and related posts. You can also modify the title of the related posts section.

Colors

This tab will allow you to create unique color schemes for your site. There are four sub tabs which control different sections of the theme. The Global tab which allows you to change mostly content related colors, the Header tab, the Hero tab and finally the Sidebar tab.

Typography Options

The typography options tab allows you to modify the size of all content headings, body text and widget titles and text. You can also set page, section and widget titles to be all uppercase.

Widgets

Through this tab you can access all the available theme sidebars and add widgets to them.

Social Networks

social_networks

Fill in the links to your social profiles and use them on the header bar or in any sidebar using the social icons widget.

Titles

The title tab will allow you to modify the default titles for the blog, team, search and 404 pages.

In this tab we can upload the credit cards icons to let people know which payment methods are accepted on your site. You can also toggle the reveal effect on the footer and the appearance of the Instagram carousel.

Static Front Page

static_front_page

Using this tab we can choose what gets displayed on the front page of our site. For example if we want to create a homepage using a page builder we will need to create a new page using the Page Builder template, name it home and set it as our Front Page above. The Posts Page is the page that will display our post listing, as discussed earlier in the post creation section.

Other

This tab contains the custom CSS box which allows you to add custom styling if you need it.

Custom Widgets

Koehn comes with five custom built widgets to help you display your content optimally. Three of the widgets are purpose built to be used on the theme’s homepage. Under each widget you will find a small description on what each one does.

Theme – Latest Posts

The latest posts widget allows you to display a number of your latest posts, you can choose to them in post order or randomly, you can also select to show posts from a single category. There are three available layouts, Plain, Alternative and Alternative without excerpt.

Theme – Post Type Items

The post type items widget allows you to display a handpicked selection of posts or custom post type items using the seven available layouts. Select the post type you want to display and click the add item button, select the item and repeat.

Shortcodes

The theme comes with its own shortcodes which can output your posts in various configurations to help you create unique layouts.

The shortcode is [theme-items] and has a required attribute, the ids.

For example

[theme-items ids="44, 26, 93"]

will output the items that have these ids attached to them.

Optional attributes are:

  • post_type which will make the shortcode display only items of the selected post type, for example
    [theme-items ids="1,2,3" post_type="koehn_award" ]

    will only display award items even if one of the ids selected is from another post type. Defaults to any

  • layout this attribute defines the layout that will be created. Available values are
    '', 'alt', 'alt-nocontent', 'media', 'grid-2', 'grid-3', 'grid-4'

    Defaults to ”. For example

    [theme-items ids="1,2,3" layout="grid-3"]

    this shortcode will display three posts in a three column grid layout.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub