Breadcrumb Content

Main Content

Modern Web Design CMS

August, 02, 2014 | PHP

This is a new chapter in my modern web design – cms tutorial. In the last article, I mentioned that we would convert our small business website into a WordPress theme. Honestly, do we need another WordPress theme?

wpsearch

Furthermore, this is a very simple and basic DIY type of project, so let’s keep it that way. This does not mean we will not be implementing a content management system to our moving company website. Today I will introduce you to a CMS (content management system) that is not as well known, as WP is the states. However, it has a pretty good following overseas and It’s called Get-Simple. This is a very lightweight CMS that does not require a database to run. It stores data In XML files, which makes it very fast.

WordPress has grown extremely popular over the years because it has little to no learning curves and is scalable (to an extent). Unfortunately it is not tailor made for every website. Most importantly, I want to show you something different from what everyone else is doing. Get-Simple is easy to use and for most designers you don’t even have to read the documentation to start theming for it. At some point you will if you want to add advance features. Today we will just convert our static website to a CMS.

Most webhosting providers have a one-click install for the top CMSs (Drupal, Joomla, WP) out there. You will not have that luxury with Get-Simple. You can download a copy at get-simple.info. If you are running MAMP or WAMP all you need to do is unzip the file and drop it in your directory. Afterwards, you can navigate to http://localhost/Get-Simple/admin. For some it will be http://localhost:8888/ Get-Simple/admin. Your browser should look like the image below.

gs-install

Click on the continue button and everything beyond that point is well documented and self-explanatory. You backend will look like the image below.

admin

The admin section of this system is to the point and intuitive. The five tabs on the upper left hand corner are Pages (this is where you create your content for the world to see), Files (this is where you upload images, PDFs and other documents you might want to display.), Themes (Get simple comes with two themes, Innovation and Cardinal. They are both okay, but they are not responsive, which defeats the purpose. ) And finally, Plugins. This is where you upload and install third party scripts for additional and specific features.

The Get-Simple portal has a repository for hundreds of themes and plugins. For this project we will develop our own theme based on the HTML design we created for the moving company website. First we must create the pages. The CMS comes with a default home page, I am going to erase everything on it, rename it “Home”, copy and paste everything below the hero image of our original project. Below, you will see an image of the backend and the page I just created. You will also see a host of options for search engines, page template and the WYSIWYG (what you see is what you get) editor. To save some time, we will switch the editor to source view so we can simply copy the content right off the html page and paste it. We will exclude the “section” and “article” tags. Those tags will be reserved for the structure of the theme. See image below for more detail.

editor

Now let’s see how the website look with one of the default themes after creating all of the pages and adding filler content to them. I also took the liberty of creating the other pages and adding dummy content in each of them. The image below is with the default Cardinal theme.

demo

Convert HTML to PHP Theme

Let’s convert the html files into a theme for the Get-Simple CMS, which is developed with the php scripting language. You do not need to be an experienced php coder to perform this task. If you can write html and css, you will understand this process. Besides, all you need to do is copy and paste outside of adding some specific php scripts for the CMS. This theme will consist of six file; “header.inc.php”, “footer.inc.php”, “template.php”, “pageTemplate.php”, “pageWide.php”, and “sidebar.inc.php”. The include files have “.inc” so they cannot be mistaken for page templates.

The code below is what you will need for your header-php file. If you have read the modern web design posts part one through three, you are already familiar with the base and styles css files. The modernizr and respond js file consist of Javascript “polyfills” for the older browsers that cannot parse media queries (you know, the little bit of code that allows your site to change size for different devices). In addition we also have the code that assist older browsers with html5 tags. This is something that I usually ignore in a blatant manner. However, since this is a business project I will go the extra mile for those that do not know any better.

<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File: 		header.php
* @Package:		GetSimple
* @Action:		Basic theme for the GetSimple 3.0
*
*****************************************************/
?>
<!DOCTYPE html>
<html>
 <meta charset="UTF-8">
