This guide will cover the code used to create pages and posts.

Click here to view our standard WordPress guide.

Please note that as your theme uses upgraded features and custom code we have disabled the visual side of the editor. This is because when switching between the visual and text editors WordPress can scramble your code and mess up the layout of your pages.

Code

	<p>Code examples will show like this.</p>
	// Comments for this guide within the code will follow double forward slashes and will not show in the output

Output

Basic Tags

The following are the basic tags you will need to structure your pages and posts.

Headings

There are six tags for headings. Number 1 being the largest and most important all the way to number 6 which is the smallest and least important

	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>

This will output the following:

Paragraphs & Styling Tags

	<p>Basic Paragraph</p>
	<p><strong>Bold Paragraph</strong></p>
	<p><em>Italic (emphasized) Paragraph</em></p>
	<p><strong><em>Bold and Italic (emphasized) Paragraph</em></strong></p>

Images

You can use the add media button in WordPress which will write the code for you but if you want to write your own then here are the basics.

The image tag is unique as it closes itself unlike the other tags.

	<img alt="Logo" src="http://www.destinydesigns.co.uk/resources/logo.png" /> // Self Closing
	<p>Basic Paragraph</p> //Has to be closed using the closing tag - </p>
	<img alt="Logo" src="http://www.destinydesigns.co.uk/resources/logo.png" ></img> // This is wrong
							// The alt="" and src="" are attributes and will be covered in the next section

Links

You can highlight the text you wish to link and use the link button in the WordPress editor which will write the code for you but if you want to write your own then here are the basics.

Links are used to send the user to different web pages and files

	<a href="http://www.google.co.uk" target="_blank" >Link to Google</a> //Opens in a new tab
	<a href="http://www.google.co.uk" >Link to Google</a> //Opens on the same page
	href="" // is the attribute used to specify the location of your link
	target="" // is the attribute to specify how the link will open. If you don't use the target attribute it will open up on the page you are on.

Lists

You can create bullet point lists and numbered lists with the following code.

	//ul stands for unordered list. This will output a bullet point list
	<ul>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
	</ul>
	//ol stands for ordered list. This will output a numbered list
	<ol>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
	</ol>

Dividers

Dividers are important for keeping your content in sections. Think of them as containers. This guide is wrapped in a <div> section so that the content doesn't touch the sides of the screen.

Below is an example of a divider tag '<div>' wrapping up a section of content. The attribute class="section" will be covered in further detail further detail in the classes section.

	<div class="section" style="min-height:100%;">
		<h1>Heading 1</h1>
		<p><strong>Bold Paragraph</strong></p>
		<p>Basic Paragraph</p>
		<img alt="Logo" src="http://www.destinydesigns.co.uk/resources/logo.png" />
		<a href="http://www.google.co.uk" target="_blank" >Link to Google</a>
		<ul>
			<li>List item</li>
			<li>List item</li>
			<li>List item</li>
		</ul>
		<ol>
			<li>List item</li>
			<li>List item</li>
			<li>List item</li>
		</ol>
	</div>

Attributes

Image Attributes

The following attributes are used within the image tag.

	<img alt="Logo" src="http://www.destinydesigns.co.uk/resources/logo.png" width="300" height="106" />
	alt="" //This is the name of your image used as an alternate if your image is broken, for search engines to read the tag and for screen readers (used by partially sited users).
	src="" //This is the source of your image. The location that it is held on your site/server
	width="" //The width of your image. If this attribute isn't set it will use the images original width
	height="" //The height of your image. If this attribute isn't set it will use the images original height

Link Attributes

The following attributes are used within the link '<a>' tag.

	<a href="http://www.google.co.uk" target="_blank" >Link to Google</a>
	href="" //This is the Hyperlink Reference of your link. The location the link will send the user when the link is clicked.
	target="" //This is the attribute to specify how the link will open. If you don't use the target attribute it will open up on the page you are on.
	target="_blank" // opens in a new tab
	target="_self" // opens on the same page (this is default even when not set)

Classes & ID's

