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.

TIP: A more visual guide can be found here.

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.

Image Sizes

The minimum recommended image sizes for Struct are:

  • Post thumbnail: 555x350px
  • Featured image: 848x450px
  • Fullwidth thumbnails: 1140x450px
  • Custom content thumbnails: 720x430px
  • Slider thumbnails: 1920x900px
  • Client logos: 80px in height, not restricted in width.

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

Importing sample content

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Struct by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the struct_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, 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 and 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 you can 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 read this article.

Go to Appearance > Customize and you will see this

customizer_struct

 

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, for example, to the next input box, then the button should be clickable again.

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

  • Header Image

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

  • Menus

    Here 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 here.

  • Site Identity

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

  • Layout Options

    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_change
  • 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

    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

    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

    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

    Here 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 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 host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Also 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.

diy_listing

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.

faq-listing

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.

project-listing

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.

service-listing

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.

team-listing

The contact page

To create a contact page similar to the one found on the theme’s demo, you can 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

We have handcrafted twelve custom widgets 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 on each 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 and press the Add Item button to add your first slide.

slider_1

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.

slider_2

Next click the Add Item again to add another slide, continue as needed and once 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 bio 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.

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

Pricing_1

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 8 features for each pricing item, placing a dash or minus sign before the text will display it as not available/included in the package.

Pricing_2

Theme – Technical documentation

technical_doc_widget

Using this widget you can 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.

Theme – Contact

theme_contact

Using this widget you can create a contact box with a map and any info 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

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

post_type_items

Using this widget you are able to display your content on any widgetized 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, 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.

Customize the widget’s appearance.

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

widget_customize

 

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

Recreating the demo’s homepage layout

The entire front page template is widgetized to provide you with maximum flexibility. Below we list the widgets used on the demo’s home page.

  • Theme – Slider: This widget creates the slider. Add as many items as you want by pressing the “Add Item” button. Remove any item by selecting “Remove me”. The slider also supports videos from WordPress compatible video hosts.
  • Theme – Custom content: Using this widget you can 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 Centeredlayout.
  • 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.

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 the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums