{"id":7010,"date":"2017-03-28T16:18:12","date_gmt":"2017-03-28T16:18:12","guid":{"rendered":"https:\/\/jsmwebsolutions.com\/blog\/?p=7010"},"modified":"2017-03-28T16:18:51","modified_gmt":"2017-03-28T16:18:51","slug":"how-to-create-concrete5-theme","status":"publish","type":"post","link":"https:\/\/jsmwebsolutions.com\/blog\/how-to-create-concrete5-theme\/","title":{"rendered":"How To Create Concrete5 Theme"},"content":{"rendered":"

\n\tHow to create concrete5 theme<\/strong>: Concrete5 <\/strong>is a free and open source <\/strong>content management systems Concrete5 is very easy and user friendly CMS<\/strong>, Concrete5 <\/strong>has been around since 2008<\/u>. Concrete5 <\/strong>is developed from the ground up using Model View Controller<\/strong><\/em> and Object Orientated Programming<\/em> architecture and because of this, it is a powerful, easy to use CMS. PHP was used to create the structure of Concrete5 <\/strong>and it is often compared to the major CMS’s which are WordPress, Joomla and Drupal. I personally have created many websites using Concrete5 <\/strong>and for creating custom themes I found the process more straight forward than other content management systems such as WordPress.\n<\/p>\n

\n\tHow to create concrete5 theme <\/strong>?\n<\/p>\n

\n\tAssuming that you have correctly setup the SQL database and installation, it is fairly simple to create your own custom theme for Concrete5. For my example, I will show how to setup a theme with Bootstrap.\n<\/p>\n

    \n
  1. \n\t\tFirstly, Setup Your File Structure FOR How to create concrete5 theme<\/strong>\n\t<\/li>\n<\/ol>\n

    \n\tUsually, this will include the four file directories: css (i.e. Bootstrap files and Style Sheets), docs (optional), img and js (i.e. Bootstrap files).\n<\/p>\n

    \n\t\"\"<\/a>\n<\/p>\n

    \n\t \n<\/p>\n

      \n
    1. \n\t\tCreate a default.php <\/strong>file\n\t<\/li>\n<\/ol>\n

      \n\tThe Default PHP file is used for Concrete5 pages<\/strong> that have no Page Type, for example the home\/index page. If you are converting your HTML website into a Concrete5 site<\/strong>, simply copy your code over to a new file called defualt.php. The file will be very similar to ordinary HTML files apart from a few php snippets that you must include for the CMS to be able to read the file and put sections in the correct place for editing.\n<\/p>\n

      \n\tFirst of all, within your tags, you must include\n<\/p>\n

      \n

      \n\t\tLoader::element(‘header_required’)<\/strong>; <\/strong>\n\t<\/p>\n<\/blockquote>\n

      \n\t, which grabs a file called header_required from the concrete elements, which inserts the page title, the content type and the character set. For the later versions of Concrete5, you must now include a footer element, which is placed just before the end body tag as so:\n<\/p>\n

      \n

      \n\t\tLoader::element(‘footer_required’); <\/strong>\n\t<\/p>\n<\/blockquote>\n

      \n\tFinally, for Concrete5 <\/strong>to read your external resources, you need to insert a PHP snippet within the link or script source.\n<\/p>\n

      \n

      \n\t\techo $this->getThemePath()?<\/strong>\n\t<\/p>\n<\/blockquote>\n

      \n\t\"\"<\/a>\n<\/p>\n

      \n\tNow we have setup the base, we now need to setup editable areas on the page. These editable areas allow you to insert plugins, content or html code from within the CMS. Using Bootstrap, you can either setup the grid layout through the page type or just set one area and within Concrete5, use the HTML tool to setup your grid layout. To add an editable area, simply include the following between tags:\n<\/p>\n

      \n

      \n\t\t   $a = new Area(‘Area Name’);
      \n\t\t$a->display($c);\n\t<\/p>\n<\/blockquote>\n

      \n\tBelow is an example with Bootstrap grid layout included (within body tags):\n<\/p>\n

      \n\t\"\"<\/a>\n<\/p>\n

      \n\tObviously you can play around with the Bootstrap layout to your own preference, but remember to change the name of the area, unless you intend to duplicate them.\n<\/p>\n

      \n\t \n<\/p>\n

        \n
      1. \n\t\tCreate view.php<\/strong>\n\t<\/li>\n<\/ol>\n

        \n\tThe View PHP file is require to wrap single page types single pages or non theme pages. For example, if you intend to create blogs, then this file will be used as the page type. In view.php instead of main content area you put code\n<\/p>\n

        \n\tprint $innerContent;\n<\/p>\n

          \n
        1. \n\t\tCreate description.txt<\/strong>\n\t<\/li>\n<\/ol>\n

          \n\tConcrete5 <\/strong>requires a text file with a description of your theme, therefore, on the first line you will put the title of the theme, and on the second line include a brief description of the theme.\n<\/p>\n

            \n
          1. \n\t\tActivate The Theme in Concrete5\n\t<\/li>\n<\/ol>\n

            \n\tOnce you have uploaded the theme into the correct directory (public_html -> themes -> (Your Theme Name) -> [Place Here]) you will then need to activate it through Concrete5. To do this, click on “Dashboard” and then “Themes” and you should see you theme with the title you from description.txt. Install the theme and then activate it, which you should then be greeted with a success message. Your theme is then successfully installed.\n<\/p>\n

              \n
            1. \n\t\tMultiple Page Types\n\t<\/li>\n<\/ol>\n

              \n\tIn many cases, its easier to create a new page type for a certain type of page that will be replicated in multiple ways i.e. a location landing page. Therefore, following the same format as default.php, simply create another PHP file and upload it to the server. To use the template through Concrete5, you will then need to add it as a Page Type through Dashboard -> Themes -> Add Page Type. Call the Page Type any name, but the package the name of the PHP file that you uploaded to the server.\n<\/p>\n

              \n\t\"\"<\/a>\n<\/p>\n

              \n\tNOTE: Before editing the the default settings of the page type, its important to clear cache, otherwise you will be greeted with the default.php.\n<\/p>\n

              \n\tIf you want to create concrete5 website<\/strong> contact jsm team<\/p>\n","protected":false},"excerpt":{"rendered":"

              How to create concrete5 theme: Concrete5 is a free and open source content management systems Concrete5 is very easy and user friendly CMS, Concrete5 has been around since 2008. Concrete5 is developed from the…<\/p>\n","protected":false},"author":1,"featured_media":7015,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[58,13],"tags":[287],"class_list":["post-7010","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-tutorials-help-fix-bugs","tag-how-to-create-concrete5-theme"],"rttpg_featured_image_url":{"full":["https:\/\/jsmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/add-new-theme-in-concrete5.jpg",640,480,false],"landscape":["https:\/\/jsmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/add-new-theme-in-concrete5.jpg",640,480,false],"portraits":["https:\/\/jsmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/add-new-theme-in-concrete5.jpg",640,480,false],"thumbnail":["https:\/\/jsmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/add-new-theme-in-concrete5-150x150.jpg",150,150,true],"medium":["https:\/\/jsmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/add-new-theme-in-concrete5-300x225.jpg",300,225,true],"large":["https:\/\/jsmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/add-new-theme-in-concrete5.jpg",640,480,false],"1536x1536":["https:\/\/jsmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/add-new-theme-in-concrete5.jpg",640,480,false],"2048x2048":["https:\/\/jsmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/03\/add-new-theme-in-concrete5.jpg",640,480,false]},"rttpg_author":{"display_name":"Aj","author_link":"https:\/\/jsmwebsolutions.com\/blog\/author\/admin\/"},"rttpg_comment":0,"rttpg_category":"How to<\/a> Tutorials<\/a>","rttpg_excerpt":"How to create concrete5 theme: Concrete5 is a free and open source content management systems Concrete5 is very easy and user friendly CMS, Concrete5 has been around since 2008. Concrete5 is developed from the…","_links":{"self":[{"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=7010"}],"version-history":[{"count":3,"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7010\/revisions"}],"predecessor-version":[{"id":7018,"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7010\/revisions\/7018"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/media\/7015"}],"wp:attachment":[{"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=7010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=7010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jsmwebsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=7010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}