Classes and ID's are attributes that have a group of styles written for them. See the Classes / ID's sections for a list and their uses

	<div class="section" style="min-height:100%;">
		<img class="dd-left" alt="Logo" src="http://www.destinydesigns.co.uk/resources/logo.png" /> //Image with parallax class that brings the element in from the left when the user scrolls down
		<ul class="dd-right"> //list with parallax class that brings the element in from the right when the user scrolls down
			<li>List item</li>
			<li>List item</li>
			<li>List item</li>
		</ul>
		<p class="heading">Basic Paragraph with the heading class created for this guide</p>
		<p id="heading">Basic Paragraph with the heading ID created for this guide</p>
	</div>
	
	class="" //A class can applied to multiple elements at once
	id="" //An ID can only be used once per page. There are no usable ID's for your theme.

Refresh the page to see the parallax animation again.

Style

The style attribute is used to give particular styles to an element

	<p style="color:red;">Basic Paragraph in Red</p>
	<p style="color:blue;">Basic Paragraph in Blue</p>
	<p style="color:#E61DE9;">Basic Paragraph in Pink</p> // You can use hexadecimal colours which allow you to be more specific.
	<p style="background-color:black;color:white;">Basic Paragraph in White with a Black Background</p> //You can have multiple styles
	<p style="font-size:24px;">Basic Paragraph with a larger font size</p> //Use this to set a specific font size on your text
	<p style="text-align:left;">Basic Paragraph aligned left</p> //Use this to align your text
	<p style="text-align:center;">Basic Paragraph aligned center</p> 
	<p style="text-align:right;">Basic Paragraph aligned right</p> 

Click here for a colour picker to help you select specific colours.

Classes

Classes are used to give a pre written group of styles to a single element or multiple elements.

	<p class="tcenter">Basic Paragraph with a class that aligns the text to the center</p>
	<p class="tcenter">Another basic Paragraph with a class that aligns the text to the center</p>
	<div class="col-full dd-group"> //An element can have multiple classes. These are simply separated by a space
		<div class="col-half" style="background-color:yellow;"> //This class turns the div into a column
			<p>Basic Paragraph within a column that is 50% of it's container</p>
		</div>
		<div class="col-half" style="background-color:yellow;">
			<p>Basic Paragraph within a column that is 50% of it's container</p>
		</div>
	</div>
	<div class="col-full dd-group">
		<div class="col-half sp" style="background-color:yellow;"> //This class turns the div into a column with a small space between the next column
			<p>Basic Paragraph within a column that is almost 50% of it's container with a separating space</p>
		</div>
		<div class="col-half sp col-last" style="background-color:yellow;"> // If you use the column with a space you need to add the col-last class to the last column
			<p>Basic Paragraph within a column that is almost 50% of it's container with a separating space</p>
		</div>
	</div>

List of Classes

