Creating Themes in Impresspages CMS

Today's tutorial is my contribution towards the (IP) ImpressPages  CMS, we will simply look at how we can easily convert HTML/CSS web pages to the IP CMS, currently the ImpressPages Market houses some themes but we will be looking at creating more nice themes so you can contribute to the  MarketPlace.

    For brevity sake, I decided to make use of the Blacktie Stanley theme, as it luckily falls under the Common Creative license which allows us to redistribute. This favors me as I do not need to create a template from scratch. So I would like to dedicate this article to Blacktie for making such an awesome template free.

 

ImpressPages Theme Structure


zyYQIk3TTpoBgLombn_wm855QEeHYZPCw2Z2TTOf

This is a simple IP theme layout and in my own words I will explain each folder:

assets – This contains all your front-end assets such as fonts, images, JavaScript and css/less

override – This overrides the view template of a Core IP file or a plugin, it should be noted that you cannot override PHP Classes here

setup – This contains meta-information about the theme and also the JavaScript File which allows real-time  preview and the ability to add design options.

translation - This folder contains multilingual translations of theme interface strings.

 

NOTE: It should be noted that IP treats any PHP file in the theme’s root folder without an underscore as a layout file. A Layout file contains HTML with placeholders where widgets can be dropped and this can be changed at the back-end. For instance assuming I need a unique homepage. All I need to do is to create a homepage.php and set it as a layout for the ‘home’ page in the Pages section of the administration panel.

 

Getting Started

So we simply create an empty theme and for this purpose, I intend to name the template something different, sadly am not good with naming nomenclatures; so I will simply give it the name of my favorite character “Sephiroth” (as i am an HARDCORE Final Fantasy fan) and call it “Sephira”. You can simply copy and paste the Air template and rename it as “Sephira” to serve as boilerplate.

 

Setting up the theme information

    Our first task is to create the Meta-information for the theme and any information you want added on the theme. The following information is what I will be using, you can paste this code in the file “theme.json” under the setup folder.

{
"title": "Sephira",
"version": "1.00",
"doctype": "HTML5", 
/* HTML5, XHTML1_STRICT, XHTML1_TRANSITIONAL, XHTML1_FRAMESET,
HTML4_STRICT, HTML4_TRANSITIONAL, HTML4_FRAMESET  */
"thumbnail": "thumbnail.png",    "author": "dojoVader/geostigma "
}

you should see your newly created theme listed in the Design section of admin:

 

Now at this point, we can simply install the theme, we install it because we want immediate visual feedback.

 

This is what my homepage looks like, so blank and awesome . This makes things easier as it serves as a foundation for creating a new template.I1QulCViLQEjiSN18SwBJ6fDvpNafOte973WrsuX

 

This is the theme “Stanley” from Blacktie, for the purpose of the article I will be changing some elements to fit the purpose of this tutorial.

 

First Task: Separate Header and Footer

The first step is to simply create our header and footer as this helps in reducing code oS07Q6WF87oX8M0hHU1L6v2Asl6c_xIP_tIyZgSKduplication, so my first task is to replace the head section with ImpressPages codes, and saving it in a _header.php so that other layouts can easily use it.

<?php echo ipDoctypeDeclaration(); ?>

<html<?php echo ipHtmlAttributes(); ?>>

<head>

   <meta charset="utf-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta name="description" content="">

   <meta name="author" content="">

   <?php ipAddCss('assets/css/bootstrap.css'); ?>

   <?php ipAddCss('assets/css/main.css'); ?>

   <?php echo ipHead(); ?>

   <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

   <title>STANLEY - Free Bootstrap Theme </title>

   <?php echo ipAddJs('assets/js/hover.zoom.js'); ?>

   <?php echo ipAddJs('assets/js/hover.zoom.conf.js'); ?>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

   <!--[if lt IE 9]>

   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

   <![endif]-->

</head>

<body>

<!-- Static navbar -->

