Prerequisites: this tutorial assumes your theme uses the Bootstrap framework.
We recently built a site using WordPress for a client, since they weren’t sure about trying Coaster as it isn’t as well known. However, popularity doesn’t necessarily make something good or bad. The client in question required a CMS site where they could edit, add and remove pages when needed – all of which can be done with Coaster. Features such as a banner and a carousel on the homepage were part of the original design.
Coaster vs the Competition
WordPress by default doesn’t allow you to easily add a customisable banner to your theme. There are plugins available, however, these do not replicate the same function as that of the original design without some considerable tweaking. You are often stuck with the sliders that come with the plugin, and as a result are not ideal when trying to implement a bespoke solution. In the end the only option is to either compromise by using an out of the box plugin or to build your own. This can take a lot more time and effort as opposed to doing the same in Coaster – with the end result ultimately being better and more useable.
Coaster’s repeater feature is perfect for this kind of functionality. All that is required is a couple of repeater templates that can be placed within the repeaters directory of your current theme and the addition of the repeater block to the templates you wish to use it with. Although WordPress does support templates, it is vastly easier to pick and choose between which blocks you want to show up on certain templates.
Code Example
The following example will guide you through setting up a banner slider with Coaster CMS. In this example we will call our banner repeater block ‘banner’ to keep things simple. Within this block we may want some other content such as a title, and some content. A main title and main content block will likely already exist for your Coaster installation, and therefore new blocks shouldn’t be required.
Adding a repeater view
Since our repeater block is called ‘banner’, we will want to create a banner.blade.php file within resources/views/themes/your_theme/repeaters. The name of the repeater file does not need to be the same as the block, but by default Coaster will search for a file with the same name.
Open this new file and add the code below:
|
1 2 3 4 5 6 |
@if ($is_first) <section class="logoscarousel"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> @endif |
In this case the the if statement checks to see whether this is the first banner. If true the HTML within the statement will be rendered. After the is first statement, add the following code:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="item {{ ($count==1)?'active':'' }}" style="background:url('{{ PageBuilder::block('slide_image', ['view' => 'raw']) }}')"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> <{{ ($count == 1)?'h1':'h2' }}>{{ PageBuilder::block('slide_title') }}</{{ ($count == 1)?'h1':'h2' }}> </div> </div> </div> </div> |
The code above is the HTML for the main banners, this will fetch the relevant information from the database for this banner. In this case the image, link, and content. To finish up add the code below, which checks to see whether the current banner is the last banner:
|
1 2 3 4 5 6 7 8 9 10 |
@if ($is_last) </div> @if ($total > 1) <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="sr-only">Next</span> </a> @endif </div> </section> @endif |
This closes any remaining div tags, and ensures that the next and previous buttons move onto the correct banners.
Conclusion
As you can see it is incredibly easy to setup a bespoke banner solution with Coaster CMS. While installing a banner plugin with WordPress is relatively simple, just a click of a few buttons, it won’t necessarily work well with your theme. This can lead to the frustration of having to install and uninstall multiple plugins to find the one that works best.
Like what you see? Give Coaster a try today.