• tleft - Used to align text to the left
• tcenter - Used to align text to the center
• tright - Used to align text to the right
• tjust - Used to justify text
• tres - This class is used with the .tleft and .tright classes to stop them from centering when the screen size is 999px or less.
• rd - This class is used with to hide the element when the screen size is 643px or less.
• lowercase - Used to transform text to lowercase
• uppercase - Used to transform text to uppercase
• dd-group - Used mainly with section to ensure the columns remain within their container. This class adds a clearfix for floats.
• col-full - Used to create a full column
• col-half - Used to create a column that is half the width of its container
• col-third - Used to create a column that is a third of its container
• col-two-third - Used to create a column that is two thirds of its container
• col-fourth - Used to create a column that is a quarter of its container
• col-three-fourth - Used to create a column that is three quarters of its container
• col-fifth - Used to create a column that is a fifth of its container
• col-two-fifth - Used to create a column that is a two fifths of its container
• col-three-fifth - Used to create a column that is a three fifths of its container
• col-fourth-fifth - Used to create a column that is a four fifths of its container
• col-sixth - Used to create a column that is sixth of its container
• col-five-sixth - Used to create a column that is five sixths of its container
• col-seventh - Used to create a column that is seventh of its container
• col-two-seventh - Used to create a column that is two sevenths of its container
• col-three-seventh - Used to create a column that is three sevenths of its container
• col-four-seventh - Used to create a column that is four sevenths of its container
• col-five-seventh - Used to create a column that is five sevenths of its container
• col-six-seventh - Used to create a column that is six sevenths of its container
• col-eighth - Used to create a column that is eighth of its container
• col-three-eighth - Used to create a column that is three eighths of its container
• col-five-eighth - Used to create a column that is five eighths of its container
• col-seven-eighth - Used to create a column that is seven eighths of its container
• sp - Used with one of the other column styles to add spacing
• hs - Used with the columns styles to change how the respond when the screen size reaches 999px. It splits them in half and then full width. This class will not work with the sp class.
• col-last - Used on the last column in a group that has spacing. This prevents the layout breaking
• col-center - Used with one of the other column styles to center the column
• nrb - Used with one of the other column styles to stop it changing size on responsive. By default each column centers and get larger as the screen gets smaller. This will prevent that and maintain the column size.
• section - Used to wrap entire sections of content. Should only be used with the <div> tag like the examples above.
• section-full - Used to wrap entire sections of content and will fill 100% of the screen. Should only be used with the <div> tag like the examples above.
• dd-strike - Used to create a centered heading with seperating lines either side. Mainly used on heading tags
• section-tc - This class acts like section-full but it adds a clickable arrow at the bottom and a target div beneath the section so you can click and scroll to the next content area.
• section-btt - This class acts like section-full but it adds a clickable arrow and text at the bottom which will scroll the user back to the top of the page.
• dd-social - A basic class that is used on a div to wrap around anchor tags. It will display them inline and give them a transparent hover effect. It is mainly used for basic social media links.
• Advanced
• dd-vert-center - This class is used to vertically align an element to the center of its container
• dd-horizontal-center - This class is used to horizontally align an element to the center of its container
• dd-center - This class is used to both horizontally and vertically align an element to the center of its container
• dd-vert-center-njs - This class is used to vertically align an element to the center of its container without the use of jQuery. This element must have a height set for this class to work.
• dd-horizontal-center-njs - This class is used to horizontally align an element to the center of its container without the use of jQuery. This element must have a height set for this class to work.
• dd-center-njs - This class is used to both horizontally and vertically align an element to the center of its container without the use of jQuery. This element must have a height set for this class to work.
• dd-square - This class is used to set the height of an alement to match its width
• dd-landscape - This class is used to set the height of an element to be 70% of width
• dd-landscape-short - This class is used to set the height of an element to be half of its width
• dd-portrait - This class is used to set the height of an element to be 140% of it's width.
• dd-full-height - This class is used to set the height of an element to be the same as its container(parent).
• dd-full-overlay - This class is used to set the height and width of an element to be the same as its container(parent). This element will be absolutely positioned with a higher z-index than its siblings.
• dd-full-underlay - This class is used to set the height and width of an element to be the same as its container(parent). This element will be absolutely positioned with a lower z-index than its siblings.

Alternative Columns

This method of impletmenting columns may be easier but you will have slightly less control.

With this method you will only need to specify a small set of classes and the code in the backend will work out how many columns to use

^*Note that this method will only produce even columns. E.G two half columns, five fifth columns but not one third and two third.

	<div class="section dd-group columns"> //This will be the main container for the columns. The rem columns class tells the system to count the required columns inside
		<div class="loop-col"> // For each element you want to have columns on, add the loop-col class
			<p class="heading">Content</p>
		</div>
		<div class="loop-col">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col">
			<p class="heading">Content</p>
		</div>
	</div>

The results of this should be three columns with no spacing

If you want to add spacing between the columns then use the loop-col-sp class instead

	<div class="section dd-group columns"> //This will be the main container for the columns. The rem columns class tells the system to count the required columns inside
		<div class="loop-col-sp"> // For each element you want to have columns on, add the loop-col class
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
	</div>

The results of this should be three columns with spacing

The code will count up to eight columns before putting them on a new line by default. If you want to control this you can set a maximum amount of or a specific amount of columns to use:

^*Note that you can only set one of these attributes at once. You cannot use both at the same time.

First we will set a Maximum amount

	<div class="section dd-group columns"  data-max-col="4"> //add this attribute to control the maximum amount of columns.
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
	</div>
	<div class="section dd-group columns"  data-max-col="4">
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
	</div>

The results of this should be three items in three columns for group one. The second group will be 6 items spread over four columns.

This is because group one never reached the maximum amount of columns we set. If the maximum we set is reached or exceeded then each item will recieve the maximim column which in this case was four.

