Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > Add New, title your post and enter the content in the editor. Upload a featured image by clicking Set featured image on the Featured Image panel and add a category and/or tag to the post if you want. Publish the post by clicking Publish.

2) Adding Services

To add new Service item go to Services > Add New and fill in the title, content and featured image. Next, in the Service Options metabox set an image for the service by following the on screen instructions. Finally publish the item.

3) Adding Project items

To add a new portfolio item go to Projects > Add New. Set a featured image from the panel on the right, fill it with the text you have for the portfolio item and move to the Project Options panel below.  From here you can add project Information and toggle the appearance of the featured image in single project view.

4) Adding Team Members

To add a team member go to Team > Add New, set a title for it (the person’s name) and upload a featured image. Then in the Member Options panel fill in the team member’s social profiles by following the on screen instructions.

5) Adding DIY Projects

To add a new DIY Project item go to DIY Projects > Add New. Fill in a title for the project, set its featured image, add the content and finally publish the item.

6) Adding FAQs

To add a new FAQ item go to FAQs > Add New. Fill in a title for the item, set its featured image, add your content and finally publish it.

7) Customizing the appearance

All theme customization is done via the WordPress’s built in Customizer. If you haven’t used it or want to learn more about it, please consult this article.

Go to Appearance > Customize and you will see this:

technico-customizer

TIP: Any changes you make in the tabs below will be previewed live on the website that appears in the right side of your screen. However to save these changes you need to click the Save & Publish button on the top of the bar. If you have made a change but the button is grayed out (for example changed the font size of a heading), move the cursor outside the input box, to the next input box. After doing so the button should be clickable again.

Let’s take a look at the options each tab gives you.

Header Options

Here you can set the business address & phone number that will appear on the header. You can also toggle the appearance of social icons.

Menus

From here you can create and assign menus to the theme. The theme features one menu location, the main menu. To learn more about menu creation check out the Codex’s menu user guide.

Site Identity

In this tab you can modify the site’s title, tagline, logo and site icon.

Layout Options

From here you can modify the length of the automatic excerpt and select between numbered and older/newer pagination.

Typography Options

Through this tab you can control the font size of key theme elements, such as headings, body and widgets.

Content Colors

Do you want to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.
color-picker

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features ten sidebars, the blog, pages, two homepage sidebars, an e-shop sidebar, the pre-footer Instagram one and four footer sidebars.

Sidebar Colors

This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

Social Networks

From here, you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

Posts Options

From here, you can toggle various aspects of the single post and posts listing, like the appearance of categories, date, comments and featured images.

DIY Options

From here, you can toggle various aspects of the DIY post and DIY posts listing, like the appearance of categories, date, comments and featured images.

Footer Options

It allows you to modify the credits text and toggle the back to top button.

Static Front Page

Use this tab to make the Home page your static front page, so you can take advantage of the homepage template we have created for you.

Titles

In this tab you can change the titles for various theme pages, like the blog, DIY, search and 404.

Other

In this tab we have the Custom CSS panel which you can use to insert styles for elements not covered by the rest of the tabs. Also from here you can set the Google Analytics ID to get statistics on your site.

Theme pages

The Home page

To set up the homepage create a page named Home and set to it the Homepage Template from the Page Attributes drop down on the right. To add content to your front page go to Customize > Widgets or Appearance > Widgets and use the theme’s widgets to help you display your content.

Custom post type listing pages

In order to display your custom post types, you will need to create a listing page fore each one.

DIY Projects

Create a page to list your DIY projects and apply to it the DIY Listing template from the page attributes drop down.

If you want to create a listing page for one particular FAQ category you can select it from the DIY Listing Options metabox below.
technico-diy-listing-options

FAQ

Create a page to list your FAQs and apply to it the FAQ Listing template from the page attributes drop down.

If you want to create a listing page for one particular FAQ category you can select it from the FAQ Listing Options metabox below.
technico-faq-listing-options

Projects

Create a new page and apply to it the Projects Listing template from the page attributes drop down.

In the Project Listing Options metabox you can select a base category if you want to only display a particular one on the listing page. Select the Listing & Article layout you like and finally set the number of items that will appear per page.
technico-project-listing-options

Services

Create a new page and apply to it the Services Listing template from the page attributes drop down.