<div class="navbar navbar-inverse navbar-static-top">

   <div class="container">

       <div class="navbar-header">

           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

               <span class="icon-bar"></span>

               <span class="icon-bar"></span>

               <span class="icon-bar"></span>

           </button>

           <a class="navbar-brand" href="index.html"><?php echo ipSlot('logo'); ?></a>

       </div>

       <div class="navbar-collapse collapse">

           <ul class="nav navbar-nav navbar-right">

               <li><a href="work.html">Work</a></li>

               <li><a href="about.html">About</a></li>

               <li><a href="blog.html">Blog</a></li>

               <li><a href="contact.html">Contact</a></li>

           </ul>

       </div><!--/.nav-collapse -->

   </div>

</div>

Code Breakdown

    There's a lot going on in the code but I will take my time to break this down, IP has some helper method to help create your template with ease, at this point you should be familiar with IP functions and how to locate them.

However with a good IDE you should get PHPDocs support on what each method does, however I would still shed light on some IP functions. The ipHead function generates the JavaScript/CSS files in the header section, while the ipAddCss adds the css files to queue. What the ipHead simply does ; is to iterate over the queue and prints all css in the head section. If you are familiar with Zend/View/Helpers and WordPress Enqueue System this will be easy to grasp. This means if you add ipAddCss after the ipHead your files will not be listed in the head section. The ipSlot(‘logo’) is a function that helps generate either a text for your site-name or an image for your logo, this slot is very convenient as you can change to any type of your choice

 

Slots

Slots are a bit complicated for a first timer so I will try to explain in simple terms, but before anything the first rules about Slot is that, you cannot drag and drop contents to Slot, the content of a slot has to be provided by a plugin, meaning a code is responsible for returning the formatted html content to be viewed on the screen. The best part about slot is that if you call a slot that doesn't exists it simply renders nothing.

 

Journey so far

The following screenshot shows the progress of the site after altering the _header.php

 

lm46s77Hs-10q754jeedk0ZWKVPWdwgZvfimcWQY

Note: because IP uses the Bootstrap toolkit, you should be careful on your css codes and ensure that you don’t have anything modifying or overriding rules for the IP Admin bar, however towards the end of the tutorial we will ensure to fix this but for now, its something we can live with.  

 


 

Footer

<div id="footer">

   <div class="container">

       <div class="row">

           <div class="col-lg-4">

               <h4>My Bunker</h4>

               <p>

                   Some Address 987,<br/>

                   +34 9054 5455, <br/>

                   Madrid, Spain.

               </p>

           </div><!-- /col-lg-4 -->

<div class="col-lg-4">

               <h4>My Links</h4>

               <p>

                   <a href="#">Dribbble</a><br/>

                   <a href="#">Twitter</a><br/>

                   <a href="#">Facebook</a>

               </p>

           </div><!-- /col-lg-4 -->

<div class="col-lg-4">


               <?php echo ipSlot('text', array('id' => 'themeName', 

'tag' => 'h4', 'default' => __('Stanley', 'Sephira', false), 'class' => '')); ?>

               <p>This cute theme was created to showcase your work in a simple way. Use it wisely.</p>

               <p><?php echo sprintf(__('Drag & drop with %s', 'Air'),

'<a href="http://www.impresspages.org">ImpressPages</a>'); ?></p>

           </div><!-- /col-lg-4 -->

</div>

</div>

</div>

<?php echo ipJs(); ?>

</body>

</html>

So we later copy the footer code from the template and add some IP codes such as Slot; however Ii will be focusing on converting the template to IP template, once this task has been completed we will later look at using Slots and adding widgets. The following shows the screenshot of the site after altering the _footer.php

oGq__hLFa403goLSND7dx6bFAB0tDtzTzD0COimk

 

Layout

So far we have a basic template and can proceed however before we do, I will like to state that generally as much as we can have layouts for blogs, about and other pages, its the usual practice to have a generic template, meaning a blank layout where you can drag and drop widgets and populate the contents of the page. So at this point we will split this topic into 2 parts Generic Layouts ( General Layouts ) and Specific Layouts.

 

General Layouts

General Layouts are layouts that will be used for generic purposes, this is similar to CMS which uses dynamic content within the same layouts compared to static layouts. In order to achieve this we will create a file called “main.php” (remember layout files are files without underscore as names ) In order to use the layout you need to go to Administrator / Pages and select the layout.