Next we set a specific column amount.

	<div class="section dd-group columns"  data-set-col="3"> //add this attribute to set the specific amount of columns to be used
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
	</div>

The results of this should be five items split over three columns with spacing

If you want to add the no responsive break class to each element then add the dd-nrb class to container:

	<div class="section dd-group columns dd-nrb"> //Add the dd-nrb class here
		<div class="loop-col-sp"> 
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
		<div class="loop-col-sp">
			<p class="heading">Content</p>
		</div>
	</div>

The results of this should be three columns with spacing that won't break down as the screen gets smaller

List of Alternate Column Classes

• columns - To be added to the container for the columns
• nrb - To be added to the container for the columns if you do not want them to break down as the screen gets smaller
• loop-col - To be added to each column and will produce a column count with no spacing
• loop-col-sp - To be added to each column and will produce a column count with spacing

Alternate Column Attribute

• data-set-col - To be used to set how many columns you want before they break onto the next line. If you specify a number above 7 or something that is not a number it will default to 8 so be sure to only use this when you need to.
• data-max-col - To be used to control the maximum amount of columns you want before they break onto the next line. If you specify a number above 7 or something that is not a number it will default to 8 so be sure to only use this when you need to.
• data-max-item - To be used to control the maximum number of items shown. This will remove all columns after the specified number.

Advanced Columns

This section is more for fixing a potential but unlikely issue that can occur with columns.

In the event that some of your columns cause a 'phantom pixel' which is where you have an odd number of columns and your elements height is based on its container's width, some columns may be taller or shorter than others. This usually occurs because the columns width is calculated as a percentage of the browser or viewport width. Some browsers interpret the percentage differently by rounding the resulting width to the nearest whole value.

The following code is used to create a grid of sorts. This may replicate the 'phantom pixel' issue.

	<div class="section dd-group columns"  data-max-col="3"> 
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
	</div>

The results of this will be three columns and six items. As the screen resizes you may notice the 'phantom pixel' issue.

To fix this issue you can add the col-width-calculator class to the container for your columns.

	<div class="section dd-group columns col-width-calculator"  data-max-col="3"> 
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
		<div class="loop-col dd-landscape box"></div>
	</div>

The results of this will be three columns and six items. There shouldn't be a phantom pixel anymore.

^*Screen may need a refresh after resizing as the browser is no longer controling the width. The class runs our calculator when the page loads.

Content Serve

You can use this feature for a stylish click toggle for content.

	<div class="section dd-group dd-content-serve-wrap"> // For each content serve you have on a page you must wrap it in the dd-content-serve-wrap class
		<div class="col-third sp nrb dd-content-serve" data-dd-destination="#rcsc1"> // Each item that is going to have its content served must have the dd-content-serve class. The data-dd-destination attribute is used to move the user to the content area after clicking
			<h3 style="margin:0;">Content Serve</h3>
			<div class="dd-content-serve-item"> // This class will hide the content from view
				<div class="dd-content-serve-item-content fade animated dd-group"> //This is the actual content that gets copied and placed into the visible content area
					<ul class="dd-content-serve-list col-third sp">; // The dd-content-serve-list style is just a premade style for lists. It is not needed and you can add your own classes and content here
					<li><a href="#" target="_blank">List Item</a></li>
					<li><a href="#" target="_blank">List Item</a></li>
					<li><a href="#" target="_blank">List Item</a></li>
					<li><a href="#" target="_blank">List Item</a></li>
				</ul>
				<div class="col-third sp">
					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
				<ul class="dd-content-serve-list col-third sp col-last">
					<li><a href="#" target="_blank">List Item</a></li>
					<li><a href="#" target="_blank">List Item</a></li>
					<li><a href="#" target="_blank">List Item</a></li>
					<li><a href="#" target="_blank">List Item</a></li>
				</ul>
				</div>
			</div>
			<div class="dd-content-serve-arrow"></div>
		</div>
		<div class="col-third sp nrb dd-content-serve" data-dd-destination="#rcsc1">
			<h3 style="margin:0;">Content Serve</h3>
			<div class="dd-content-serve-item">
				<div class="dd-content-serve-item-content fade animated dd-group">
					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>
			<div class="dd-content-serve-arrow"></div>
		</div>
		<div class="col-third sp col-last nrb dd-content-serve" data-dd-destination="#rcsc1">
			<h3 style="margin:0;">Content Serve</h3>
			<div class="dd-content-serve-item">
				<div class="dd-content-serve-item-content fade animated dd-group">
					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>
			<div class="dd-content-serve-arrow"></div>
		</div>
		<div id="rcsc1" class="dd-group dd-content-serve-content"></div> //This div is where the content is served to. This must be placed at the end of all content serve items. The id is used as a target for the data-dd-destination attribute on the content serve items
	</div>

