Techne WordPress Theme Documentation

Techne is a WooCommerce WordPress theme designed to help you build electronics & technology online shop.

Read how you can get the most out of the theme with the Techne WordPress theme documentation.

Techne WordPress theme documentation, step 1: Theme installation

The theme can be installed through the WordPress Admin panel.

1. Log in to the WordPress Admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button at the top of the screen.
4. In Add Themes screen, click on the Upload Theme.
5. Click on the Choose theme, and then browse for theme file on your computer.
6. Click on the Install Now to start the install process.
7. After the installation is done, click on the Activate theme.

A detailed video for theme installation is available here: https://help.themeskingdom.com/how-to-install-and-setup-the-theme.

After activating the theme, you will be prompted to install the required plugins. Required plugins in the Techne WordPress theme documentation are:

1. Jetpack
2. Kirki
3. Slider Custom Post Type
4. MailChimp
5. WooCommerce

Jetpack

Jetpack is the world popular plugin that extends WordPress features. In the Techne theme, it is used to extend galleries’ features and protection. The official documentation is available here: https://help.themeskingdom.com/jetpack-plugin/.

Kirki

Kirki is a plugin that enhances theme experience by adding useful elements in the customizer, like image position picker, font settings and such.

Slider Custom Post Type

Slider Custom Post Type plugin adds Slider post type to the theme.

MailChimp

MailChimp plugin allows you to add a MailChimp signup form widget to your WordPress quickly.

WooCommerce

WooCommerce is a free eCommerce plugin that allows you to sell anything. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

Techne WordPress theme documentation, step 2: Theme demo

To set the theme as presented in our demo, you can import the demo file.

Techne WordPress theme documentation, step 3: Theme setup

Before starting setup, please install and setup the WooCommerce plugin. During the setup process, you will need to set up store address, set payment methods and shipping methods. WooCommerce will also create all pages that are required for a shop – Shop, Cart, Checkout, and My Account.

To set up the theme, please follow the next steps:

1. First, go to Pages -> Add New, and create pages Blog, FAQ, Contact, Featured Products, Sneak Peeks, and Terms. For Featured Products page set Featured Products template, and for Sneak Peeks set Portfolio page template. Other pages should use the Default template. Page with Featured Products Page will display products that are marked as Featured products, and the Sneak Peek page will display all portfolio items.
2. Go to Settings -> Reading. Select the homepage to display a static page. For the Homepage set Shop page, and for Posts, page set Blog page.
3. Create some posts – go to Posts -> Add New and create several posts. Be sure to set featured images. All posts will be displayed on the Blog page.
4. In the Portfolio, create several portfolio items. In our demo, portfolio items will be displayed on the Sneak Peek page.
5. Go to Slider and create several slides – enter the title, custom link, and set featured image. Slides are displayed on the top of the Shop page.
6. Go to Products -> Categories. Create several product categories – in our demo, we have created categories Cameras, Speakers, Tools, Tech, etc… Categories are used to group similar products – and to display product groups in the navigation. In our demo, we have used product tags for different brands.
7. Create several products and associate them with the product categories. Set featured image, enter description and price for each product. Add product tags to each product. As we have mentioned before, the homepage displays the products that are marked as featured. After creating products, click on the Catalog visibility and mark the products as Featured. Products marked as Featured will appear on page Featured Products.
   