In the Service Listing Options metabox you can select a base category if you want to only display a particular one on the listing page. Select the Listing & Article layout you like and finally set the number of items that will appear per page.

technico-service-listing-options

Team Listing

Create a new page and apply to it the Team Listing template from the page attributes drop down.

In the Team Listing Options metabox you can select a base category if you want to only display a particular one on the listing page. Select the Listing layout you like and finally set the number of items that will appear per page.

technico-team-listing-options

Contact

To create a contact page similar to the one found on the theme demo, create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form. Paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

Several custom widgets are available to help you better display your content. You will find them under Customize > Widgets or Appearance > Widgets.

technico-widgets

Below each widget you will find a small description regarding its functionality. Additionally each widget provides you with some info about its usage. Please read the small text found on the widget once it’s added on the sidebar. Widgets that are custom built to be used on the homepage have the Homepage widget marking on the description.

Theme – Slider

This widget will help you create slider items. Add the widget to the Homepage sidebar, select the slideshow speed and toggle the automatic slide functionality. Press the Add Item button to add your first slide.

technico-widgets-slider-add-item

Fill in all the required information, like title, subtitle, button text and button URL and click the Select Image button to upload the slider image.

technico-widgets-slider

Click the Add Item again to add another slide, continue as mentioned and when you are done click the save button.

Theme – Custom Content

This widget is built to help you add content to your front page, whether it is an introductory text, a biography or any other text you might want to include. Its functionality is pretty straight forward. You add the widget to the homepage sidebar, fill in all the info you need, click the Select Image button to upload an image (optional) and save the widget.

technico-widgets-custom-content

Theme – Pricing Table

To create a pricing table, add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button

technico-widgets-pricing-table

Set up the pricing item by filling all related information. Marking the item as featured will make it appear emphasized with a border surrounding it. You can add up to eight features for each pricing item. Placing a dash or minus sign before the text will display it  respectively as not available or included in the package.

technico-widgets-pricing-table-features

Theme – Technical documentation

technico-widgets-technical-documentation

By using this widget you can create a list of downloadable files, such as manuals, guides etc. Just fill in the title and use the Add item button to add items. Fill in the required info and save the widget.

Theme – Contact

technico-widgets-contact

Using this widget you can create a contact box with a map and the information you desire. Paste in the iframe embed code for the map and then using the Add item button fill in all the required information.

Theme – Opening Hours

technico-widgets-opening-hours

Display your business’ timetable using this widget. Click the Add item button to add a new schedule section, as displayed above.

Theme – Post Type Items

technico-widgets-post-type-items

Using this widget you are able to display your content on any widget area, whether it is a standard post, a project, a team member etc. Just select the post type you want to pull information from on the Post type drop down. Select the layout you want for these items from the Item appearance drop down (different layouts are available for different post types). Set the desired text alignment and add your items using the Add item button. Save your widget and you are done.

Recreating the demo homepage layout

The entire front page template can have multiple widgets in order to provide you with maximum flexibility. Below you have a list containing the widgets used on the demo’s home page.

  • Theme – Slider: This widget creates the slider. Add multiple items by pressing the “Add Item” button. Remove any item by selecting “Remove me”. The slider also supports videos from WordPress compatible video hosts.
  • Theme – Post type items: Here we display four services with the Icon centered – Button layout.
  • Theme – Custom content: Using this widget you can display custom content on your front page.
  • Theme – Post type items: Here we display four team members with the Social layout.
  • Theme – Custom content: Another bit of custom content.
  • Theme – Pricing table: We used this widget to create a four column pricing table.
  • Theme – Clients: Here we display four logos of our clients.
  • Theme – Testimonials: This widget will help you display testimonials from your customers. On the demo we have three testimonials visible.
  • Theme – Post type items: Here we display three DIY items with the Image – Title – Date – Text – Button layout.
  • Theme – Custom content: Finally we have yet another bit of custom content.

Additional Information

Useful Plugins

  • Contact Form 7: Use this plugin to create a contact form, then copy the shortcode it gives you and paste it in to the page that will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress JetPack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.

Image Sizes

The minimum recommended image sizes for Technico are:

  • Post thumbnail: 555×350px
  • Featured image: 848×450px
  • Fullwidth thumbnails: 1140×450px
  • Testimonial thumbnails: 60×60px
  • Slider thumbnails: 1920×700px
  • Client logos: 80px in height, not restricted in width.