Documentation for Technico

ATTENTION: This documentation is about the Ignition Framework-based version of Technico. If you are using the legacy version please visit its documentation page here.

Server Requirements

If you already have WordPress installed, it means that you meet the minimum server requirements and you can install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:

  • PHP version 7.4 or greater.
  • MySQL version 5.6 or greater or MariaDB version 10.1 or greater.
  • HTTPS support.

Prerequisites

Ignition Framework

This theme requires our free Ignition framework plugin to be installed. To get your copy visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard → Plugins → Add new and Activate it.

It really doesn’t matter if you install the theme or the plugin first. Just make sure you have both of them installed and activated.

Optional plugins

GutenBee

GutenBee is a collection of elegant WordPress blocks enhancing your editing experience in the block editor and vastly extending the potential of the new editor.

If you want to replicate the theme’s demo you need to install it. Simply visit Plugins → Add new and search for “GutenBee”. Click on Install Now and then Activate it.

WooCommerce

Technico offers WooCommerce support out-of-the-box. The theme’s sample content includes both products and the necessary WooCommerce pages to help you get started.
If you don’t have WooCommerce active you might get some warnings from One Click Import plugin, you can safely ignore them.

Contact Form 7

Contact Form 7 is a popular contact form plugin, installing it will ensure the contact form will appear when importing sample content, however you can use any other contact form plugin instead.

Theme installation

Here is a quick video guide to install Technico and the Ignition Framework:

[DEMO VIDEO HERE]

Installing the theme is a very simple process. Go to your WordPress dashboard → Appearance → Themes → Add new and upload the zip file. Once uploaded just click on the Activate button. That’s it! You can now start creating pages.

Have a look at our WordPress theme installation guide here.

How to import the sample content

If you like what you see in our demo website you can simply import the sample content. This means that a close approximation of our demo website will be imported in your WordPress installation. Now all you have to do is simply replace the content of these pages with yours.

Please check this video guide first:

[SAMPLE IMPORT VIDEO HERE]

  • In your WordPress dashboard visit Appearance → Theme Options → Sample Content.
  • Click Install and then Activate for each of the required plugins.
  • Click the Get Started button and in the next screen the Import Demo Data button.

Please note: Due to the nature of the import mechanism some links may link back to our demo website. If you are not sure how to update / change these links simply get in touch and we’ll help you out.

Image sizes

Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:

  • Main post thumbnail: 870x580px
  • Item: 615x410px
  • Large Item: 1170x780px
  • Article Media 510x510px
  • Mini-cart items 160x160px
Please note: If for any reason you want to change the dimensions of any of the predefined image sizes you have to use a plugin. Please refer to this guide regarding the process.
Please note: All image sizes are the minimum recommended, adding larger image sizes will result in cropping them to fit.

Setting up the global sections of your website

A good place to start when creating a new site is with sections that are common throughout the site and stay relatively unchanged as time passes, like the header and footer.

The theme’s header can be broken down to three main components, the Top Bar, the Logo area and the Main Menu. Below we’ll take a look at each one.

Navigate to Appearance → Customize in your dashboard or click the Customize button on the WordPress admin bar to access the theme’s customization options.

Top Bar

The Top Bar section offers 3 content areas which can host text, HTML or one of the theme’s custom shortcodes. Please refer to the shortcodes section below for more information. Furthermore, here you can modify the top bar’s background, text and border colors.

Under the Site Identity section you can upload your site’s main and alternative logos. The alternative logo will be used when the header is set to transparent under Header → Layout → Header Type. The recommended maximum width of your logo is 200px, height is not restricted.

To create your main menu navigate to the Menus tab in the Customizer and click on the Create New Menu button. Give it a name and check the Main Menu location for it to appear in. Click next to start adding your items and once done click Publish to save your changes.

We recommend you check out this deeper dive in WordPress menus if you have never worked with them before.

To create the button-like menu item you see on the theme’s demo you need to apply a custom class to it. To do that navigate to Appearance → Menus, next enable the CSS Classes section from Screen Options and add the nav-button class to the menu item of your choosing. For more info please check out this article.

This is a predefined class you can use to create menu buttons.

