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 add a category and/or tag to the post if you so desire, from the respective panels. Publish the post by clicking Publish. From the Post Options meta box below the main text editor you can toggle the appearance of the post’s featured image on the single view.

2) Adding Services

To add new Service item go to Service > 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. You can also toggle the appearance of the item’s featured image on the single view. 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 in any text you have for the portfolio item and move to the Project Options panel below. 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. You can also toggle the appearance of the item’s featured image on the single view.

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 it’s featured image, add the content and finally publish the item. From the DIY Project Options meta box you can toggle the appearance of the item’s featured image on the single view.

6) Adding FAQs

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

7) Customizing the appearance

All theme customization is done via 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:

struct-customizer

TIP: Any changes you make in the tabs below will be previewed live on the site which appears in right side of the 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 see the button 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 that, the button should be clickable again.

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

Header Image

You can set a background color or image for the theme’s header.

Menus

You can create and assign menus to the theme. The theme features one menu location, the main menu one. 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

Are you looking 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 allows you to modify the colors of various sidebar elements to complete your custom color scheme.

Social Networks

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

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

DIY Options

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

You can 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, in order to 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. You can use it 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.

struct-diy-listing-options

FAQs

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.

struct-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.

struct-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.

struct-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.

struct-team-listing-options

The Contact page

To create a contact page similar to the one found on the theme’s demo, create a new page. Name it Contact and use the Contact Form 7 plugin to help you create a contact form. Then 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.

struct-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.

struct-widgets-slider

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.

struct-widgets-slider-add-item

Next 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.

struct-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.

struct-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 as not available/included in the package.

struct-widgets-pricing-table-features

Theme – Technical Documentation

This widget helps you create a list with 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.

struct-widgets-technical-documentation

Theme – Contact

This widget helps you create a contact box with a map and various info you might want to add. Paste in the iframe embed code for the map and then using the Add item button fill in all the required information.

struct-widgets-contact

Theme – Opening Hours

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

struct-widgets-opening-hours

Theme – Post Type Items

This widget allows you 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 info from on the Post type drop down and select the layout you want for these items from the Item appearance drop down (different layouts are available for different post types to help optimally deliver information). Set the desired text alignment and add your items using the Add item button. Save your widget and you are done.

struct-widgets-post-type-items

Customize the widget’s appearance

At the bottom of the Homepage widgets you have a blue button titled Customize. Clicking it will give you access to the widget customization panel.

struct-widgets-customize-appearance

Here you can modify text & background colors, add a background image, set its repeat pattern and add extra padding if you need your widgets further spaced out.

Recreating the demo homepage layout

The entire front page template can have multiple widgets placed to provide you with maximum flexibility. Below you have 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 an item by selecting “Remove me”. The slider also supports videos from WordPress compatible video hosts.
  • Theme – Custom content: this widget lets you display custom content on your front page.
  • 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 services with the Image – Title – Text layout.
  • Theme – Clients: here we display four logos of our clients.
  • Theme – Video: here we display a YouTube video.
  • Theme – Post type items: here we display four services with the Icon Centered layout.
  • Theme – Pricing table: we used this widget to create a four column pricing table.
  • Theme – Custom content: another bit of custom content.
  • Theme – Video: here we display another YouTube video.
  • Theme – Post type items: here we display four more services with the Image – Title – Text – Button layout.

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 a page which 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 Struct are:

  • Post thumbnail: 555×350px
  • Featured image: 848×450px
  • Fullwidth thumbnails: 1140×450px
  • Custom content thumbnails: 720×430px
  • Slider thumbnails: 1920×900px
  • Client logos: 80px in height, not restricted in width.