46sv2xiBcac5abDK88ZKKBpO9e30DSvP7cuX8PNs

 

then you paste the snippet below in the main.php

 


<?php echo ipView('_header.php')->render(); ?>

<div id="white">

   <div class="container">

       <div class="row">

           <div class="col-lg-8 col-lg-offset-2">

               <p><img src="assets/img/user.png" width="50px" height="50px"> <ba>Stanley Stinson</ba></p>

               <p><bd>January 3, 2014</bd></p>

               <h4>An Image Post</h4>

               <p><img class="img-responsive" src="assets/img/blog01.jpg" alt=""></p>

               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

               <p>It has survived not only five centuries, 

but also the leap into electronic typesetting, remaining essentially unchanged.</p>

               <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

               <br>

               <p><bt>TAGS: <a href="#">Wordpress</a> - <a href="#">Web Design</a></bt></p>

               <hr>

               <p><a href="blog.html"># Back</a></p>

           </div> </div><!-- /row -->

   </div> <!-- /container -->

</div><!-- /white -->

<?php echo ipView('_footer.php')->render(); ?>

 

Screenshot

OBFNCs7Eu6mhG_CUP6nidPpgBARfhfwnhCrXzCmh

 

Gotchas

A common problem usually faced with creating templates, is the issue of loading images from the assets folder, in order to point the folder easily we will leverage on one of IP helper methods ipThemeUrl, this function loads an assets in relative to the theme folder.

 


<?php echo ipThemeUrl("assets/img/image.jpg"); ?>

 

So let’s fix the issues and load the appropriate images, however it should be noted that we won’t be using this images but will just cover it regardless, just to show you how to load images relative to the theme folder.

And finally we get images working

bTbuiO3mU_GX9w0ZF8yu6Gxsmmnhc07C8siZxrpO


 

Now because we want this page to be the general page for any content, we will strip out the images and content and replace them with IP codes and Ii will explain the role of each function Ii use. So I have the following code in my default template:


<?php echo ipView('_header.php')->render(); ?>

<div id="white">

   <div class="container">

       <div class="row">

           <?php echo ipSlot('breadcrumb'); ?>

           <div class="col-lg-8 col-lg-offset-2">

           <p><?php echo ipBlock('main')->render(); ?></p>


           </div>

<div class="col-lg-2">

               <p>Sidebar Goes Here</p>

               <p><?php echo ipBlock(‘side’)->render(); ?></p>

</div>


       </div><!-- /row -->

   </div> <!-- /container -->

</div><!-- /white -->

<?php echo ipView('_footer.php')->render(); ?>

 

Now I used the function ipBlock, this method acts as a container for widgets, meaning it makes the block a zone where you can easily drag and drop Widgets, however it should be noted that the “main” is a special block as most of the important content goes there, it is encouraged that you use the “main” where you expect to have important page contents. As you can see I created another block with the name “side” according to IP block naming convention.

 

NOTE:

 

The contents of block can be reused in other pages by adding this code

<?php echo ipBlock('side1')->asStatic()->render(); ?>

 

The only caveat is that “main” cannot be declared as static, because think of it, “main” is meant to dynamic where each pages fills the zone with it’s page contents. So with this code in place our theme becomes more dynamic.





 

Screenshot

BOWOhNzeRTYQk0WQ9mmSS2R52YHyPe2ZXGr6BO_V

 

As you can see from my annotations, I simply illustrated the various widgets I drag and dropped to each block. So far we have a dynamic layout which can be used for any page. The beautiful thing about ImpressPages is that ; converting an html theme to an ImpressPages theme is so simple and straightforward compared to “some” content management systems.  

 

SPECIFIC LAYOUTS

Specific layouts are contents that are not dynamic and have a specific purpose , an example can be “Homepage”,”Contact” or “About us”. Ideally you can use your default layout to whip up some contents to have those information however, specific layouts have advanced styling which are almost impossible to create via ImpressPages default widgets. It should be noted that ImpressPages has no idea of specific layouts or general layouts, in fact both are considered layouts. Both we can add areas in specific templates where users can easily change and edit.

 

