1. Log into to website which requires the blog

2. Go to the dashboard, and click on “Extend Concrete 5”

3. If you haven’t already, connect the website to the community when asked. Or if you have a login already then sign in.

4. Once that’s done, click onto “Add functionality” on the dashboard

5. There will be a link to the “Project page” on the Concrete5 Marketplace on this screen. Open that in a new tab.

6. Use the drop down menu to select “ProBlog” and then press “Associate” – this adds it to the website.

7. Go back to the website and refresh the “Add functionality” page.

8. The blog will now appear. Click the “Download” button on the right. It will then change to “Install”. Click that too.

9. You will then get a page titled “Pre Install Checker” – this checks if your theme has a right sidebar page template. If this comes back as ok, then click the blue “Install…” button on the bottom right.

10. ProBlog will now appear in your dashboard as below.

11. It will also appear in your sitemap. It might be an idea to exclude this from the navigation bar on your website whilst you style up the CSS and add content. You can do this is attributes.

12. To add your first blog post, click on “Add/Edit” on the dashboard underneath ProBlog.

13. Add in your content, and press “Add post”.

14. It will now show in the blog list, you can edit or delete it here:

15.  As you can see…it doesn’t look that great when you first add it in…

16. A few settings to get right to begin with that will help…if you go into edit mode and click on the blog post and edit it, replicate the settings below. Truncate text means that it will display the first 300 characters of content and then end with a “…” as a preview to the post. “Use Content….” means that it will display content in the post rather than the “Description” that is used on the blog post when you edit it through the dashboard.

17. Next, we need to style this up. To do so, we need to go into the server, and pull down the folder to our machines. This is located as shown below.

18. As we will more than likely want to arrange how the post preview is shown, we do this using a “view.php” file. This tells the system how to arrange and show the content that is included in the post. You can find it here – NOTE: Open it up from your local folder, not from the remote server:

19. Replace the whole HTML/PHP below in your “view.php” file and then insert the CSS in your “main.css” file to replicate what I have done below:


defined('C5_EXECUTE') or die(_("Access Denied."));
$c = Page::getCurrentPage();
if (count($cArray) > 0) { ?>
    <div class="ccm-page-list">
    for ($i = 0; $i < count($cArray); $i++ ) {
        $cobj = $cArray[$i];


        $content = $controller->getContent($cobj,$blog_settings);
             <div class="content-sbBlog-wrap">
                <div class="addthis_toolbox addthis_default_style">
                    if ($tweet>0) {
                        <span class="st_twitter" st_url="<?php   echo $url?>" st_title="<?php   echo $blogTitle?>"></span>
                    <?php   }
                    if ($fb_like==1) {
                        <span class="st_facebook" st_url="<?php   echo $url?>" st_title="<?php   echo $blogTitle?>"></span>

                    if ($google==1) {
                        <span class="st_plusone" st_url="<?php   echo $url?>" st_title="<?php   echo $blogTitle?>"></span>
                <script type="text/javascript">var switchTo5x=true;</script>
                <script type="text/javascript" src="//ws.sharethis.com/button/buttons.js"></script>
                <?php   if ($sharethis) { ?>
                <script type="text/javascript">stLight.options({publisher:'<?php   echo $sharethis;?>'});</script>
                <?php   } ?>
                <div class="content-sbBlog-contain">
                    <?php   if ($comments) { ?>
                    <div class="content-sbBlog-commentcount"><?php   echo $comment_count;?></div>
                    <?php   } ?>
                    <!------- BEGIN IMAGE AND CONTENT PREVIEW ------->
                    <div class="content-sbBlog-post">
                     <div class="large-3 columns nopadLeft">
                     <!-- POST THUMBNAIL -->
                                if ($thumb) {
                                    echo '<div class="thumbnail">';
                                    echo '<img src="'.$image.'"/>';
                                    echo '</div>';
                     <div class="large-9 columns">
                        <!-- POST TITLE -->
<div id="content-sbBlog-title">
                         <h3 class="ccm-page-list-title"><a href="<?php   echo $url;?>"><?php   echo $blogTitle?></a></h3>
                            <!-- POST CATEGORY -->
<span class="BlogInfo"><?php  
                            echo t('Category').': '.'<a href="'.$search.'categories/'.str_replace(' ','_',$cat).'/">'.$cat.'</a>';;
                            <!-- POST DATE -->
                            <div id="content-sbBlog-date">
                             <?php    echo Core::make('helper/date')->formatCustom(t('M d, Y'),strtotime($blogDate)); ?>
                            <!-- POST PREVIEW -->
<p class="PostDesc"><?php  
                                echo $blogify->closetags($content);
                 <!-- BUTTON FOR POST -->
                            <a class="BTN ReadMore" href="<?php   echo $url?>"><?php   echo t('Read More')?></a> 
                    <!------- END IMAGE AND CONTENT PREVIEW ------->
                <div id="tags">
                <b><?php       echo t('Tags')?> : </b>
                if (!empty($tag_list)) {
                    $x = 0;
                    foreach ($tag_list as $akct) {
                        if ($x) {echo ', ';}
                        echo '<a href="'.$search.str_replace(' ','_',$akct->getSelectAttributeOptionValue()).'/">'.$akct->getSelectAttributeOptionValue().'</a>';

            <br class="clearfloat" />
    $u = new User();
    $subscribed = $c->getAttribute('subscription');
    if ($subscribe && $u->isLoggedIn()) {
        if ($subscribed && in_array($u->getUserID(),$subscribed)) {
            $subscribed_status = true;
        <div id="subscribe_to_blog" class="ccm-ui">
            <a href="<?php   echo $subscribe_link; ?>?blog=<?php   echo $cParentID; ?>&user=<?php   echo $u->getUserID(); ?>" onClick="javascript:;" class="subscribe_to_blog btn btn-default btn-small" data-status="<?php       if ($subscribed_status) { echo 'unsubscribe';} else { echo 'subscribed';}?>"> <?php       if ($subscribed_status) {echo t('Unsubscribe from this Blog'); } else { echo t('Subscribe to this Blog'); }?> </a>
    if (!$previewMode && $controller->rss) {
        <div id="rss-feed">
                <img src="<?php   echo $rss_img_url; ?>" width="25" alt="iCal feed"/>&nbsp;&nbsp;
                <a href="<?php  echo URL::to('/problog/routes/rss')?>?bID=<?php   echo $blogBockID; ?>&problogRss=true&ordering=<?php   echo $ordering; ?>" id="getFeed"><?php   echo t('get RSS feed'); ?></a>
            <link href="<?php  echo URL::to('/problog/routes/rss')?>?bID=<?php   echo $blogBockID; ?>&problogRss=true" rel="alternate" type="application/rss+xml" title="<?php   echo t('RSS'); ?>"/>
<?php    } ?>

<?php   if ($paginate): ?>
    <?php   echo $pagination; ?>
<?php   endif; ?>

<script type="text/javascript">
    $(document).ready(function () {
        $('.subscribe_to_blog').click(function (e) {
            var url = $(this).attr('href');
                error: function (r) {
                success: function (r) {
                    if ($('.subscribe_to_blog').attr('data-status') == 'subscribed') {
                        $('.subscribe_to_blog').html('<?php       echo t('Unsubscribe from this Blog'); ?>');
                    } else {
                        $('.subscribe_to_blog').html('<?php       echo t('Subscribe to this Blog'); ?>');


/*********BEGIN ProBlog Styles**********/
#rss-feed{ display: none; }
.addthis_toolbox{ display: none; }
.addthis_default_style{ display: none; }
.ccm-page-list #tags{ display: none; }
.content-sbBlog-commentcount{ display: none; }
.ccm-page-list .addthis_toolbox .addthis_default_style{ display: none; }
.ccm-page-list #content-sbBlog-date { float: left; margin-right: 20px; font-size: 17px; text-transform: uppercase; font-weight: 700; }
p.PostDesc{ margin-top: 20px; }
span.BlogInfo{ font-size: 16px; }
a.BTN.ReadMore{ width: 25%; }
.content-sbBlog-post{ float: left; }
/*********END ProBlog Styles*********/

20. Apart from the colours and other styles that are unique to your website, this will give the right layout. This is done using “Large-12” etc. – if you are using “Grid” then just replace where needed.