Page Title section

The page title section is common across all posts and pages and can be customized under the Page Title tab. The section’s height, content and its alignment, its colors and background image and finally the site’s breadcrumbs can be controlled from here.

The page title section’s background image can be overridden on each post or page if desired. When editing a post or page, in the right hand sidebar you will find a Page Title Image section where you can upload a background image to display instead of the default one.

Please note: The purpose of the Transparent header option is to have your main header components (Top bar, Logo & Main Menu) on top of a background image or background color which means that you have to set on in the Customize → Page title → Color section.

General Site Options

Global site options can be modified under the Site Options panel.

Under the Layout tab you can modify the site & blog’s layout, configure the overall content width and fine tune the content/sidebar column ratio.

Under the Colors tab you can fine tune the theme’s main colors scheme and set a background image.

Finally under the Typography tab you can customize the site’s font pairing by choosing among a huge selection of Google Fonts. Google Fonts can be disabled entirely if so desired.

The theme’s footer is split into two main areas,the widgetized one with a four column layout, which can be populated under the Widgets section in the Customizer, or under Apperance → Widgets, and the bottom bar which houses the copyright information. Under the Footer tab in the Customizer you can set a background color and image to the footer and modify its colors. Additionally you can add content to the two content areas of the bottom bar, this can be plain text, HTML or any of the theme’s shortcodes.

You can toggle the theme’s Lightbox under Appearance → Utilities → Lightbox

Weather

The theme comes with built in OpenWeatherMap integration. You can display weather information using the appropriate shortcode anywhere on your site. The weather can be set up under Utilities → Weather. You can get the required API key here.

Custom Post Types

Creating a new Portfolio post

Create a new Portfolio item under Portfolio→Add New. Under the Document tab on the right hand sidebar you can control some of the post’s basic attributes. These are:

  • Featured image: Will appear on all related listings and on the item’s single page.
  • Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
  • Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
  • Post Attributes: Control the location and appearance of the sidebar.
  • Page title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
  • Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.

Create a navigation menu for Portfolio items

Create a new menu under Customize →Menus, don’t set any location to it and add your portfolio posts as menu items. If custom post types don’t appear when trying to add them to the menu you can enable them under Screen Options.

Under the Widgets panel in the Customizer add a Custom menu widget in the Portfolio sidebar and select the portfolio menu you have just created for it.

Creating a new Service post

Create a new Service item under Services→Add New. Under the Document tab on the right hand sidebar you can control some of the post’s basic attributes. These are:

  • Featured image: Will appear on all related listings and on the item’s single page.
  • Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
  • Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
  • Post Attributes: Control the location and appearance of the sidebar.
  • Page title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
  • Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.

Creating a new Team Member post

Create a new Team item under Team→Add New. Under the Document tab on the right hand sidebar you can control some of the post’s basic attributes. These are:

  • Featured image: Will appear on all related listings and on the item’s single page.
  • Categories: Set a category for the item which will also serve as a filter on the post type’s listing pages.
  • Excerpt: Add a manual excerpt that will appear on post listings and on the page title section as a subtitle (if applicable).
  • Post Attributes: Control the location and appearance of the sidebar.
  • Page title image: Set a custom post title background image for the item. Leave blank if you want to keep the default settings configured earlier.
  • Page Settings: Here you can fine tune the item’s appearance. E.g. toggle the featured image, change header type, hide the page title/subtitle, breadcrumbs etc.

Setting up the pages

Homepage

Create a new page under Pages→Add New, then select from the right side under Page Attributes the Full width template. From Page Settings check the Remove top/bottom content padding and set all options (apart from Header Type) to hide.

Now let’s take a look at the blocks that build our content.

The homepage main hero section features a GutenBee Container block with two columns and a background image set under Block Attributes. In the left column we have a GutenBee Heading, a GutenBee Paragraph and a GutenBee Button. The right column is empty.

The homepage services section consists of a GutenBee Container with a single full width column, the content in the column is centered horizontally. Inside it we have a GutenBee Heading and a GutenBee Paragraph. Next there is another GutenBee Container with three columns. Each column hosts a GutenBee Image Box. Closing the section is a GutenBee Button.