Task ( Create About Page Layout )

So our first task is to create the “About” layout where we allow the user to simply change the avatar and also the content in the text. This is the screenshot before the modification.

kJN7W7TqEIgaQNWhd13PRsfKvdcjEP2woKRsfe13

about.php

 


<?php echo ipView('_header.php')->render(); ?>

<div id="white">

   <div class="container">

       <div class="row">

<div class="col-lg-8 col-lg-offset-2 centered">

<?php

$options = array(

   'id' => 'contact',

   'width' => '155',

   'height'=>'155',

   'class' => 'cssclass(optional)',

   'default' => ipThemeUrl('assets/img/user.png')

);

echo ipSlot('image', $options);

?>


                    

                    <h1>About</h1>

                    <p><?php echo ipSlot('text', array(

   'id' => 'contactText',

   'default' => 'The default text'

)); ?>

</p>

                

                </div>

                </div>

                </div>

                </div>

<?php echo ipView('_footer.php')->render(); ?>    

 

Basically all we needed was the Slot Text and Image, this allows users to make dynamic ImpressPages templates as you can observe, user can now edit and update the information on the page with ease. You should read more on Slot and its parameters to gain more understanding. It should be noted that each Slot ID must be unique.

wmYshR1Ths1xtntTt5UB4k2WYN6k-CGWFFfHMJ1P

 

Right now the next task is to create the homepage and add our Slot (Text and Images), so that users can add or edit the information. This is the static homepage screenshot before we make our modification.

ubkXkp579L7TTUobufEPnBk43r-CSVWf1fgV_Z7G




 

edit

 

So now our first task is to create the Text contents on the homepage, obviously this means we use the Slot Text because we want user to be able to modify the content of the homepage and Slot Image, and this becomes my final result.


<?php echo ipView('_header.php')->render(); ?>

   <div id="ww">

        <div class="container">

            <div class="row">

                <div class="col-lg-8 col-lg-offset-2 centered">

                    <?php

                $options = array(

                    'id' => 'homeImage',

                    'width' => '155',

                    'height'=>'155',

                    'class' => '',

                    'default' => ipThemeUrl('assets/img/user.png')

                );

                echo ipSlot('image', $options);

                ?>

                <h1><?php echo ipSlot('text', array(

   'id' => 'homeHeadText',

   'default' => "Hi My name is Okeowo Aderemi"

)); ?> </h1>

                    <?php echo ipSlot('text', array(

   'id' => 'homeText',

   'default' => "Hello everybody. I'm Stanley, a free handsome bootstrap theme coded by BlackTie.co. A really simple theme for those wanting to showcase their work with a cute & clean style.


Please, consider to register to our newsletter to be updated 

with our latest themes and freebies. Like always, you can use this theme in any project freely. Share it with your friends."

)); ?>


                

                </div><!-- /col-lg-8 -->

            </div><!-- /row -->

        </div> <!-- /container -->

    </div>

    <div class="container pt">

<div class="row mt centered">

        <?php echo ipBlock('homeWidget')->render();?>

        </div>

    </div>

   <div class="clear"></div>

<?php echo ipView('_footer.php')->render(); ?>

YF2ZZWQz5iGTMYcPhkzLQE8sxf6ZxIB4f4Lr75rg

 

Right now, what we need is cater for the section where the user has to put his portfolio, now at this point we have 2 choices, we can either use the Slot images and have multiple images, however this seems a bit unnecessary, also we need the images to point to a url describing the portfolio, so we will use a block where we can drag the Gallery Widget and modify the gallery view to achieve this. And also we will make a copy of the gallery skin file in our override folder and ensure it follows the stanley markup. So at this point because Ii need to modify the view of the Gallery template Ii simply copied the Ip/Internal/Content/Widget/Gallery/skin/default.php to my override folder using this markup below Ii ensured to follow the template’s markup to give it the same look and feel.