<!-- @(#) $Id$ -->
<head>
  <title><?php get_page_clean_title(); ?> - <?php get_site_name(); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="Generator" content="Route 19 Designs Studio" />
  <meta name="Keywords" content="your,keywords,here" />
  <meta name="Description" content="." />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <link href="<?php get_theme_url(); ?>/css/base.css" rel="stylesheet" media="screen"> 
  <link href="<?php get_theme_url(); ?>/css/styles.css" rel="stylesheet" media="screen">
  <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
 <script src="<?php get_theme_url(); ?>/js/modernizr-respond.js"></script>
         <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

  <?php get_header(); ?>

</head>
<body  id="<?php get_page_slug(); ?>">
 <header class="blockz bg-offBlack3">
    <div class="wrapper">
    <div class="col-30 zero-padding">
     <div class="titled">
     <h1><a href="<?php get_site_url(); ?>"><?php get_site_name(); ?></a></h1>  
     </div><!--end titled-->
     </div>

  
     <div class="col-70 zero-padding">
     <nav class="menu">
        <ul>
          <?php get_navigation(get_page_slug(FALSE)); ?>
    </ul>   
     </nav>
     </div>
     </div><!--end wrapper-->
 </header>

The code below consists of all the content you need for the home page of the site. The media section is quite similar to the html version outside one php script. The content area has very little code. The php script that’s enwrapped in the article tag will call the script that loads the content you have written in the CMS onto the home page. Above you have a php script that is calling the header and below you have one that is calling the footer. On the other template pages you will find similar scripts and additional ones for the sidebar and breadcrumb.

<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File: 		tempate.php
* @Package:		GetSimple
* @Action:		Basic theme for the GetSimple 3.0
*
*****************************************************/
# Include the header template
include('header.inc.php'); ?>

 <!========================Optional Media Presentation============================-->

 <section class="blockz bg-white">

          <div class="wrapper">
            <div class="media">

            <img class="center" src="<?php get_theme_url(); ?>/img/truck.png" alt="truck">
            
            <h1 class="center">For Availability and More Info, Reach us at</h1>
            
            <h2 class="center">1-800-976-1313</h2>
            
            <h2 class="center">info@mmc.biz</h2>
            
              
            </div>
        </div>

    </section> 

 <!========================Brief Summary On What We Actutally Do============================-->  
 
  <section class="blockz bg-offWhite5">      
  <div class="wrapper">
    
    <article class="col-1">
    
     <?php get_page_content(); ?>
     
 
      </article>

</div>
</section>

 <!========================Footer Section============================-->
    <?php require("footer.inc.php"); ?>

Last but not least is the footer section of the theme. The code shown below is not much different from the html code. The only thing that makes it different is the php scripts I have added to enable the functionality of the Get-Simple CMS. Installing the theme is even easier. You just add your theme into the theme directory and make sure you create an images folder where you will place a snapshot of you theme titled “screenshot – dot – png”.

<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); } ?>

	<?php get_footer(); ?>
        


    <footer class="blockz bg-offBlack1">
  
<div class="wrapper">
      <div class=" col-1 fill1">
        <p>My Moving Company &copy; 2014 | <a href="#">Disclaimer</a>| <a href="#">Twitter</a> | <a href="#">Facebook</a></p>
      </div>
  
        </div><!--End wrapper--> 
              
    </footer>

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"></script>')</script>
    <script src="js/main.js"></script>

    </body>
</html>

Word of caution, this CMS is not for ecommerce, nor would I recommend it for blogging. While I really dig Get-Simple for its ease of use, it does not have the same community support as let say, Drupal for example. Do not let this be a deterrent from using this great piece of software. If you want to download the theme or view the results you will find the links below.

Download

View

Mr. Blox

I dream in code, find conformity repulsive and drink excessive amounts of coffee...

8 Responses to “Modern Web Design CMS”

  1. Troy

    August 6, 2014

    It’s very easy to use and lives up to it’s name. But! always a but, also one dimensional.

  2. Jeremy

    August 7, 2014

    This is a nice little app.

  3. MasterChief

    August 9, 2014

    I’m sticking with WordPress. It does everything I want for now…

  4. BatGirl

    August 13, 2014

    Why were you hiding this from me?

  5. BBoy

    August 13, 2014

    It’s Aight, but I prefer WordPress…

  6. Mike H.

    November 17, 2014

    Hello. I found your site through the listing for your Basic Responsive GetSimple theme. Why do you recommend against using GetSimple for blogging?

    • Mr. Blox

      November 18, 2014

      I have tried to use Get-Simple for blogging and it just became more of a problem than a solution.

  7. Ernie

    October 21, 2016

    Say, you got a nice blog article.Really looking forward to read more. Really Great.