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

Please not that this guide is still under construction and may not mention some of the features available in your unique build

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.razoredge-media.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.razoredge-media.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.razoredge-media.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.razoredge-media.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="rem-left" alt="Logo" src="http://www.razoredge-media.co.uk/resources/logo.png" /> //Image with parallax class that brings the element in from the left when the user scrolls down
			<ul class="rem-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="rem-col-full rem-group"> //An element can have multiple classes. These are simply separated by a space
			<div class="rem-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="rem-col-half" style="background-color:yellow;">
				<p>Basic Paragraph within a column that is 50% of it's container</p>
			</div>
		</div>
		<div class="rem-col-full rem-group">
			<div class="rem-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="rem-col-half-sp rem-last" style="background-color:yellow;"> // If you use the column with a space you need to add the rem-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
• rem-col-full – Used to wrap a group of columns
• rem-group – Used with rem-col-full to ensure the columns remain within their container
• rem-col-two-third – Used to create a column that is two thirds of its container
• rem-col-half – Used to create a column that is half the width of its container
• rem-col-third – Used to create a column that is a third of its container
• rem-col-fourth – Used to create a column that is a quarter of its container
• rem-col-fifth – Used to create a column that is a fifth of its container
• rem-col-sixth – Used to create a column that is sixth of its container
• rem-col-two-third-sp – Used to create a column that is two thirds of its container with a separating space between the next column
• rem-col-half-sp – Used to create a column that is half the width of its container with a separating space between the next column
• rem-col-third-sp – Used to create a column that is a third of its container with a separating space between the next column
• rem-col-fourth-sp – Used to create a column that is a quarter of its container with a separating space between the next column
• rem-col-fifth-sp – Used to create a column that is a fifth of its container with a separating space between the next column
• rem-col-sixth-sp – Used to create a column that is a sixth of its container with a separating space between the next column
• rem-last – Used on the last column in a group that has spacing. This prevents the layout breaking
• rem-col-center – Used with one of the other column styles to center the column
• no-responsive-break – 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.
• rem-vert-center – This class is used to vertically align an element to the center of its container
• rem-horizontal-center – This class is used to horizontally align an element to the center of its container
• rem-center – This class is used to both horizontally and vertically align an element to the center of its container
• rem-square – This class is used to set the height of an alement to match its width
• rem-landscape – This class is used to set the height of an element to be 70% of width
• rem-landscape-short – This class is used to set the height of an element to be half of its width
• rem-full-height – 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 (This is usefull for overlays and full links).

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 rem-group rem-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="rem-loop-col"> // For each element you want to have columns on, add the rem-loop-col-class
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col">
				<p class="heading">Content</p>
			</div>
			<div class="rem-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 rem-loop-col-sp class instead

		<div class="section rem-group rem-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="rem-loop-col-sp"> // For each element you want to have columns on, add the rem-loop-col-class
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-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 8 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 rem-group rem-columns"  data-rem-max-col="4"> //add this attribute to control the maximum amount of columns.
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
		</div>
		<div class="section rem-group rem-columns"  data-rem-max-col="4">
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-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 rem-group rem-columns"  data-rem-set-col="3"> //add this attribute to set the specific amount of columns to be used
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-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 rem-nrb class to container:

		<div class="section rem-group rem-columns rem-nrb"> //Add the rem-nrb class here
			<div class="rem-loop-col-sp"> 
				<p class="heading">Content</p>
			</div>
			<div class="rem-loop-col-sp">
				<p class="heading">Content</p>
			</div>
			<div class="rem-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

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

Alternate Column Attribute

• data-rem-max-col – To be used to control 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 defult to 8 so be sure to only use this when you need to.

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="rem-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="rem-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="rem-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="rem-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="rem-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 Classes

• rem-in – Used to fade an element in.
• rem-down – Used to fade an element in from the top.
• rem-right – Used to fade an element in from the right.
• rem-up – Used to fade an element in from the bottom.
• rem-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 page template and likely the only one you will need to use.
• Blog Page – This template is unique for displaying your blog posts.
• Case Studies Page – This template is unique for displaying your Case Studies.
• Home Page – This template is for the home page only.
• Service Page – This template is for the Services main page.
• Services Page – This template is used for your services which will link through to your main services page. Only 8 services will link throught to the services page currently. (contact us if you would like more)

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, video or map to show instead. It can accept shortcodes or raw HTML (code)
• Page Feature Content – This field is used overlay content on top of the featured image/Page Feature area. It can accept shortcodes or raw HTML (code)
• Sub Content – This field will add a section of content underneathe your main content area. It is primarily for advanced use. It can accept code the same way as the normal content box can.
• Related Case Studies – This field is used only on the Services Pages templates and will add a section at the bottom to display any case studies in one of the following categories:
  • architectural
  • bespoke
  • engineering
  • equipment
  • ferrous-metals (This is a parent category that will show its children)
    • iron
    • sg-iron
    • cast-iron
  • melting
  • moulding-techniques
  • non-ferrous-metals (This is a parent category that will show its children)
    • aluminium-alloys
    • pure-copper-and-close-alloys
    • copper-based-alloys
  • railings
  • restoration
  • sculpture

  This field will only show a maximum of 8 case studies in recent order.

Useful Links

• WordPress Admin Panel Guide
• Hexadecimal Colour Picker