<?php if (isset($images) && is_array($images)) { ?>

<div class="_container">

<?php foreach ($images as $imageKey => $image) { ?>

   <div class="_item ipsItem">

       <a

           <?php if ($image['type'] == 'lightbox' && !ipIsManagementState()) { ?>

               rel="lightbox"

               href="<?php echo escAttr($image['imageBig']); ?>"

           <?php } ?>

           <?php if ($image['type'] == 'link') { ?>

               href="<?php echo escAttr($image['url']); ?>"

               <?php echo $image['blank'] ? ' target="_blank" ' : ''; ?>

           <?php } ?>

           class="_link"

           title="<?php echo esc($image['title']); ?>"

           data-description="<?php echo isset($image['description']) ? escAttr($image['description']) : ''; ?>"

           >

           <img class="_image ipsImage" src="<?php echo escAttr($image['imageSmall']); ?>" 

alt="<?php echo escAttr($image['title']); ?>" />

       </a>

   </div>

<?php } ?>

</div>

<?php } ?>

I simply copied the Gallery default skin and modified it to match the theme’s markup and it works now as shown in the screenshot below:

 

download.png

And there we have a beautiful laid out portfolio, this illustrates the point that your theme can customize the output of various widget layouts, knowing this;  will give you great advantage over the output of ImpressPages widget appearance. however our job is not done yet.

 

WHATS ON THE MENU

 

Menu From ImpressPages

t5kNIdfegeoGlxWvP8jnN266tdGF8MJ5hvlyScHl

 

Menu on the Theme

glEaSJ_NKss2kjl-G-KyDLVB2JNEu5ouscuAJL_u

 

As you can clearly see, this menu have been hardcoded in the template, we are simply going to create the menu so it reflects the Impresspages template, my first task is to simply use the Slot Menu. The first step is analyze the theme’s menu assuming you got the template from someone, but if you did build this from scratch you would have an idea of the menu structure. So after learning the structure you adapt ImpressPages code to fit the menu’s way. Luckily the theme uses a bootstrap menu layout so IIIi simply steal  borrow from my previous themes.

So it changes from :


<div class="navbar-collapse collapse">

           <ul class="nav navbar-nav navbar-right">

               <li><a href="work.html">Work</a></li>

               <li><a href="about.html">About</a></li>

               <li><a href="blog.html">Blog</a></li>

               <li><a href="contact.html">Contact</a></li>

           </ul>

       </div>

To:

 


<div class="navbar-collapse collapse ">


               <?php

               $menuOption=array(

                   'items'=>'menu',

                   'attributes'=>array('class'=>'nav navbar-nav navbar-right')

               );

               echo ipSlot('menu',$menuOption);

               ?>


</div><!--/.nav-collapse →

 

UPDATED

Thanks to Tachyon on the ImpressPages IRC, it should be noted that the Slot Menu uses the property ‘items’ to fetch the menu from the backend as shown in the screenshot below

HDId2q23i2tplWAXwNE4WdOC2Glbcq7wjzSDLsmb

So if for any reason you don’t see any menu on the template and it shows on other templates you can easily change the name in the code, to reflect with the name for the menu in the backend.

 

HOLD UP

 

But something seems wrong here

08hOEgasu_CqrMDwn4E5s-3y9EPsux18VGVS1Jn7

After series of investigation it seems the reason is that the drop down menu is messed up because its not using Bootstrap’s Layout but the default one from Impresspages so with great power comes awesome skills. What we do is to simply override the menu template, luckily i created one in my earlier attempts at theme creations so let’s steal that.


<?php


/**

* This comment block is used just to make IDE suggestions to work

* @var $items \Ip\Menu\Item[]

* @var $this \Ip\View

*/

?>