8. To setup main navigation, go to Appearance -> Menus. Create a new menu and add items. Add all your pages. For the Follow option, add placeholder item (custom link item with target #) and links to your social profiles as custom link elements. Create two more menus – Footer Menu 1 and Footer Menu 2. To Footer Menu 1, add All your pages, and in Footer Menu 2, add a link to your Shop, My Account and Cart pages.
9. Now it’s time to set the rest of the theme.
   Go to Appearance -> Customize and set the following options:
   1. Site Identity: Set site logo and favicon.
   2. Content Options: Enable author bio on a single post.
   3. Theme Settings:
      • Blog layout: Set blog layout to standard.
      • Shop layout: Set it to 4 columns, and enable Show a product’s tag above its title.
      • Slider: Set it to full-width.
   4. WooCommerce:
      • Store Notice: Enter your notice if needed – you can use HTML to style text.
      • Shop Header Settings: Enable both – My Account and Saved items, and Mini Cart.

Techne WordPress theme documentation, step 4: The Customizer

The Customizer in the Techne WordPress theme documentation is a great WordPress feature that allows you to customize the theme and set theme options. Customization options available in the Customizer:

1. Site Identity
2. Header Media
3. Background Image
4. Menus
5. Content Options
6. Widgets
7. Homepage Settings
8. Theme Settings
9. Color Settings
10. Footer Settings
11. WooCommerce
12. Font Settings
13. Additional CSS

Site Identity

Site Identity allows you to set your site logo, title, tagline, and icon. The site title is the name of your site and it’s displayed in the header, where the logo is displayed, as well. The tagline is a short description or your motto, and it’s displayed just under the title.

1. Logo: For logo set JPG, JPEG, or PNG image.
2. Logo Size: Moving slider to the left or right will increase or decrease logo size. Changes in logo size will be displayed in the preview panel.
3. Site title: Name of your site. The site title is displayed only if the logo is not set.
4. Tagline: Site punchline. The tagline will be displayed together with the logo or site title.
5. Display Site Title and Tagline: If enabled, both title and tagline will be displayed in the header.
6. Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square and at least 512px wide and tall.

Header Media

Header media in the Techne WordPress theme documentation is the default section that allows the upload of the video in the header.

1. Header Video: Upload your video in .mp4 format and minimize its file size for the best results.
2. YouTube URL: Instead of uploading a video, you can paste a YouTube URL.
3. Header Image: Click the “Add new image” to upload an image file from your computer. Your theme works best with an image that matches the size of your video — you’ll be able to crop your image once you upload it for a perfect fit.
4. Title: Title that will be displayed before the video starts playing.
5. Title Color: Color of title.
6. Text: Enter the short text that will be displayed with the title.
7. Text Color: Color of text in the header.

Background Image

Depending on the use case, some users need to set a background image on the site. In the Background Image panel, you can set a background image. After choosing an image, you will be able to set background behavior.

1. Preset: Defines image size – Fill Screen will stretch the image to fill the whole site, Fit to the screen will cover the only visible part of the site, and Repeat will keep original image proportions, but it will repeat the image. Custom allows you to set background parameters manually.
2. Image Positions: Tool used to define what is the starting position for the image.
3. Scroll with Page: Option available only if the background image is set to Repeat. If checked, the background will scroll together with the page content.

Menus

This option allows you to manage created menus quickly. You can select what menu will be displayed as Primary Menu or Social Menu. If you need to manage actual menu items, you can do that in Appearance -> Menu.

Content Options

Content Options in the Techne WordPress theme documentation allows you to turn on or off author bio on the single post page.

Widgets

Widgets section allows you to manage widgets in the widget areas quickly. This option allows you the same possibility as the Widgets option in the WordPress admin panel.

Homepage Settings

This option works the same way as Settings -> Reading. It allows you to set them to read the latest post or to use static pages for landing and blog pages.

Theme Settings

In the Theme Settings panel in the Techne WordPress theme documentation can be set layout options for the Blog, Shop, and Slider. The Blog can be set to display posts in a standard grid or in the shuffle – posts are displayed scattered around.

Color Settings

Theme colors are used to add a personal, artistic touch to the site. Lines color setting controls the color of lines on the homepage. The background color will define background color on the whole site, while other options are used for text color on the site.

WooCommerce

WooCommerce panel in the Techne WordPress theme documentation keeps settings specific for the Shop – layout, what products and categories will be displayed, and theme-specific image sizes for the Shop.

1. Store Notice
2. Product Catalog
3. Product Images
4. Checkout

Store Notice

Store notices will appear at the bottom of your site. It’s used to display important information – e.g. delays in shipping, or discount, promotions, etc. You can use HTML elements to style the notice.

Product Catalog

Product catalog defines how WooCommerce pages – main store page and product category pages will display products, how many and in what layout.

1. Shop page display: Choose what to display on the main shop page – products, categories, or both.
2. Category display: Choose what to display on product category pages – products, subcategories, or both.
3. Default product sorting: Defines what parameter will be used for default product sorting.

Product Images

Settings related to the image width on the Shop and single product page.

1. Main image width: Main product image width, which will be used on a single product page.
2. Thumbnail width: Width for the main product image on the shop page.
3. Thumbnail cropping: How thumbnail will be cropped. There are three settings: 1:1 – the image will be cropped proportionally based on original dimensions; Custom – depending on the input value, cropping will use that proportion; uncropped – image will be scaled down.

Checkout

The checkout section in the Techne WordPress theme documentation contains settings related to the Checkout page. Here you can customize what optional fields are displayed and if they are required, and you can configure Privacy policy and Terms and Conditions pages and notices.

Footer Settings

Footer Settings have only text area. Add text to the footer copyright area. HTML elements can be used for formating.

Font Settings

The Font Settings panel in the Techne WordPress theme documentation is displayed only if the Kirki Framework plugin is installed and active. Font Settings are used to set font families and weights for global text elements 一 content, headings, and navigation. Available fonts are from Google Fonts but without extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Additional CSS

Additional CSS section is used for custom CSS classes, without interfering with theme original CSS files or creating a child theme. These classes are always loaded first, before other stylesheets. In the Useful CSS Classes section, you can find some most used classes.

Techne WordPress theme documentation, step 5: Useful CSS Classes