Whether you are getting started or want to expand your Blesta theme to get the most out of the Blesta CMS plugin, you can get tips and tuts here...

If you need support please contact us via Live chat for a complimentary support code (if we beleive we help) or support if you have a valid support and updates license.

Installation

Upload the zip to your blesta root normally /home/username/public_html/, then extract the zip.

Head over to the settings page on Blesta: Settings > Company > Plugins then hit "Install" on the BlestaCMS plugin.

Integrate

Head over to the structure of the theme you're integrating into the CMS. It's recommended to not use the default bootstrap folder.

You can simply create a new folder and copy the files over to the new one. Simply rename it by editing the config.json.

Example: /app/views/client/theme-name/structure.pdt

<?php
    Loader::loadModels($this, array("BlestaCms.CmsPages"));
    $menu_items = $this->CmsPages->getMenuItemsWithChilds();
    $lang = $this->CmsPages->getCurrentLang();
    $default_lang = $this->CmsPages->getAllLang()[0]->uri;
?>

Time to integrate the custom menu, this is what the default menu would look like for Bootstrap, edit to your theme requires. Every theme is different.

We recommend you remove all the menu items minus one dropdown and one standard link. Then integrate the dropdown by checking if it has a child menu. Then see what the dropdown menu links have which the standard doesn't and make the dropdown menu items only show if they have a child menu.


              <div class="nav-content">
    <div class="nav">
        <nav class="custom-nav" role="navigation" style="margin-top: 11px;margin-bottom:0;padding:0;float: right;">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#cms-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="cms-navbar">
                <ul class="nav navbar-nav">
                  <?php if(!empty($menu_items)){
                      foreach ($menu_items as $item) {
                  ?>
                  <li>
                                      <a href="<?php if($item->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($item->uri == '/' ? null : $item->uri)), ''); }else{ echo $item->uri; } ?>" <?php if($item->target === 'newtab'){ ?>target="_blank"<?php } ?>
                                          <?php if (!empty($item->childs)) { ?>aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown"<?php } ?>>
                                            <?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?>
                              <?php if (!empty($item->childs)) { ?><b class="caret"></b><?php } ?>
                                      </a>
                                          <?php
                                              if (!empty($item->childs)) {
                                          ?>
                                          <ul class="dropdown-menu">
                                              <?php
                                                  foreach ($item->childs as $child) {
                                              ?>
                                              <li>
                                                  <a href="<?php if($child->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($child->uri == '/' ? null : $child->uri)), ''); }else{ echo $child->uri; } ?>" <?php if($child->target == 'newtab'){ ?>target="_blank"<?php } ?>>
                                                      <?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?>
                                                  </a>
                                              </li>
                                              <?php } ?>
                                          </ul>
                                      <?php
                                          }
                                      ?>
                                  </li>
                                <?php } ?>
                            </ul>
                        <?php
                            }
                        ?>
                    </li>
                    <?php } } ?>
                </ul>
            </div>
        </nav>
    </div>
</div>

Terms:

$item->target & $child->target: External URL

$item->uri & $child->uri: Menu Link

$item->title[$lang] & $child->title[$lang]: Menu Title

$default_lang Default language if you have more than one language

Blesta Navigation