<?php if (!empty($items)){ ?>

<ul <?php echo $attributesStr; ?>><?php

   foreach($items as $menuItem) {

       $css = array();

       $submenu = '';

       $target = '';

       $class = '';

       $anchorToggleClass='';


       if($menuItem->isCurrent()) {

           $css[] = $active;

       } elseif ($menuItem->isInCurrentBreadcrumb()) {

           $css[] = $crumb;

       }

       if(sizeof($menuItem->getChildren()) > 0) {

           $css[] = "dropdown";

           $anchorToggleClass="dropdown-toggle";


       }

       if ($menuItem->isDisabled()) {

           $href = '';

           $css[] = $disabled;

       } else {

           $href = ' href="' . escAttr($menuItem->getUrl()) . '"';

       }


       if ($menuItem->getBlank()) {

           $target = ' target="_blank"';

       }


       if ($menuItem->getChildren()) {

           $submenuData = array(

               'items' => $menuItem->getChildren(),

               'depth' => $depth + 1,

               'attributesStr' => 'class="dropdown-menu" role="menu"'

           );


           $submenuData = array_merge($this->getVariables(), $submenuData);

           $submenu = ipView('menu.php', $submenuData)->render();


       }


       if (!empty($css)) {

           $class = ' class="'.implode(' ', $css).'"';

       }

       ?>

       <li<?php echo $class; ?>>


           <a <?php echo (strlen($anchorToggleClass) > 0) ? 'data-toggle="dropdown" ': '' ?> class="<?php


echo $anchorToggleClass ?>" <?php echo $href; ?><?php echo $target; ?> title="<?php echo escAttr($menuItem->getTitle()); ?>">

             <?php echo $menuItem->getTitle(); ?>

           </a>

           <?php echo $submenu; ?>

       </li><?php

   } ?>

</ul>

<?php }

What i simply did was to copy the original menu view template to my override folder and altered it so it could match the standard bootstrap menu layout. which means i copied the default.php from Ip/Content/Widget/Gallery/skin to my override folder.

qZ1-LJGwee4fYSWf5MYUYvbqYjNnkoTWBb7MvYfl

 

HOLD UP

We have an issue and it seems the Dropdown menu doesn’t work, a little investigation points to the fact that i didn’t include bootstrap because ImpressPages has bootstrap already, but when am not logged in i have no bootstrap included as the bootstrap is used for ImpressPages Admin Bar, so I simply create this code to escape such dilemma


<?php

if(!ipAdminId()):

?>

<?php echo ipAddJs('js/bootstrap.min.js'); ?>

<?php

endif;

?>

What this does is to check if am in Management Mode and if Ii am it doesn’t add bootstrap and and if am not we get bootstrap. and finally we get a dropdown menu as shown below:

kew2LK4ozs2yQKk7ga3m4Npq5FBYVDytaeJdlHGk

So far we have made alot of progress in this template all we need to do is to add blocks to footer section to enable user edit the information on the page.

VfIf8Pal27P-cuNnVLT5kTSu104Q4SZThiuXTEUU

 

If you have been following the tutorial you will realize that all we simply need to do is create the ipBlock in the Footer section and our day has been made.

 


<div class="row">

           <div class="col-lg-4">

               <h4><?php echo ipSlot('text', array(

   'id' => 'footerHeaderText',

   'default' => 'My Address'

)); ?></h4>

               <p><?php echo ipSlot('text', array(

   'id' => 'footerContextText',

   'default' => 'The default text'

)); ?>

           </div><!-- /col-lg-4 -->

<div class="col-lg-4">

               <p><?php echo ipBlock('footerBlock')->render(); ?></p>

           </div><!-- /col-lg-4 -->

<div class="col-lg-4">

I simply replaced the _footer.php with the following lines and dragged a Rich Text Editor to the block and pasted the HTML content Ii copied from the page so IIi can easily modify the content and change the links as Ii deem fit or Ii can simply replace that with another widget depending on what you feel comfortable with. Viola we get this

f3XA7olOsea0aeh457AMN9tJGC_U4ADellWG7CDY


 

Journey So Far

 

At this point my template looks alright and i can easily add contents and widgets to it easily. the following shows a screenshot of the theme with multiple widgets added to it.


Contents.png

WRAPPING UP

 

At this point, we have basically touched every important aspect of creating templates for ImpressPages, however the next section touches on Theme options and screenshot, these are important topic because a user would use the screenshot to identify the specific theme, so we will need to create a screenshot, ideally a screenshot should contain dummy content and not personal information, so Ii will fill in dummy contents and stock images.  Luckily IIi use a Chrome tool called awesome screenshot(responsible for all screenshots on this page), so Ii simply take a full screenshot of the page and save it as thumbnail.png in the setup folder according to the instructions of ImpressPages.

 

