cPanel Blog

Quick Start Guide to Site Publisher Templates | For Hosting Providers and Resellers

Many end-users are looking for a simple way of getting a functional site online as quickly as possible. In our latest release we introduced Site Publisher, a tool that can give your customers a live site in just a few clicks. 

As a designer and hosting reseller, I decided to take stab at creating my own template for Site Publisher and was surprised how easy it was. In this post, I’ll show you how to create a new Site Publisher template to offer your customers  as well as provide you a special, new template I’ve designed that you can customize to your heart’s content.

Template files

Begin by having a design that you’d like to implement. Once you have the  design you’d like to use, all you need next are three Site Publisher files to begin turning your layout  into a usable template:

  1. meta.json
  2. index.html.tt
  3. preview.png
  4. license.txt (optional)
  5. readme (optional)

Create the meta.json file

The meta.json file is used to display the template information. This is where you set up the fields that appear on the “Customize and Publish” step within the Site Publisher interface.

Example:

{
"information":{
"id":"entrepreneur_template",
"name":"Entrepreneur Template",
"description":"A single page business site",
"preview_image_path":"preview.png"
},
"fields":[
{
"id":"logo_url",
"label":"Company Logo",
"type":"text",
"placeholder":"Image URL"
},
{
"id":"hero_url",
"label":"Hero/Banner Image",
"type":"text",
"placeholder":"Image URL"
},
{
"id":"headline",
"label":"Headline or Title",
"type":"text",
"placeholder":"Headline"
},
{
"id":"intro",
"label":"About or Intro Content",
"type":"textarea",
"placeholder":"About us or intro content"
}
]
}
Screen Shot 2016-05-09 at 5.46.57 PM

Create the index.html.tt file

This file utilizes Template Toolkit code and is used to generate the index.html file for each Site Publisher website. (You’ll notice the variables in this file correspond to the id’s in the meta.json file.)

Example:

<!DOCTYPE html>
<html lang="en">
<body>
<div class="container-fluid container-max-width">
<div class="row">
<div class="col-md-12 text-center">[% IF logo_url.length %]<a class="logo" href="/"><img src="[% logo_url | url %]" alt="Logo" /></a>[% END %]</div>
</div>
</div>
[% IF hero_url.length %]<header class="container-fluid">
<div class="row">
<div class="jumbotron container-max-width">
<img src="[% hero_url | url %]" alt="Hero Image" class="img-responsive center-block">
</div>
</div>
</header>[% END %]
<section class="container-fluid text-center main">
<div class="container-max-width">
<div class="row">
<h2 class="col-md-12">[% IF headline.defined %][% headline | html %][% END %]</h2>
<div class="col-md-8 col-md-offset-2">
<p class="sub-heading">[% IF intro.defined %][% intro | html %][% END %]</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>[% IF service_title.defined %][% service_title | html %][% END %]</h3>
<p>[% IF service_desc.defined %][% service_desc | html %][% END %]</p>
</div>
<div class="col-md-4">
<h3>[% IF service_title_two.defined %][% service_title_two | html %][% END %]</h3>
<p>[% IF service_desc_two.defined %][% service_desc_two | html %][% END %]</p>
</div>
<div class="col-md-4">
<h3>[% IF service_title_three.defined %][% service_title_three | html %][% END %]</h3>
<p>[% IF service_desc_three.defined %][% service_desc_three | html %][% END %]</p>
</div>
</div>
</div>
</section>
</body>
</html>

Create the preview image (preview.png: 300×200 px)

This is the preview image that the Site Publisher interface will display for your template.

preview

 

Once you have these files set up, you’re ready to publish your template!

Publishing the template

To publish your template, simply copy your template files along with any additional files you’d like to include such as CSS, fonts, etc. into the appropriate directory on your cPanel & WHM server:

Store templates that you’d like to make available to all users on the box within a template-specific directory in the /var/cpanel/customizations/site_templates/your_template_name directory.

OR

For Resellers

Store templates that you’d like to make available only to accounts that you manage within a template-specific directory in the /home/reseller_username/var/cpanel/reseller/site_templates/your_template_name directory.

Screen Shot 2016-05-09 at 6.27.39 PM

That’s it folks!

I hope this article makes it just as easy for you to create templates as it is for your customers to launch a site with Site Publisher.  Enjoy your free Site Publisher template download below and please share your comments.

Download Free Site Publisher Template

For more detailed documentation on Site Publisher, visit https://documentation.cpanel.net/display/SDK/Guide+to+Site+Publisher+Templates

Barbara

cPanel Senior Marketing Web and UI Designer, typography obsessed problem solver and longtime cPanel user.

  • Scott Neader

    This is excellent! Thanks for putting this tutorial together. Please pass along my thanks to Adam F for seeing this whole project to fruition.

    • cPanelbenny

      Thanks, Scott! I’ll definitely pass it on, and I’m sure they’ll all love to hear it. 🙂

    • cpanelAdamF

      Duly passed along to me! Thanks, scott!