Creating a Blog with Solodev

This tutorial covers building a blog module in Solodev using shortcodes. Login to Solodev or Sign Up for a 14 Day Free Trial today to follow along with this tutorial!

Note: To learn more about creating a blog module in Solodev, check out our in-depth technical documentation.

Creating a module to draft and publish blog entries can be a great way to communicate with your audience as blogs become a staple of the modern company website. This tutorial will show you how to create a Blog Module in Solodev that will allow you to add blog entries without any coding knowledge.

Part I — Creating the Blog Overview Page

The overview page will display all of your blog posts as shown above.

Step 1 — Create your Blog Module

Open the folder to which you want to add your blog module. Hover over the Add button and select Calendar.

Note: You can add a module to any location within the Solodev system; however, we recommend creating a dedicated “modules” folder inside the “web files” directory in order to keep all of your modules organized and easy to find.

For enterprise users, we suggest creating your modules inside your “Data Center” directory.

Step 2 — Upload your Blog Form

The code below will add the appropriate fields to your blog module. First you will need to save this code to your computer as a simple text document with .tpl at the end of the file name such as “blog-form.tpl”.

<div class="row">
<div class="col-md-12">
<textarea class="wysiwyg2" name="blog_content" id="blog_content" required></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="label-control" for="blog_excerpt">Excerpt</label>
<textarea class="form-control" name="blog_excerpt" id="blog_excerpt" required></textarea>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="label-control" for="blog_image">Blog Image - 600x500</label>
<input type="file" class="file_upload" name="blog_image" id="blog_image">
</div>
<div class="col-md-2 col-md-offset-4">
<label class="label-control" for="featured">Featured</label>
<input type="checkbox" class="form-control" name="featured" id="featured">
</div>
</div>
<script>
$('.wysiwyg2').ckeditor( function() { }, { customConfig: '/CK/config.js', height: '600px', basePath : '/CK/', toolbar : 'WP' } );
</script>

Click on Upload Form and select the file you just saved. Then click Submit.

Step 4 — Create your Repeater Template

Copy and paste the code below into a new file called repeater.tpl inside your module folder

[js_pager_includes]
<div class="blog-page filter-bar">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="category_filter">Category</label>
<select class="blog_categories" id="category_filter">
<option value=" ">All Categories</option>
[category_filter calendar_id="6" all_value=" "]
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="tagSelect">Tag</label>
[tag_filter id="tagSelect"]
</div>
</div>
<div class="col-md-3">
<div class="form-group">
[date_filter years="2013-2015" all_value=" "]
</div>
</div>
<div class="col-md-3 blog_search">
<div class="form-group">
[search_filter button_id="searchBtn"]
</div>
</div>
</div>
</div>
</div>
<!-- start _ templates -->
[template_repeater id="gridContent"]
[template_value_isset_assignment subject="e.blog_image_url" default="//placehold.it/263x263"]
[template_preview_length class_length=event_title character_number=45]
<li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="{{calendar_entry_id}}">
<div class="imgHolder" onclick="location.href='{{path}}'">
<img alt="{{event_title}}" class="grid-image img-responsive" src="{{blog_image_url}}">
<div class="description-box animateBottomName">
<p>{{event_title}}</p>
</div>
</div>
<div class="clearfix"></div>
</li>
[/template_repeater]
[js_pager_controls]
[js_pager_total]
<!-- end _ templates -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="theBlogGrid">
<ul class="row blogGrid" id="blogGrid">
[repeater id="6" limit="0,4"]
[cond type=is subject="{{index}}%3" value=0]
<li class="col-xs-3" id="{{calendar_entry_id}}">
<div class="imgHolder">
<a href="{{path}}"><img alt="[get_asset_file_url id={{blog_image}}]" class="grid-image img-responsive" src="[get_asset_file_url id={{blog_image}}]"></a>
<div class="description-box animateBottomName">{{event_title}}[sub_cond type=is subject="{{event_position_division}}" value=0] - {{event_position_division}}[/sub_cond]</div>
</div>
<div class="biodescription">
<h2>{{event_title}}</h2>
</div>
<div class="clearfix"></div>
</li>
[/cond]
[/repeater]
</ul>
<div class="blue-border blog-blue-border"></div>
<div class="clearfix"></div>
<div class="row paging-filters">
<div class="col-xs-3 col-md-1 blog-filter">
[page_filter]
</div>
<div class="col-xs-3 col-xs-offset-2 col-sm-3 col-sm-offset-2 col-md-2 col-md-offset-4">
<div id="pagingTotal"></div>
</div>
<div class="col-xs-4 col-sm-5 col-md-2 col-md-offset-3">
<div id="pagingControls" class="pagination"></div>
</div>
</div>
</div>
</div>
</div>
</div>
[js_pager data_source_id="6" data_source="calendar" repeater_id="gridContent" repeater_location_id="blogGrid" display_type="news"]
<link href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.min.css" rel="stylesheet" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>
<script>
$('.blog_categories, .tag_select, #date_filter, #page_filter').selectize();
</script>

Note — the only thing that needs to be edited in this code, is the following section:

repeater id=”” limit=”0,9" type=”calendar”

The repeater id=”” needs the ID of the blog module. Open the blog module and look for the ID at the top left under the name of the module. Place the ID number inside the quotes (“”).

The image below outlines where to find the ID of the module.

Step 5 — Style your Blog Module

