WordPress Documentation

Introduction
Installation
Demo Content
Settings
Site Logo
Site Icon
Tagline
Social Media Icons
Widget Areas
Menus
Images
Shortcodes
Bulleted Lists
Headings
Pricing Table
Gallery
WooCommerce
Map
Contact Form
Google Fonts
Support

Introduction

Big Dot WordPress 2.0 has been designed to be fast, user friendly and highly customisable.
If you hadn’t done so already, download BD2.0 using the button below. You may also want to download the pure HTML & CSS version, as a good way to test customisation offline in a non-WordPress environment.

Download

Installation

  1. In the WordPress dashboard, go to ‘Appearance > Themes’ and click ‘Add New’ then ‘Upload Theme’ then ‘Chose File’
  2. Select the file big-dot-2-wordpress.zip, click ‘Open’ then ‘Install Now’
  3. Once installed, click ‘Activate’

Install Child Theme

A child themes allows you to make changes to the style.css and functions.php without them being overwritten if the theme is updated. Any other files from the main theme can be copied to here and modified too. More information on child themes.

  1. After installing the main theme, follow the same steps to install and activate the ‘big-dot-2-child.zip’ file.

Import Demo Content

It’s a good idea to start by importing the demo content.

  1. In the WordPress dashboard go to ‘Tools > Import’
  2. Select ‘WordPress’ from the bottom of the list and click ‘Install Now’
  3. Once installed, click ‘Activate Plugin & Run Importer’
  4. Click ‘Chose file’ and select ‘bigdot-demo-content.xml’ from the downloaded theme
  5. Click ‘Upload file and import’
  6. If you want to change the author of the blog posts, type in the name of a new author or select and existing author from the dropdown menu (optional)
  7. Check the ‘Download and import file attachments’ box and click ‘Submit’
  8. You may see some errors relating to post and product types. You can ignore these.

Settings

In the WordPress dashboard click on ‘Settings’

General

Here you can change the name of your site. The ‘Tagline’ will appear in the top bar of each page.

Reading

Permalinks

Select the ‘Post name’ radio button then click ‘Save Changes’ (optional)

Site Logo

You can upload a new site logo by going to 'Appearance > Customize > Site Identity'. It is recommended that you use a similar sized logo to the current one. Larger/smaller logos ay require a change to the style.css file.

Site Icon / Favicon

This can be changed by going to 'Appearance > Customize > Site Identity' and uploading a new file (recommended size 512x512px).

Tagline

This is pulled from the tagline for your site. You can change it by going to Appearance > Customize > Site Identity

Advanced Tip: The html for the tagline can be changed in the header.php file.

Social Media Icons

These are the four icons inside the header and footer of the site. As standard they represent Google+, Twitter, Facebook and LinkedIn. To change the URL for the icons, go to ‘Social Icons’ in the admin panel.

The social icons on the contact page can be changed by editing the page’s content.

Advanced Tip: The icons themselves can be changed or added to in the header.php file.

Widget Areas

The sidebar for the blog, WooCommerce (optional) and the two footer columns can be edited under ‘Appearance > Widgets’. You can add text and a wide range of plugins to these areas.

More information on Widgets.

Menus

Menus can be editing under ‘Appearance > Menus’.

Images

  1. To make images work responsively, give new images you insert the “normalimage” class. You can do this in the WordPress visual editor:
  2. Select image and clicking the pencil ‘edit’ icon
  3. Click ‘Advanced Options’
  4. Type ‘normalimage’ in the ‘Image CSS Class’ box

Advanced Tip: You can also add the ‘normalimage’ class in the WordPress text editor. Example: <img class="normalimage" src=http://mydomain/images/image.jpg>

Shortcodes

The structure of the site and the majority of features can be built using shortcodes.

Layout / Containers

You can lay out the content by enclosing it in the following shortcodes, which you can copy and paste into the visual or text editor in WordPress.