If you would like to hide the blesta navigation for logged in customers, you can do so by replacing it with the following:


              <?php if (strpos($_SERVER['REQUEST_URI'], "client") || strpos($_SERVER['REQUEST_URI'], "plugin") || strpos($_SERVER['REQUEST_URI'], "order") !== false){
	if (!$this->Html->ifSet($logged_in)) {
?>
<div class="clearfix"></div>
<div class="no-nav"></div>
<?php }else{ ?>
<div class="nav-content <?php if( strpos($_SERVER['REQUEST_URI'], "plugin") ){echo "navbar-plugins";} ?>" style="margin-top: 0px;">
	<div class="nav">
		<nav class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only"><?php $this->_("AppController.sreader.navigation");?></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<div class="container">
					<?php
					$active_nav = null;
					?>
					<ul class="nav navbar-nav">
						<?php
						foreach ($this->Html->ifSet($nav, array()) as $link => $value) {
							$attributes = array();
							$link_attributes = array();
							$dropdown = !empty($value['sub']);
							$active = false;

							if ($value['active']) {
								$active = true;
								$attributes['class'][] = "active";
								$active_nav = $value;
							}
							if ($dropdown) {
								$attributes['class'][] = "dropdown";
								$link_attributes['class'][] = "dropdown-toggle";
								$link_attributes['data-toggle'][] = "dropdown";

								// Set parent to active if child is
								if (!$active) {
									foreach ($this->Html->ifSet($value['sub'], array()) as $sub_link => $sub_value) {
										if ($sub_value['active']) {
											$attributes['class'][] = "active";
											break;
										}
									}
								}
							}
						?>
						<li<?php echo $this->Html->buildAttributes($attributes);?>>
							<a href="<?php $this->Html->_($link);?>"<?php echo $this->Html->buildAttributes($link_attributes);?>>
								<i class="<?php $this->Html->_($value['icon']);?>"></i>
								<?php
								$this->Html->_($value['name']);

								if ($dropdown) {
								?>
								<b class="caret"></b>
								<?php
								}
								?>
							</a>
							<?php
							if (!empty($value['sub'])) {
							?>
							<ul class="dropdown-menu">
								<?php
								foreach ($this->Html->ifSet($value['sub'], array()) as $sub_link => $sub_value) {
								?>
								<li>
									<a href="<?php $this->Html->_($sub_link);?>"><i class="<?php $this->Html->_($sub_value['icon']);?>"></i> <?php $this->Html->_($sub_value['name']);?></a>
								</li>
								<?php
								}
								?>
							</ul>
							<?php
							}
							?>
						</li>
						<?php
						}
						?>
					</ul>

					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<?php $this->Html->_($contact->first_name);?> <?php $this->Html->_($contact->last_name);?>
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="<?php echo $this->Html->safe($this->client_uri . "main/edit/");?>"><i class="fa fa-edit fa-fw"></i> <?php $this->_("AppController.client_structure.text_update_account");?></a></li>
								<li><a href="<?php echo $this->Html->safe(WEBDIR);?>members"><i class="fa fa-circle-o fa-fw"></i> <?php $this->_("AppController.client_structure.text_return_to_portal");?></a></li>
								<li class="divider"></li>
								<li><a href="<?php echo $this->Html->safe($this->client_uri . "logout/");?>"><i class="fa fa-sign-out fa-fw"></i> <?php $this->_("AppController.client_structure.text_logout");?></a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div><!-- /#header .navbar-collapse -->
		</nav>
	</div>
</div>
<?php
		 }
	}
?>
            

CMS Blesta Navigation

A customer wanted to integrate the CMS Nav menu into the blesta navigation, so I took that feedback on and went onto the task of trying to get it to work. And I managed to do it however it's not very pretty but it works.
If you wish to do so you can replace the Blesta navigation with the following:

<div class="nav-content">
            <div class="nav">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only"><?php $this->_('AppController.sreader.navigation');?></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <div class="container">
                            <?php
                            $active_nav = null;
                            ?>
                            <ul class="nav navbar-nav">
                                <?php
                                foreach ($this->Html->ifSet($nav, []) as $link => $value) {
                                    $attributes = [];
                                    $link_attributes = [];
                                    $dropdown = !empty($value['sub']);
                                    $active = false;

                                    if ($value['active']) {
                                        $active = true;
                                        $attributes['class'][] = 'active';
                                        $active_nav = $value;
                                    }
                                    if ($dropdown) {
                                        $attributes['class'][] = 'dropdown';
                                        $link_attributes['class'][] = 'dropdown-toggle';
                                        $link_attributes['data-toggle'][] = 'dropdown';

                                        // Set parent to active if child is
                                        if (!$active) {
                                            foreach ($this->Html->ifSet($value['sub'], []) as $sub_link => $sub_value) {
                                                if ($sub_value['active']) {
                                                    $attributes['class'][] = 'active';
                                                    break;
                                                }
                                            }
                                        }
                                    }
                                ?>
                                <li<?php echo $this->Html->buildAttributes($attributes);?>>
                                    <a href="<?php $this->Html->_($link);?>"<?php echo $this->Html->buildAttributes($link_attributes);?>>
                                        <i class="<?php $this->Html->_($value['icon']);?>"></i>
                                        <?php
                                        $this->Html->_($value['name']);

                                        if ($dropdown) {
                                        ?>
                                        <b class="caret"></b>
                                        <?php
                                        }
                                        ?>
                                    </a>
                                    <?php
                                    if (!empty($value['sub'])) {
                                    ?>
                                    <ul class="dropdown-menu">
                                        <?php
                                        foreach ($this->Html->ifSet($value['sub'], []) as $sub_link => $sub_value) {
                                        ?>
                                        <li>
                                            <a href="<?php $this->Html->_($sub_link);?>"><i class="<?php $this->Html->_($sub_value['icon']);?>"></i> <?php $this->Html->_($sub_value['name']);?></a>
                                        </li>
                                        <?php
                                        }
                                        ?>
                                    </ul>
                                    <?php
                                    }
                                    ?>
                                </li>
                                <?php
                                }
                                ?>
                                <?php
                                    if(!empty($menu_items)){
                                        foreach ($menu_items as $item) {
                                 ?>
                                 <li>
                                     <a href="<?php if($item->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($item->uri == '/' ? null : $item->uri)), ''); }else{ echo $item->uri; } ?>" <?php if($item->target === 'newtab'){ ?>target="_blank"<?php } ?>
                                         <?php if (!empty($item->childs)) { ?>aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown"<?php } ?>>
                                           <?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?>
                             <?php if (!empty($item->childs)) { ?><b class="caret"></b><?php } ?>
                                     </a>
                                         <?php
                                             if (!empty($item->childs)) {
                                         ?>
                                         <ul class="dropdown-menu">
                                             <?php
                                                 foreach ($item->childs as $child) {
                                             ?>
                                             <li>
                                                 <a href="<?php if($child->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($child->uri == '/' ? null : $child->uri)), ''); }else{ echo $child->uri; } ?>" <?php if($child->target == 'newtab'){ ?>target="_blank"<?php } ?>>
                                                     <?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?>
                                                 </a>
                                             </li>
                                             <?php } ?>
                                         </ul>
                                     <?php
                                         }
                                     ?>
                                 </li>
                                                <?php } ?>
                                            </ul>
                                        <?php
                                            }
                                        ?>
                                    </li>
                            </ul>

                            <ul class="nav navbar-nav navbar-right">
                                <?php
                                if ($this->Html->ifSet($logged_in)) {
                                ?>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <?php $this->Html->_($contact->first_name);?> <?php $this->Html->_($contact->last_name);?>
                                        <b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<?php echo $this->Html->safe($this->client_uri . 'main/edit/');?>"><i class="fa fa-edit fa-fw"></i> <?php $this->_('AppController.client_structure.text_update_account');?></a></li>
                                        <?php
                                        if ($this->Html->ifSet($portal_installed, false)) {
                                        ?>
                                        <li><a href="<?php echo $this->Html->safe(WEBDIR);?>"><i class="fa fa-circle-o fa-fw"></i> <?php $this->_('AppController.client_structure.text_return_to_portal');?></a></li>
                                        <?php
                                        }
                                        ?>
                                        <li class="divider"></li>
                                        <li><a href="<?php echo $this->Html->safe($this->client_uri . 'logout/');?>"><i class="fa fa-sign-out fa-fw"></i> <?php $this->_('AppController.client_structure.text_logout');?></a></li>
                                    </ul>
                                </li>
                                <?php
                                } else {
                                ?>
                                <li>
                                    <a href="<?php echo $this->Html->safe($this->client_uri . 'login/');?>">
                                        <?php $this->_('AppController.client_structure.text_login');?>
                                    </a>
                                </li>
                                <?php
                                }
                                ?>
                            </ul>
                        </div>
                    </div><!-- /.navbar-collapse -->
                </nav>
            </div>
        </div>

Customize

We know it's so nice to make Blesta into your website and getting your theme looking as perfect as you can, so we've created a small guide so it's easier to follow and customise.

Basic customs

Page Title
Every website has a page title and there's no way better than having it on every page so the user knows what they are viewiing without looking at the title in the window or tab.

With the CMS you can customise how you display it.

<?php
if (strpos($_SERVER['REQUEST_URI'], "blog") == true){
  echo '<h4>' . $page_title . '</h4>';
}elseif (strpos($_SERVER['REQUEST_URI'], "category") == true){
    echo "<h3>Categories</h3>";
}elseif(isset($page_title) && !empty($page_title)){
    echo '<h3>' . $page_title . '</h3>';
}else{
    echo '<h3>' . ($this->Html->ifSet($title) ? $this->Html->_($title, true) : $this->_("AppController.client_structure.default_title", true)) . '</h3>';
}
?>

Description
Not everyone needs this option which is why is why it's opitional but we do recommend it.

With the CMS you can customise how you display it just like the page title.

<?php if (strpos($_SERVER['REQUEST_URI'], "category") == true){ ?>
  Blog
<?php }elseif (strpos($_SERVER['REQUEST_URI'], "blog") == true){ ?>
  <?php echo $categories[$category_id]; ?>
<?php }elseif (strpos($_SERVER['REQUEST_URI'], "order") == true){ ?>
  Order
<?php }else{
  if(!isset($description) && empty($description)){
      echo "Billing Area";
  }else{
      echo $description;
  }
}
?>

How do I keep Blesta's pages centered and my custom pages full width?
Most websites have pages which use the full width of the screen instead of Blesta's centered content. So to acomplish this we need to edit the Blesta content section.

Open /app/views/client/theme-name/structure.pdt and find this:

<?php
if (!empty($active_nav['secondary'])) {
?>

Replace it with:

<?php
if (!empty($active_nav['secondary'])) {
?>
<div class="container">
    <div class="row<?php echo (!$this->Html->ifSet($show_header, true) ? ' login' : '');?>">
      <div class="col-md-3">
          <div class="list-group">
              <?php
              foreach ($active_nav['secondary'] as $link => $value) {
              ?>
                  <a href="<?php $this->Html->_($link);?>" class="list-group-item borderless left-nav <?php echo ($value['active'] ? 'active' : '');?>">
                      <i class="<?php $this->Html->_($value['icon']);?>"></i>
                      <?php
                      $this->Html->_($value['name']);
                      ?>
                  </a>
              <?php
              }
              ?>
          </div>
      </div>
      <div class="col-md-9">
          <div class="row">
              <?php echo $content;?>
          </div>
      </div>
    </div>
  </div>
<?php
} else {
   if (strpos($_SERVER['REQUEST_URI'], "client") && $page_title != "Log In" && $page_title != "Reset Password" ||
            strpos($_SERVER['REQUEST_URI'], "order") || strpos($_SERVER['REQUEST_URI'], "plugin") || strpos($_SERVER['REQUEST_URI'], "blog") !== false){
?>
<div class="container">
        <div class="row <?php echo (!$this->Html->ifSet($show_header, true) ? ' login' : '');?>">
        <?php }else{ ?>
<div class="container-fluid">
        <div class="row <?php echo (!$this->Html->ifSet($show_header, true) ? ' login' : '');?>">
<?php }
       echo $content;
   }
?>
        </div>
</div>

Meta Tags
With the CMS you can set meta tags per page or blog post, and to display them on your website you need to edit the /app/views/client/theme-name/structure.pdt and put this in the <head></head> section of the page.

<?php
  if(!empty($meta_tags['key'])){
    foreach ($meta_tags['key'] as $key => $value) {
?>
    <meta name="<?php echo $this->Html->safe($meta_tags['key'][$key]);?>" content="<?php echo $this->Html->safe($meta_tags['value'][$key]);?>">
<?php
    }
  }
?>

SEO language tags
If you have more than one language on your installation you may want to let Google and other search engines direct visitors to the correct language, to do this you need to edit the /app/views/client/theme-name/structure.pdt and put this in the <head></head> section of the page.

<?php
foreach( $langs AS $language ){
echo '<link rel="alternate" hreflang="<?php echo $this->Html->_($language->uri); ?>" href="<?php echo $this->Html->safe($this->base_uri . ""); ?>/<?php echo $this->Html->_($language->uri);echo $this->Html->_($page->uri); ?>" />';
}
?>

Customize your Blog

Open /plugins/blesta_cms/controllers/main.php and find the following line:

$settings = array_merge(Configure::get("Blesta.pagination_client"), array(

Edit the 'results_per_page' => 5 to the number you wish.

$settings = array_merge(Configure::get("Blesta.pagination_client"), array(
  'total_results' => $total_results,
  'uri' => $this->base_uri . "blog/" . $page->uri . "/[p]/",
  'results_per_page' => 5,
  )
);

How do I display posts in the footer?

Open /app/views/client/theme-name/structure.pdt and add the following:

<?php
	$latest_posts = $this->CmsPages->getLatestPost();

	if (!empty($latest_posts)) {
		foreach ($latest_posts as $post) {
?>
	<ul>
		<li>
			<a href="<?php echo $this->Html->safe($this->base_uri . 'blog/' . $post->uri); ?>">
				<?php echo $this->Html->safe($post->title[$lang]); ?>
			</a>
		</li>
	</ul>
<?php
		}
	}
?>

Developers

We know you like to make quality themes for CMS and Billing systems, and we thought about that during our planning of the CMS. All you need to do is add pages with the following structure in the /config/ folder.
When clients install the CMS with the files in place the pages will be imported automatically.

Configure::set('Blesta_cms.title', 'Page Title');
Configure::set('Blesta_cms.uri', 'uri');
Configure::set('Blesta_cms.description', 'If there's a description, else leave blank');
Configure::set('Blesta_cms.index', '
Put the page center content here.
');