WordPress Documentation

Demo Content
Site Logo
Site Icon
Social Media Icons
Widget Areas
Bulleted Lists
Pricing Table
Contact Form
Google Fonts


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.



  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.


In the WordPress dashboard click on ‘Settings’


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



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


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 can be editing under ‘Appearance > Menus’.


  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>


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.

A fluid full width container

A fluid left floating half width container, which becomes full width on smaller screens.

A fluid left floating half width container, which becomes full width on smaller screens.

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

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

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.

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.

Design Features

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

Image Frame

Your Image Here

Photo shadow

Large Icon

Your Image Here



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

Responsive Video Frame

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

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


Call to Action Button (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>
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’


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.


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


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


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