The demo’s homepage features two inner hero sections which consist of a GutenBee Container with a single full width column and center aligned content. Inside we have  a GutenBee Heading, a GutenBee Paragraph and a GutenBee Button.

The team section starts again with a GutenBee Container with a single column and centered content. Inside we have a GutenBee Heading, a GutenBee Paragraph and the GutenBee Post Types block. The Post Types block has the Team post type selected and displays three items in a three column layout.​

To create the pricing section we start with a GutenBee Spacer just after the second inner hero section. After that we add a GutenBee Heading, a GutenBee Paragraph and a GutenBee Container with three columns. In each column we have a GutenBee Banner block with a 4px border and 20px padding. In the banner block we have a GutenBee Heading, A GutenBee Paragraph, another GutenBee Heading for the price, a GutenBee Icon list and we close up the column with a GutenBee Button. To make a column pop-out change the color of the border and apply some more padding to its banner.

The clients section starts again with a GutenBee Container with a single column and centered content. Inside we have the usual heading and paragraph blocks. Next is another GutenBee Container with four columns. Each column contains a GutenBee Image block with the logo of each client.

The testimonials section starts again with a GutenBee Container with a single column and centered content. Inside we have the usual heading and paragraph blocks. Next is another GutenBee Container with three columns. Each column contains a GutenBee Testimonial block with a left positioned avatar.

The DIY section is identical with the Meet The Team one, with the difference that the GutenBee Post Types block is set to display posts.

Finally the call to action section is the same as the two inner hero sections without the GutenBee Paragraph block.

Creating Portfolio, Team and Services Pages

[POST LISTINGS VIDEO HERE]

To create a post listing page start by creating a new page under Pages→Add New. Set the page template under Page Attributes section to Full width boxed.

Next add a GutenBee Post Types block to the page and select the post type you wish to display posts from. Select the default or Overlay style depending on how you want your items to appear. Select how many items you want to display and toggle the pagination if desired. Finally you can select the number of columns of the post grid and enable category filters.

Overview page

Create a new page under Pages→Add New and set the page template under Page Attributes section to Full width boxed.

The page starts with a GutenBee Heading and a GutenBee Paragraph block. Then we have a GutenBee Container with a yellow border and a background image set under Block Attibutes. Inside we have two columns, the right one houses another heading and the left one some content in the form of a paragraph block.

The alternating timeline layout is created by a GutenBee Container with a single column. In it we find another GutenBee Container with a two column layout. The left column contains a GutenBee Paragraph and a GutenBee Image Box block and the right column is left empty. This pattern repeats only each time the opposite column is empty, so for the second timeline item the left column will be empty for the third again the right etc.

The team section consists of a GutenBee Heading, a GutenBee Paragraph and a GutenBee Post Types block which displays the Team post type.

Finally the hiring section consists of a GutenBee Heading, a GutenBee Paragraph, a core table block and a GutenBee Button.

FAQ page

Create a new page under Pages→Add New and set the page template under Page Attributes section to Full width boxed.

The FAQ page consists of three GutenBee Containers. Each container has two columns. The left column houses a GutenBee Heading with the FAQ section title and the right column a GutenBee Accordion block. After each container we have a GutenBee Divider block to provide some visual separation.

Contact page

Create a new page under Pages→Add New and set the page template under Page Attributes section to Full width.

The contact page starts with a GutenBee Google Maps block. Next we have a GutenBee Container block with the Theme Grid option enabled. Inside we have two columns. The left column houses four GutenBee Icon Boxes and the right one has a shortcode block containing the contact form shortcode from your preferred contact form plugin.

Shortcodes

[ignition-custom-menu name="your menu name"]

Create a Custom menu under Customize→Menus, then use this shortcode to display it in any location you want. Primarily used to display social icons in the top bar.

  • Create New Menu under Appearance→Customize→Menus.
  • To add a social media link to the menu click + Add Items.
  • Next select the Custom Links menu item type.
  • Add the address for one of your social media profiles in the URL field. For example, if the link to your Facebook profile is https://www.facebook.com/cssigniter, you would paste that into the URL field.
  • Enter a name for the social media profile in the Link Text field. Once you’re ready click Add to Menu.
  • Repeat the above steps until all the social media profiles you wish to use have been added to the menu.
  • Finally click Publish.