Click on the content serve titles to serve new content into the toggle.

Content Tabs

You can use this feature to create content tabs which switch between blocks of content.

	<div class="dd-content-tabs">
		<div class="dd-tabs">
			<div class="dd-tab" data-content="#tab1"><h3>Tab 1</h3></div>
			<div class="dd-tab" data-content="#tab2"><h3>Tab 2</h3></div>
			<div class="dd-tab" data-content="#tab3"><h3>Tab 3</h3></div>
		</div>
		<div class="dd-content-tabs-content">
			<div id="tab1" class="dd-content-tabs-item">
				<h1>Tab 1 Content</h1>
			</div>
			<div id="tab2" class="dd-content-tabs-item">
				<h1>Tab 2 Content</h1>
			</div>
			<div id="tab3" class="dd-content-tabs-item">
				<h1>Tab 3 Content</h1>
			</div>
		</div>
	</div>

This will output a set of content tabs with three items

Accordian

You can use this feature to create content accordians.

	<div class="dd-accordian"> // Wrap each accordian with the dd-accordian class
		<div id="acc1" class="dd-accordian-item" data-dd-destination="#acc1"> // Each item in the accordian needs the dd-accordian-item class. The id and data-dd-destination are used to scroll the user to the content once clicked.
			<h2 class="dd-accordian-title heading">Accordian 1</h2> //The dd-accordian-title is what the user clicks to activate the toggle
			<div class="dd-accordian-content"> // The dd-accordian-content is the content that will show when the accordian is toggled
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
		<div id="acc2" class="dd-accordian-item" data-dd-destination="#acc2">
			<h2 class="dd-accordian-title heading">Accordian 2</h2>
			<div class="dd-accordian-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
		<div id="acc3" class="dd-accordian-item" data-dd-destination="#acc3">
			<h2 class="dd-accordian-title heading">Accordian 3</h2>
			<div class="dd-accordian-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
	</div>

This will output an accordian with three items

You can also create nested accordians by placing another accordian inside the content of an accordian item

	<div class="dd-accordian"> // This is the main accordian wrapper
		<div id="ac1" class="dd-accordian-item" data-dd-destination="#ac1"> //The id's are different so they do not conflict with the set from the previous example. These can be named anything but it is better to be semantic.
			<h2 class="dd-accordian-title heading">Accordian 1</h2>
			<div class="dd-accordian-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<div class="dd-accordian"> //This is the nested accordian wrapper. It is the same structure, just placed within the content of another accordian item
					<div id="ac1-1" class="dd-accordian-item" data-dd-destination="#ac1-1">
						<h2 class="dd-accordian-title heading">Accordian 1.1</h2>
						<div class="dd-accordian-content">
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
								Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						</div>
					</div>
					<div id="ac1-2" class="dd-accordian-item" data-dd-destination="#ac1-2">
						<h2 class="dd-accordian-title heading">Accordian 1.2</h2>
						<div class="dd-accordian-content">
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
								Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						</div>
					</div>
					<div id="ac1-3" class="dd-accordian-item" data-dd-destination="#ac1-3">
						<h2 class="dd-accordian-title heading">Accordian 1.3</h2>
						<div class="dd-accordian-content">
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
								Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="ac2" class="dd-accordian-item" data-dd-destination="#ac2">
			<h2 class="dd-accordian-title heading">Accordian 2</h2>
			<div class="dd-accordian-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
		<div id="ac3" class="dd-accordian-item" data-dd-destination="#ac3">
			<h2 class="dd-accordian-title heading">Accordian 3</h2>
			<div class="dd-accordian-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
	</div>

This will output an accordian with three top level items and the first item will have three nested items

Classes for Parallax

