logo

Skinny Theme Documentation

How to quickly setup and use this theme.

In order to install the theme, you have two options:

  1. In the downloaded .zip file go in the /theme folder and upload the Skinny sub-folder contained in it to http://yourdomain.com/wp-content/themes/ directory via any FTP program.

  2. Take the .zip found in the theme folder and install it through the dashboard.
      In order to activate the Theme:
    • Log into your Wordpress admin using the following URL: http://yourdomain.com/ wp-login.php
    • Next, go to Appearance > Themes. Here, you should see a thumbnail of Skinny theme.
    • Click on the Activate link to activate this theme

You will be promted in the WordPress Dashboard to install theme required plugins. Follow the prompts to install them.


Required Plugins

  • ACF Pro

Optional (but Recommended) Plugins

  • Contact Form 7
  • WooCommerce
  • SVI Plugin
customize

Demo content has been included in your download to make it easier to set up the theme. It is of course completely optional.

Go to Tools/Import and install the WordPress importer plugin. You can then use it to upload the included demo.xml file.


Note: - Make sure you have installed the required plugins before importing the demo content.

customize

This theme features advanced customization features with live preview. Click on 'appearance/customize' to open the customizer.

Colors

Highlight colors of the theme can be set.

You can also select the color of the main navigation/menu bar. The default setting uses a '*smart' navigation. It will change colors depending on the section background. You can set this in the 'page-builder' sections.

Note: - See more on this in page builder section.

Logos

You can upload a header logo.

There is also an option to select a second log for better visibility on a light background. The logos are automatically switched/displayed depending on the background colour of the navigation bar.

Header Image

Set a sitewide custom header image. The header image is shown on pages using the 'default' template

Note: - You can overide the header image on individual pages (featured image).

Social Links

Add your social links. Any fields with values entered will automatically display the social icon in the footer on the frontend.

homepage

    Homepage

  1. Create a new page using the homepage template (If you imported the demo content, you can skip this step)
  2. Go to 'appearance/customize' and select the 'Static Front Page' tab. Set the 'Front page'.

    Blog Page

  1. Create a new page using the default template and enter your title/subtitle. Leave the rest of the page blank.
  2. Go to 'appearance/customize' and select the 'Static Front Page' tab. Set the 'Posts page'.


Note: - To set the same page as your homepage and main posts page, simply set the "Posts Page" to your desired page and leave the "Front Page" selection as the default -select-.

sidebar

You can add widgets to the sidebar in Appearance > Widgets.

Note: - The footer contains two widget sections. The main footer - 'Footer1' (3 columms) and 'Footer2' wich is the right column. There is also a separate 'Shop' archive page sidebar.

posts format

The Skinny theme supports several post formats. You can select 'gallery', 'video' or standard post format from the radio list on the right.

When you click the desired post format the post entry fields will change.

Gallery Format

This format adds an image slider to your post.

Standard Format

This is a regular post. You can anter a 'featured image' to display above the post.

pagebuilder page-poi

This theme includes intuitive 'page builder' sections which allow you to quickly layout pages.

When you create a new page you will notice the 'layout' section. Simply click on the 'add row' button from the bottom right to pull up the sections menu. Simply select the section you would like to add.


Note: - The 'editor'section pulls up the main WordPress content editor.

Note: - Drag & Drop sections to reorder them. Or hover over the right edge to delete them.

Slider Section

The Slider Section adds a 'full-page' slider to the page.

Note: - The 'Slider Section' can be used with the 'Blank Template' to use the slider as the first section on the page.

Split Banner

This is likely the section you will use the most as it is very versatile. This section adds a section with half text and half image

Note: - You can also add 'Points of Interest' or 'POI' to your image.

pagebuilder-splitbanner

When adding POI over the image you can position them by entering the distance % from the top and left edges respectively.

Select a POI page to open when clicking on each POI.

Note: - Add POI pages by creating new pages using the 'POI Template'. All pages created using the POI Temlplate will be made avaiable for point of interest links.

forms

With Contact Form 7 plugin installed you can take advatage of Skinny theme's built in form options. Add the 'Contact Form' section to a page and you can select any forms you have created. Additionaly, you can add a map by entering the address under the 'Map' tab.

You can add a description underneath the map that will appear as a marker with a 'popup' on your website front-end.

map
featured

You can add custom header images to pages/posts by uploading a 'featured image'. If no featured image is added the page will use the default header image set in appearance/customize/header image.

Note: - header images are best at 1900px + wide.

contact

Add your social links in appearance/customize under the 'social' tab. Any links you have entered will be automatically added to the site footer.


woocommerce

If you want to turn Skinny into an eCommerce site simply add the WooCommerce plugin.

Color Swatch

In each product editor you can optionally add a color swatch.

Step 1.

Add your color variations using standard WooCommerce steps. variations

Step 2.

At the bottom of the product page set the 'Add Color Swatch' option to 'yes'. You can then create colors and simply use the Variation names you set above. * Make sute the variation names match (case sensitive). color-swatch

Note: - This requires the 'SVI plugin' which is packaged with the theme.

Page-Builder 'Product Images' Section

You can add product images to pages and link them directly to product variations. You can use this section to add any images with links but we will focus on product images. Let's say you have several colour variation of a product and you want to link the image to the 'Red' version. To get the variation link add the 'Red' variation to your cart. Go to your cart page and click on the product image. This will take you to the variation page. Simply copy the address url and voila you have the variation link.

product-images

You can create a child theme to add custom css. See more here.

The theme includes Linear icons which can be used in some page builder sections.

Reference Page


For additional support please visit the theme support forums here.

  • WordPress
  • Google Fonts
  • jQuery