[fullwidth]
A fluid full width container
[/fullwidth]

[halfwidthleft]
A fluid left floating half width container, which becomes full width on smaller screens.
[/halfwidthleft]

[halfwidthright]
A fluid left floating half width container, which becomes full width on smaller screens.
[/halfwidthright]

[quarterwidthleft]
A fluid left floating half width container, which becomes half and full width on smaller screens.
[/quarterwidthleft]

[quarterwidthleft]
A fluid left floating half width container, which becomes half and full width on smaller screens.
[/quarterwidthleft]

[blogmain]
A fluid left floating 2/3 width container, which becomes full width on small screens. Used on the blog page, but works on normal pages too.
[/blogmain]

[blogsidebar]
A fluid right floating 1/3 width container, which becomes full width on small screens. Used on the blog page, but works on normal pages too.
[/blogsidebar]

Design Features

Most of the design features can also be activated using shortcodes.

Image Frame

[imageframe]
Your Image Here
[/imageframe]

Photo shadow

Large Icon

[Icon]
Your Image Here
[/icon]

Star

Accordion

[accordion]
[accsection acc_heading="Accordion Heading Here"]
The content of the first accordion
[/accsection]
[accsection acc_heading="Another Accordion Heading Here"]
The content of the second accordion
[/accsection]
[/accordion]

Responsive Video Frame

This frame can be used to contain video embeds, or anything with a 16:9 aspect ratio.

[videoframe]
<iframe style="z-index: 0;" src="https://www.youtube.com/embed/x8R2H51Wphk" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
[/videoframe]

 

Call to Action Button (CTA)

CTA

[cta btn_url=http://yoururl.com] Button[/cta]

Bulleted Lists

Bulleted lists can look like this:
<ul class="bdcbullet">
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
</ul>
To achieve this, created a bulleted list, then in the WordPress text editor change <ul> to <ul class="bdcbullet">

Advanced Tip: To change the little green circle, create your own custom bullet, then change the link in the style.css file for the class ‘ul.bdcbullet li’

Heading

Headings can be changed by selecting text and choosing a heading inside the WordPress visual editor, or by adding <h> tags inside the WordPress text editor. For example <h1>Heading One</h1>, or <h2>Heading Two<h2>

Advanced Tip: If the heading (or anything else) is the first thing inside a full width container, you may need to add a margin at the top. You can do this by giving it this class <h1 class=”heading1top”>Example</h1> or using the shortcode [heading1top]Example[/heading1top]

Pricing Table

There is no shortcodes for this. You can edit the HTML on the ‘Responsive Pricing Table’ page and edit the CSS in the style.css file.

Advanced Tip: The pricing table works best if columns are used in multiples of 2.

Gallery

You can download the pure HTML and CSS gallery from the non-WordPress version of the theme and use that, but since we’re using WordPress, it’s easier to use an existing plugin for your gallery. We’ve used Essential Grid but there are a number of free WordPress gallery plugins you could use too.

Shop (WooCommerce)

If you want a shop on your site, you can download WooCommerce for free. The sidebar is already setup under ‘Widgets’.

Map

Contact Form

We’ve used the plugin Fast Secure Contact Form (FS Contact Form) on the contact page, although can also use any contact form plugin. If you do install FS Contact Form, you can import the styles used on the example template:

  1. Go to ‘Plugins > FS Contact Form > Tools’
  2. Under the ‘Restore Settings’ heading, click ‘Choose file’ and select the’ fs-settings.txt’ file
  3. Select your contact form from the dropdown menu and click ‘Restore Settings’

Google Fonts

As standard, the free Google fonts ‘Open Sans’ is used on the site. The easiest way to change this is to download the plugin Easy Google Fonts, which will then let you change any of the fonts by going to ‘Appearance > Customise > Typography’.

Support

We offer limited free support for this WordPress theme to users that keep our link in the footer. To request support or features, email will@thebig.co