You can add these classes to any element to give it a parallax transition. The ones that have been created for this theme will grant the ability to add more interactive elements on your pages/posts.

^*Note that you can add multiple classes to a single element by adding a space in between them.

^*Note that if you add one of these animation classes to an element that has an ID it will overwrite that ID. This is not the case for other classes.

	<div class="section" style="min-height:100%;">
		<h3 class="dd-down heading">I enter from the top.</h3> //Heading with parallax class that brings the element in from the top when the user scrolls down
		<h3 class="dd-right heading">I enter from the right.</h3> //Heading with parallax class that brings the element in from the right when the user scrolls down. 
		<h3 class="dd-up heading">I enter from the bottom.</h3> //Heading with parallax class that brings the element in from the bottom when the user scrolls down
		<h3 class="dd-left heading">I enter from the left.</h3> //Heading with parallax class that brings the element in from the left when the user scrolls down. 
		<h3 class="dd-in heading">I fade in.</h3> //Heading with parallax class that fades the element in when the user scrolls down
	</div>

Simply refresh the page to see the animations again

List of Parallax Classes

• dd-in - Used to fade an element in.
• dd-down - Used to fade an element in from the top.
• dd-right - Used to fade an element in from the right.
• dd-up - Used to fade an element in from the bottom.
• dd-left - Used to fade an element in from the left.

Page Templates

Your custom theme has the following templates which are selected when creating a new page. Use the WordPress User Guide to see how this is done.

• Default template - This is the default template which should be used for any new pages.
• Contact Page - This template is exclusively for the contact page. Do not use for other pages.
• Home Page - This template is exclusively for the home page. Do not use for other pages.
• Latest Posts Page - This template is for displaying all posts in a grid layout with options to filter by date, category and how many to show on the page.
• Portfolio Page - This template shows posts in a grid layout that are in the Portfolio category. If the category doesn't exist then you can simply create it under Posts -> Categories. It must have the slug 'portfolio'. This page can also be adapted to show a differen't category if you edit the loop in the code (advanced usage)
• User Guide Page - This template is exclusively for displaying the user guide. It does not display other content and should not be used for any other pages.
• Change Log Page - This template is exclusively for displaying the change log for the theme. It does not display other content and should not be used for any other pages.

Custom Fields

Custom Fields are an advanced set of content areas (like the default one you usually work on) which can provide extra functionality.

We have created a small set of these which will give you more control over your page content.

List of Custom Fields

• Page Feature - This field is used instead of the featured image if you would like a slider, map or any raw HTML to show instead. It can accept shortcodes or raw HTML
• Video Feature - This field is used instead of the featured image if you would like video to show instead. It can accept the URL for the video source you wish to display
• Page Feature Content - This field is used to display HTML over the top of the featured image if one is set. It has no default styling.
• Sidebar - This field will add the sidebar to your page. The sidebar itself is edited through the Widgets section. If false the sidebar won't show (used to override global sidebar display). If any other value is put in then the sidebar will show.
• disable_autop - This field will remove WordPress' autop feature which adds, p tags and br tags by itself. This can cause alignment issues with your own code so it is best to turn it off with this custom field.
• Above Header Content - This field will override both the Above Header Content Widget and the Theme Option.
• Below Header Content - This field will override both the Below Header Content Widget and the Theme Option.
• Above Footer Content - This field will override both the Above Footer Content Widget and the Theme Option.
• Below Footer Content - This field will override both the Below Footer Content Widget and the Theme Option.

Shortcodes

Shortcodes are a set of tags that simplify code.

List of Shortcodes

• [posts_loop] - Outputs posts based on certain parameters
• [social] - Outputs the global social icons(if set and enabled)
• [section][/section] - Used mainly when the Visual Editor is active to provide an alternative to the section class
• [clear] - Outputs a div with the clear class
• [accordian] - Outputs the container for the accordian items shortcodes
• [accordian_item][/accordian_item] - Outputs an accordian item
• [tabs] - Outputs the container for the content tabs shortcodes
• [tabs_wrap] - Outputs the container for the menu tab items shortcodes
• [tabs_item] - Outputs a tab menu item
• [tabs_content_wrap] - Outputs the container for the tab content shortcodes
• [tabs_content] - Outputs a tab content item
• [col][/col] - Outputs column containers
• [video] - Outputs HTML5 Video