Result

XSrJBgjBUvrnlK97h4l_o8zXwxdZmgOGYHTD1bgX

 

This is also useful for author looking to sell their templates on the MarketPlace, it should noted that you should be honest with your screenshots.

and finally we have the theme options.

 

THEME OPTIONS

    Theme options are configuration allows website administrators edit theme settings without additional coding, theme options is usually used in premium themes where users have no technical or programming skills.

So for this tutorial we will be looking at 3 simple options

  1. backgroundColor

  2. Text Color

  3. Custom CSS Codes

 

Unlike “some” Content Mmanagement Systems , creating theme options are unnecessarily complex , so complex that 3rd parties build options framework just to make things saner, however with ImpressPages  creating theme options are easier and more straightforward. The most important part you need to know about ; is that options for themes are placed in the theme.json file, which is found in the setup folder.

The following is a snippet of my options in the theme.json


{

   "title": "Sephira",

   "version": "1.00",

   "doctype": "HTML5", /* HTML5, XHTML1_STRICT, XHTML1_TRANSITIONAL, XHTML1_FRAMESET, HTML4_STRICT, HTML4_TRANSITIONAL, HTML4_FRAMESET  */

   "thumbnail": "thumbnail.png",

   "author": "dojoVader/geostigma ",

   "options": [

       {

           "label": "Body background color",

           "name": "bodyBackgroundColor",

           "type": "color",

           "default": "#fff"

       },

       {

           "label": "Text color",

           "name": "textColor",

           "type": "color",

           "default": "#fff"

       },

       {

           "label": "Custom CSS",

           "name": "customCSS",

           "type": "text",

           "default": "" }

   ]


}

And after we refresh we get this

 

DMVOocI4UtURyiaf-NJ2APg4P3XxJH0luB9WAspY

 

NOTE

The following section requires you to have basic JavaScript Knowledge or even jQuery knowledge

 

Real Time Preview

    The Real Time Preview well…..., allows you see your preview in real time, what makes this interesting is that you have control how the changes are implemented. Yyou will be using JavaScript or Jquery to effect those changes.  Iit should be noted that this needs to be saved in the  options.js file inside the setup folder. Here is an example of a snippet

 


var ipDesignOptions = {

   bodyBackgroundColor: function (value) {

       'use strict';

       $('body').css('background-color', value);

   }

};

 

The Synatx is quite simple, you simply pass the Option name as the property of the ipDesignOptions that is a function which will be the callback function with the parameter ‘value’.

BwTWgjxDSSgJmQOmUx3HbsQv2zjkDsZigb2KvJdq

So when the user selects the Body background color and the value, a function will be called with the value selected as the parameter. At the same time it also saves the changes which can be retrieved by code using:

 

<?php echo ipGetThemeOption('bodyBackgroundColor'); ?>

This logic is placed in the template or layout. so Ii placed the following code in my _header.php after the template loads the CSS, this allows overriding.


<style>

       body{

          background:<?php echo ipGetThemeOption('bodyBackgroundColor','black'); ?> !important

       }

       .row .centered{

           color:<?php echo ipGetThemeOption('textColor','black'); ?> !important

       }

       <?php echo ipGetThemeOption('customcss'); ?>


   </style>

NOTE: You should be careful with this, because its possible not to get a real time feedback especially when you have too many rules overriding your property, however with the code in the _header.php after the CSS files, you will get a accurate feedback once you click save and the pages refresh.

 

The following can be seen from the Screenshot

M4mUDZivESL418-IIcqX5sOWyCxdV39sR7rvonNT

 

And that’s concludes this tutorial..  Feel free to ask questions and point out any mistakes -  thank you.

 

Updated:

You can now download the theme from ImpressPages Store just look for the name StanleyIP, sadly I wasn’t familiar with making demos so it looks plain.

 

Thanks for all the corrections so far really grateful.

 

Author: Okeowo Aderemi (dojoVader)

 

email:okeowoaderemi@gmail.com