This course explains how to add a blog to a site that doesn't have one. Even if you don’t need a blog, this tutorial will help you understand how build dynamic pages with content sets. Here’s an example of the blog you’ll build.
Note This guide assumes that you already know a bit about how content sets work. To learn more about content sets, check out separate content & design and manage your content. You should also know how to build with widgets.
Before creating any pages, you’ll need a content set for your blog. Content sets allow you to manage content in one place, and then use it in several other places.
This will come in handy when creating a blog, as you’ll want to use the same content on a blog article page, in search results, and on a homepage that has a list of every blog post.
Note Here you’ll create a managed content set but you could also use a synced or shared content set instead.
So, to create the content set:
Note The description accepts HTML, so consider adding a link to your blog homepage (which you’ll create later) so you can easily preview posts.
Label | Type | Description |
---|---|---|
title |
Text |
The blog post’s title. |
posted |
Date |
Date the blog was posted. |
body |
Textarea |
The actual content body of the blog post. |
image |
Image |
Associate an image with the post. |
summary |
Text |
Summarize the blog post. |
Note If you’ve never created a content set before, read manage your content for more information on creating fields.
You’ll need some placeholder content to set up the rest of the blog, so add a few dummy posts.
To add a blog post:
Create your dummy posts with whatever content you want—just make sure you fill in each field.
Okay, so now you have a blog content set with a few blog posts.
Next create an article page to display your posts.
To create your blog, you’ll create one article page, and then hook up the content set that you just created.
To do that, create a new page:
Note Select a Page Template if you like. The template will just affect the design of your page—not how it works.
(Is this the first page you’ve created? Learn more about creating a page.)
Next you’ll add and configure some widgets:
To learn about adding widgets, check out Build with Widgets.
For the blog post’s title, use a Heading widget:
Blog: title
from the dropdown. This will pull in the title from blog posts in your content set.
If everything worked correctly, you should see the title of one of your dummy blog posts on the page.
Next add a date.
Add the date the article was posted:
Blog: posted
%A, %B %#d, %Y
Note This field uses the PHP strftime function, so enter the formatting information in that syntax. (See php.net for more information on the strftime function.) For example, to set the format to look like Wednesday, April 22, 2015, enter: %A, %B %#d, %Y
. You don’t have to know PHP to use the syntax—just follow the guidelines on the php.net.
If everything worked correctly, you should see the date of one of your dummy blog posts on the page.
Next add a main image.
While you can use images in the body of a post, you can set a main image that displays at the top of every post. Then you can use this image in search results or anywhere you show a summary of the post.
So to add an image:
Blog: image
If it all worked, you should see the image from one of your dummy posts.
Next add the body of the post.
To finish building the page, pull in the body of the article:
Note Don’t use a Rich Text widget. The Rich Text widget doesn’t work with content sets.
Blog: body
Now you should see a full blog post with a title, date, image, and body.
Now you have a blog post page. Go to yourcustomaddress.com/blog-article
and you’ll see a post. The page should look something like this example.
But how can users see the other posts? In the next couple steps, you’ll build the links that users will click to see each post.
Now create a summary page element. (Learn more about page elements.) You’ll use it to display a summary of each post. This page element is similar to the article page you just created, except it uses the summary
instead of the body
. And it has links to the full blog article.
So to create the page element:
Next add some widgets:
Your page element already has a widget: a Text widget.
Select it, and then configure it to use the Blog: summary
field.
Add the title of your post. So just like you did earlier:
Blog: title
.
Now add an Image widget:
For the Image Source, use Blog: Image
(like you did earlier).
Also add a link. So when users click the image they’ll be taken to that specific blog post.
So to add a link:
/blog-article?id=
Note /blog-article
is the slug of the Blog article page you made earlier.
i
and select Blog: _id
Now add the posted date with a Listing widget.
Set up this widget to use the date, just like you did earlier. So set:
Blog: posted
%A, %B %#d, %Y
Note Remember, this field uses the PHP strftime function, so enter the formatting information in that syntax. (See php.net for more information on the strftime function.)
Next, add a link widget at the bottom. This will be a Read more link that visitors can click to get to the full article.
So add the Link widget.
Then set up the link just like you did earlier:
/blog-article?id=Blog: _id
Note If you’re already wondering how to create friendly URLs, check out Set Up SEO Tools. Don’t worry, your old links (with ?id=Blog: _id
) will still work after you set up a friendly URL.
When you’re done, the page element should look something like this example.
Next, you’ll use the summary you just created to build a list of all your blog posts. Your visitors can then click these summaries to see individual posts. This will act as a blog homepage.
The Market has a several blog-related widgets that you can use to build this list (e.g., Blog Roll or even Search Results). This guide will use the Blog Browser widget.
So to create the blog homepage:
Blog: _id
Blog: Posted
Now, you should see a page listing all your blog posts. And if you click each summary, you’ll see the full post (i.e., the article page you created). Your blog should now look like this example.
You can also add more fields to your content set—like author and category. And the Blog Browser has more features that you can play around with—like grouping posts.
Next, you might check out how to Filter with Context to create search results or category pages. Or you can check out Set Up SEO Tools to give your blog friendly URLs and meta descriptions.
Or if you want to style your blog, learn to Use Design Tools or just Style with CSS.