DD posts Loop Shortcode Usage

	//The simplest usage of the shortcode is as follows
	[posts_loop] // This will display 3 posts from the blog category in a grid view

	//If you want to add an attribute the structure is as follows
	[posts_loop attribute_name="value"] //Attributes allow you to control what the shortcode does

	//The following is an example shortcode with all possible attributes. See list below for the attributes default and possible values
	[posts_loop category="" orderby="" order="" posts_per_page="" max_col="" set_col="" spacing="" type=""]

List of DD Post Loop Attributes

• category - This defaults to 'blog' but you can input multiple values. If you want to display for example the blog category and the portfolio category then simply seperate them with a comma. ([posts_loop category="blog, portfolio"]). The value must be the slug for the category you wish to display
• orderby - This defaults to 'date' but can have the following values instead:
  • none - No order
  • ID - Order by post id. Note the capitalization
  • author - Order by author
  • title - Order by title
  • name - Order by post name (post slug)
  • date - Order by date.
  • modified - Order by last modified date
  • parent - Order by post/page parent id
  • rand - Random order
  • comment_count - Order by number of comments
  • menu_order - Order by Page Order. Order field in the Edit Page Attributes box. They all default to 0
• order - Defaults to 'DESC' which is descending order. The only other value it can have is 'ASC' which is ascending order
• posts_per_page - This defaults to '1' but can be set to any number. Set to '-1' if you want to show all posts
• max_col - This defaults to false. Set to a number to set the data-max-col attribute. You can't use this as well as the set_col attribute
• set_col - This defaults to false. Set to a number to set the data-set-col attribute. You can't use this as well as the max_col attribute
• spacing - This defaults to true. Set to false if you do not want spacing between the looped posts
• type - This defaults to grid. Set to list if you want to display your posts in a list view

DD Social Shortcode Usage

	//This shortcode has two attributes
	[social align="" padding=""] //This will output the social icons set in the DD Theme Options.

List of DD Social Attributes

• align - This defaults to center. Set to left or right to align the icons
• padding - This defaults to true. Set to false if you don't want padding on the output

DD Section Shortcode Usage

	//This shortcode has two attributes
	[section type="" textured="" style="" class="" ]<p>Any content you want contained in a section</p>[/section] //This will output a div with the section class containing the content inside

List of DD Section Attributes

• type - This defaults to default.
  • Unset or default - default section
  • tc - To Content Section
  • btt - Back to top section
  • full - Ful screen section
• textured - This defaults to false. Change to true to add textured background
• style - This defaults to nothing. You can write inline css here to style the section
• class - This defaults to dark. You can add custom classes here. Just seperate them with a space to add multiple

DD Clear Shortcode Usage

	//This shortcode has no attributes
	[clear] //This will output a div with the dd-clear class

DD Accordian Shortcode Usage