[ignition-site-search]

Simple site search field, you can use it under any content area in the Customizer.

[ignition-date]

Supported attributes are:

  • format (optional): The date format, by default follows the one set under Settings → General.

Use this shortcode in any Customizer content area to display today’s date.

[ignition-current-weather id="your-location-id(optional)"]

Supported attributes are:

  • id (optional): The id of the location to display the weather from, default is the one set under the Customizer Weather options.
  • units (optional): C or F units to display.

This will display the weather inside any content area in the Customizer. You will need to setup the API first from Customize→Utilities→Weather. The location ID number can be found by visiting OpenWeatherMap.org and searching for your city. Leave this blank and the default ID from Customize→Utilities→Weather will appear.

[ignition-minicart-button]

This shortcode will display the minicart. Use it under Customize→Top Bar in any content field you wish.

[ignition-language-switcher]

Supported attributes are:

  • display (optional): accepted values are flags, text or both
  • type (optional): accepted values are dropdown or menu
  • untranslated (optional): accepted values are hide or home

We support WPML and Polylang. You can either use their default language switcher or our shortcode.

For more information regarding the shortcodes of the Ignition Framework have a look at this article.

Page templates

The theme provides several page templates you can select from the Page Attributes metabox in the Page sidebar. Depending on your scenario you can select:

  • Default template: This is the main template, you can start building anything using this one.
  • Content / Sidebar: This page will always have the sidebar on the right (Same as default page template).
  • Sidebar / Content: This page will have the sidebar always on the left.
  • Full width: This will make your page Full width, covering the entire width of the screen.
  • Full width boxed: This will have the page Full width but inside the container scope. You can control the scope from CustomizeSite OptionsLayout options.
  • Full width narrow: This is the same as Full width boxed, but it will add some padding making the content area a bit narrower.

All pages have a generic set of options. These can be changed under the Page Settings section when editing each page.

  1. Remove top/bottom content padding: This will toggle the padding added before and after the content. (After the header and before the footer)
  2. Disable featured image for this Page: You can choose to hide the featured image in this single page. The featured image will still appear on listing pages.
  3. Header Type: Select transparent or opaque header type. You can control the color settings for the normal and transparent one from CustomizeHeaderColors
  4. Show Page Title with Background: This will toggle the appearance of the hero section with the page title and a background.
  5. Show Normal Page Title: Show or hide the normal page title.
  6. Show Normal Page Subtitle: Show or hide the normal page subtitle (if any).
  7. Show Breadcrumbs: Show or hide breadcrumbs for this page.

All settings are inherited from the Customizer. You can configure the global settings there and modify certain pages to appear different.

WooCommerce

This theme supports WooCommerce which allows you to easily convert your site to an online store.

Having WooCommerce installed is not mandatory to use the theme.

Shop page

Assign a Shop page

Before any other step you will need to create a new page under Pages→Add new and then set it as your Shop page.

Customize the Shop page

You can control the Shop listing page and product categories under Customize→WooCommerce→Product Catalog. Here you can select whether you want to show categories as items in your shop and product category pages as well as the number of rows and columns for each page.

You can also set a secondary image to appear when hovering over your products. The first – default one will be the featured image, while the second will be the first image in your product gallery.

Finally you can also modify the shop layout to have a sidebar and the position of that sidebar in relation to the content.

Single product

You can hide or show the related product section under Customize→Woocommerce→Single Product. Here you can also control the number or up-sells and related products you want to display.

Blog page

This is you main blog page. You can create a new page and set it as your blog page under Settings→Reading. You can customize it under Customize→Blog→Archives.

Widget areas

The theme provides special widget areas for your Blog posts and archives, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages or posts or products.

Support

If you need help during the initial installation and setup of this theme feel free to get in touch and we will get back to you within 24 hours to help.

Theme installation service

If time is of the essence we offer a theme installation service for a one-off low fee of $69. Contact us here

Use the coupon code SAVE20 and save 20% OFF!Buy Now