Adding Custom Code to Web Pages
So how do we add custom code when using the CMS?
When using the CMS there are a few different ways to add custom code which we will cover below. In particular we will cover some special cases such as adding code into the head section of the web page HTML, directly after the opening body tag and directly before the closing body tag at the end the HTML.
In the CMS admin area there are two main ways to add custom code to your web pages. The first and most straight forward way is to use the content areas that are available when adding or editing a category, article or product.
To edit the raw HTML in a content area; simply click the Toggle Editor button to switch off the WYSIWYG (what you see is what you get) editor or click the HTML button on the content area toolbar.
Page Code Settings
In the CMS admin area there is also a settings page where the web developer can easily add custom code to the website HTML. There are three textareas: Page Meta, Page Start and Page End.
- Page Meta: code inserted just before the closing head tag
- Page Start: code inserted just after the opening body tag
- Page End: code inserted just before the closing body tag
Any code entered into these textareas will be applied to every web page that the CMS serves up. This can be a good way to easily add analytics code to every page in your website.
Editing Page Templates
For web developers the most flexible way to add custom code is to edit the source code of page template files directly. By editing the page templates in your HTML editor of choice you can insert custom code anywhere on any web page.
Web developers who are proficient in PHP can also create conditions using PHP code; one example might be to check category ids to output different code for different web pages. When using PHP code in page templates you should use the .php file extension instead of .htm or .html however the CMS will execute PHP code contained in any page template even when a .htm or .html file extension is used.
Using PHP variables $page_meta, $page_start, $page_end
The variables $page_meta, $page_start and $page_end behave just like the page code settings in the CMS admin area mentioned above but unlike the admin settings which will add the custom code site-wide these variables can be used to add code to any particular page template and therfore provide far greater flexibilty.
Below is a simple example on how to add custom code to your web page using these PHP variables.
In the PHP code example above the period before the equals is to ensure any existing custom code is not replaced but instead appended to.
PHP variables can also be really handy when you can’t or don’t want to edit the raw page template source code directly; for example when using a wysiwyg web design program that exports the page template HTML. For example in Xara Designer Pro and Xara Web Designer you could enter the PHP code above in the HTML Code (head) section under web page properties.