These shortcodes function similar to their handwritten counterparts with slightly less control (Doesn't scroll to the item) and doesn't allow nesting.

^*Note that this shortcode should be written on one line if you haven't disabled autop

	//This shortcode is broken up into two shortcodes. One that acts as a container and the other with is the item in the container
	[accordian] // This is the containing shortcode. It doesn't have any attributes
		[accordian_item title="Title"] //This is the accordian Item shortcode. It has one attribute
			<p>Any content you want</p>
		[/accordian_item]
		[accordian_item title="Title"] //You can have as many items as you want.
			<p>Any content you want. Even other shortcodes</p>
		[/accordian_item]
	[/accordian]

List of DD Accordian Item Attributes

• title - The title of the accordian item

DD Content Tabs Shortcode Usage

These shortcodes function similar to their handwritten counterparts with slightly less control (Doesn't scroll to the item) and doesn't allow nesting.

^*Note that this shortcode should be written on one line if you haven't disabled autop

	//This shortcode is broken up into five shortcodes.
	[tabs] //This contains the whole tabs
		 [tabs_wrap] //This contains the tab menu items
			 [tabs_item id="tab1" title="Tab 1"] //These are the menu items. These can have two attributes
			 [tabs_item id="tab2" title="Tab 2"]
		 [/tabs_wrap]
		 [tabs_content_wrap] //This contains the tab content
			 [tabs_content id="tab1"]Test[/tabs_content] //These are the content tabs. These can have one attribute
			 [tabs_content id="tab2"]Test[/tabs_content]
		 [/tabs_content_wrap]
	[/tabs]

List of DD Content Tabs Item Attributes

• id - The id for the content it links to. This field must match up with the content id.
• title - The title of the tab menu item

List of DD Content Tabs Content Attributes

• id - The id of the content. This must link up to the tab menu item

DD Columns Shortcode Usage

^*Note that these shortcodes must be contained in a cleared container like [section][/section]

	//This shortcode has six attributes. Not all of them are necessary
	[col size="" space="" last="" centered="" class="" style=""][col]

	//The columns must be wrapped in something like [section][/section] or a container that has the class 'dd-group'
	[section]
		[col size="third" space="true"]
			Column content
		[/col]
		[col size="third" space="true"]
			Column content
		[/col]
		[col size="third" space="true" last="true"]
			Column content
		[/col]
	[/section]

List of DD Columns Attributes

• size - The size of column you want. It has no defaults and can accept the following values:
  • half
  • third
  • two-third
  • fourth
  • three-fourth
  • fifth
  • two-fifth
  • three-fifth
  • four-fifth
  • sixth
  • five-sixth
  • seventh
  • two-seventh
  • three-seventh
  • four-seventh
  • five-seventh
  • six-seventh
  • eighth
  • three-eighth
  • five-eighth
  • seven-eighth
• space - Whether or not the columns have a gutter(space between them). This defaults to 'false' and can accept the value 'true'
• last - Whether or not it is the last column in a row. Only to be used when columns have spacing. This defaults to 'false' and can accept the value 'true'
• centered - Whether or not to center the column so it sits in the middle of the screen with nothing either side. This defaults to 'false' and can accept the value 'true'
• class - You can write custom classes here, seperated by a space
• style - You can write inline css here

DD Video Shortcode Usage

This shortcode is mainly for adding videos from an external source. It is better to use the WordPress Add Media button and insert a video that way.

^*Note that this shortcode only accepts MP4, WebM and Ogg video types. MP4 is supported better across the browsers and is the suggested video format.

	//This shortcode has thirteen possible attributes. Only the first source and type are required.
	//You do not need to specify any fallback sources
	[dd_video class="" style="" width="" height="" controls="" autoplay="" loop="" source="" type="" source2="" type2="" source3="" type3=""]

List of DD Video Attributes

• class - You can write custom classes here, seperated by a space
• style - You can write inline css here to style the container of the video element
• width - Controls the width of the video. If not specified it will try to load at its default width
• height - Controls the height of the video. If not specified it will try to load at its default height
• controls - Defaults to true. This add controls to the video player.
• autoplay - Defaults to false. This makes the video automatically play. Set to true to enable autoplay
• loop - Defaults to false. This makes the video loop back to the start and play again when it finishes. Set to true to enable loop
• source - Input the source url for the video you wish to play
• type - Specify the format type of the video
  • mp4
  • webm
  • ogg
• source2 - Input the fallback source url for the video you wish to play
• type2 - Specify the fallback format type of the video
  • mp4
  • webm
  • ogg
• source3 - Input another fallback source url for the video you wish to play
• type3 - Specify another fallback format type of the video
  • mp4
  • webm
  • ogg

Contact Form 7

If you are using contact form 7 with the really simple captcha plugin then the following HTML can be used for a basic form.

^*Note that we are assuming a basic knowledge of the Contact Form 7 plugin.

	<div id="dd-cf7-contact" class="dd-cf7-wrap"> //Change the id attribute for each new form so you can add custom styles
	[text* placeholder "Your Name"]
	[text* placeholder "Your Phone Number"]
	[email* placeholder "Your Email"]
	[text* placeholder "Your Subject"]
	[textarea placeholder "Your Message"]
	<div class="dd-cf7-captcha-float dd-group"> //Wrap the captcha tags in this div to have them line up next to each other
	[captchac captcha-4 class:dd-cf7-captcha-img size:l]
	[captchar captcha-4 class:dd-cf7-captcha]
	</div>
	[submit "Send"]
	</div>

Useful Links

• WordPress Admin Panel Guide
• Hexadecimal Colour Picker