Sometimes you have content that you want to place onto a page that requires a bit of messy HTML, CSS and PHP coding. This can be very frustrating when there are multiple occurrences of said piece of content within your page, and when each occurrence requires something different about it. What is even worse is when the person who needs to manipulate this content isn't very confident with the above markup (HTML, CSS) and code (PHP) languages, yet they need to be able to edit the necessary pieces without breaking a crucial piece of the markup. Wouldn't it be great if GetSimple had such a function?
Other content management systems such as forums and Wordpress do have such functions, called BBCode and Shortcodes respectively, which allow for dynamic content to be output on pages without knowledge of the messy code that goes in beforehand. For example, on forums you can often place a link on the page by simply using [url][/url] tags instead of knowing how to use HTML anchors and putting them in the source code of the page. Shortcodes work in an almost identical manner.
Today I shall go through how you can make similar tags to these for a variety of content, which should make it easier to perform the following:
- Calling GetSimple PHP functions within regular page content
- Output dynamic HTML/PHP content using simple placeholders
- DynPages
Easiest part of the tutorial really – download and install DynPages by downloading the zip file to your hard drive and uploading the contents of said file to the /plugins directory of your GetSimple installation.
The idea is that we use components to define the content that we want to output on the page, then instead of using the messy <?php get_component('componentname'); ?> PHP function, we use the dynamic placeholder
{% component_name %}
to output it on the page. Simple, right?
So for an incredibly simplistic example, imagine that I have a welcome message that I want to display for the users which I want to be identical on all the pages it is shown on. To do so, I create a component (for example with the name welcome_message) and define the content.
Hello World!
Then on the pages that I want this message to be shown, I simply include the following content:
{% welcome_message %}
And the 'Hello World!' content is displayed on any page with that respective placeholder. I can make the message as long or short or as complicated as need be within the component, but all that I need to make it shown on the page is the neat placeholder above. You can use this to easily output content from HTML scripts that you can find from various, such as integrating AddThis to provide your pages with social media links. But this isn't where the potency of DynPages lies...
So what about those BBCodes/shortcodes we mentioned earlier? Well it is possible to replicate those features quite easily with DynPages, and to create any code that you need to serve a particular purpose if you are HTML/PHP savvy enough. In the end, what we want to be able to do is have the placeholder
(% component_name parameter0, parameter1, parameter2 %)
on the page bring the content of the component “component_name” and apply parameters 0, 1, 2, etc... where we've allocated them. The component should have the following code in it:
<?php global $args; ?> <!-- your component's markup -->
With <?php return $args[#]?> for simply returning (not echoing/printing) the parameter and <?php echo $args[#]?> for echoing the parameter. Let us look at an example regarding the embedding of Youtube videos.
<iframe width="-" height="-" src="-" frameborder="-" allowfullscreen></iframe>
Youtube has done a great amount of work cutting it down to look as clean as it is now, but even that can be a bit frustrating at times. Sometimes you just need the bare bones to show the video – the dimensions, the link and the border. With DynPages, you can output any youtube video you want on the page with the following placeholder:
{% youtube width, height, embedUrl, border %}
Saving you the need to paste the HTML code every time you need to display a video.
To do so, create a component called 'youtube' with the following code:
<?php global $args; ?>
<iframe width="<?php echo $args[0]; ?>" height="<?php echo $args[1]; ?>" src="<?php echo $args[2]; ?>" frameborder="<?php echo $args[3]; ?>" allowfullscreen></iframe>The important thing to notice is the use of the global PHP argument args[#]. This basically says “after the component's name in the placeholder, anything separated by a space, inverted comma or quotation mark will take this value, starting with 0. So where we have:
<?php echo $args[0]; ?>This will echo the value of the first parameter, which I've stated above as width. The same applies for the other parameters. So as long as I remember how many parameters are there and in what order they are, I can put as many in as I want.
Your tutorials are fantastic! Thanks so much!!!