Add the CSS below to a file called blog.css in the ‘CSS’ folder of your assets

Note: Best Practices suggest creating a folder in the ‘www’ directory called ‘assets’ where your CSS, JS, Images, etc. folders and their corresponding assets live.

/* ==================================
# Blog Index
================================== */
ul.blogGrid li {
list-style-type: none;
}
.blogGrid {
padding-left: 0;
margin-bottom: 40px;
}
#theBlogGrid .animateBottomName {
color: #000;
margin-top: 20px;
}
.blue-border.blog-blue-border {
margin-bottom: 20px;
}
.description-box {
background-color: rgba(50, 50, 50, 0.5);
bottom: 0;
float: left;
height: 44px;
padding: 5px 10px;
position: absolute;
}
#theBlogGrid .description-box p {
color: #fff;
padding-top: 7px;
font-size: 15px;
}
.blogGrid li:hover .animateBottomName {
background-color: #00bff3;
}
.imgHolder {
cursor: pointer;
position: relative;
}
.blog-page.filter-bar {
margin-bottom: 20px;
}
.blog-page.filter-bar .selectize-input {
height: 40px !important;
line-height: 22px;
border-radius: 0;
}
.blog-page.filter-bar .blog_search .input-group-btn #searchBtn {
padding: 10px 20px;
background-color: #00bff3;
height: inherit;
}
.selectize-input.items {
border-radius: 0;
}
.blog-page.filter-bar .blog_search input#table_filter {
height: 40px;
border-radius: 0;
line-height: 22px;
border-color: #ccc;
}
.blogGrid .imgHolder .description-box {
height: 45px;
}
.paging-filters #pagingTotal {
margin-top: 0;
}
.paging-filters #pagingTotal p {
font-size: 14px;
text-align: center;
padding-top: 10px;
}
#theBlogGrid .pagination {
margin-top: 0;
float: right;
}
.selectize-dropdown [data-selectable] {
background-color: #fff;
}
.selectize-dropdown-content {
border: 1px solid #ccc;
}
.pagination>li:last-child>a,
.pagination>li:last-child>span {
border-radius: 0;
}
/* ==================================
# Blog Display
================================== */
img.blog-inner {
max-width: 300px;
padding: 20px;
}
.blog-wrapper h1 {
margin-bottom: 20px;
font-family: "open sans condensed",sans-serif;
font-size: 41px;
font-weight: bold;
color: #000;
text-transform: capitalize;
}
/* ==================================
# Media Queries
================================== */
@media screen and (max-width: 1200px) {
.description-box {
height: 52px;
}
.description-box p {
font-size: 14px;
}
}
@media screen and (max-width: 991px) {
.blogGrid .blog-inner {
margin-bottom: 30px;
}
.description-box p {
font-size: 15px;
}
}
@media screen and (max-width: 767px) {
.blogGrid .blog-inner .imgHolder img {
width: 100%;
}
.blog-wrapper img {
max-width: 100%;
}
}
@media screen and (max-width: 480px) {
.blog-filter .items {
text-align: left;
}
#pagingTotal p {
padding-top: 0;
}
}

Step 6 — Add your repeater template to your index page

Navigate to the index page that will contain your repeater template. In order to place the file into your STML, you need to select the Dynamic Div (Drop Zone) in which you’d like to place it by clicking on it.

Note: If you have not already done so, create a page called index.stml in the folder in which your index and detail pages will live in the ‘www’ folder, in this case “blog”.

Part II — Creating the Blog Detail Page

The blog detail page displays the detail information for each entry. In this case it will contain the main image, title, intro and description.

Step 1 — Create your Detail Template

Open your blog module folder by clicking on it in the left hand nav. Hover over Add button and select File. Name the file and make sure you use .tpl at the end of the file name. Paste the code below into the file. Then click Save.

[entry]
<div class="blog-wrapper">
<h1>{{name}}</h1>
<img alt="[get_asset_file_name id={{blog_image}}]" class="img-responsive pull-right blog-inner" src="[get_asset_file_url id={{blog_image}}]">
<p>{{blog_content}}</p>
</div>
[/entry]

Step 2 — Add your detail template to your detail page

To display the detail information of your blog posts, you will need to create a detail page (detail.stml) in the same folder as your index.stml page. In order to place the file into your STML, you need to click on the Dynamic Div into which you would like to place it as shown below.

Part III — Map your Module to your STMLs

Now that you have created the blog module and have the index and detail pages in place, you will need to map the Module to your new folder and index and detail pages.

Step 1 — Modify your Blog Showcase Module

Open the blog module by selecting it from the left hand file tree. Click the Modify button. Open the Website Properties tab. Scroll down until you see the SEO URL Encoding field and click Browse. Select the page containing your detail template. Click Ok.

Step 2 — Select your Asset Category Map Anchor

Next to the SEO URL Encoding Input Field is the Asset Category Map Anchor (Folder Anchor) field. Click Browse and a new modal will popup displaying various folders — select the folder storing the index.stml and detail.stml pages of your module and click Ok, then click Submit in the bottom right of the page.

Step 3 — Add Entries to your Blog Module

Add the content for your blog post.

If you followed the steps above correctly and click on one of the logos on your index page, you will be redirected to the detail page of that particular blog post as shown below.

Originally Posted on the Solodev Web Design Blog

You’ve successfully built your first module in Solodev! To learn more about building modules in Solodev, check out our in-depth documentation!

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.