While social media is a great way to connect with others and share content, I wanted full ownership of the information and content I was producing.
Last year, I created the Timeline page where I post what I am reading, watching, and finding across the web. Recently, I transitioned from using a link library plugin to using WordPress posts to achieve the same result.
The timeline page is essentially a microblog. My goal was to make it as easy as posting to any social network. I am still refining the process, but if you are using WordPress, you can build your own Timeline page by following the steps below.
Table of Contents
Plan and map out your content
Before you start, you will want to get an idea of what content you will want to post to your Timeline page. I am posting likes, notes bookmarks, music I am listening to, shows I am watching on TV, and any activities I am doing.
You will also want to find icons to go with these topics. This website has a list of more than 50 open-source icon libraries you can choose from. Be sure to check the terms of use and license before using the icons on your site.
I have a subcategory under the main Timeline category to further segment and filter out the posts on the page. I did not create a subcategory for each of the posts, just the ones I felt needed to be broken out further. The ones I did not create a subcategory will still display under the Timeline parent category.
Here is how I broke out the categories:
- Timeline (Parent Category)
- Likes (Subcategory)
- Listening (Subcategory)
- Notes (Subcategory)
- Reading (Subcategory)
- Watching (Subcategory)
- Wellness (Subcategory)
After you have an idea about the content you want to post, you can then create the categories. The best part is you can always add, delete, or modify the categories as you go along since you are in total control of your website.
Create your Timeline page
Create a new page that will host your timeline content.
Step 1: Add the Query Loop Block
Add the Query Loop Block to your page to display the Timeline categories you created.
The Query Loop is where you will select the category and number of posts you want to display on the page. If you want to filter out your posts as I do, you will need to create multiple Query Loops. It is really easy to do once you get the initial setup.
Step 2: Setup the Query Loop Block
When you add the block to the page, select the Start Blank option.
Select the Title, Date, and Excerpt option from the list. It honestly does not matter what you choose, since we will be modifying the content under the Query Loop.
Under the List View (
icon in the top navigation bar) of your blocks, you will be able to see how the Query Loop is structured.
The Query Loop is composed of the following:
- Post Template: This is where you will be modifying what content from the post will be displayed.
- Pagination: Change how you want the pagination, if any, to display.
- No Results: Provide a message or other content if there are no posts under the selected query.
Add the Post Content Block anywhere on the page. This automatically adds it to the Post Template section. In the Block List View, delete everything except Post Content and Date (see Note below) under the Post Template section.
Note: I removed the Post Date on my timeline and created a shortcode instead for more flexibility and customization. See the Advanced Customization section to see how to do this.
Step 3: Change Query Loop Block Settings
Under the Block Settings use the following:
- Post Type: Posts
- Order By: Newest to Oldest
- Categories: Timeline (or whatever you called your main Timeline category)
If you want to change the number of posts displayed, click on the block and then the slider icon to set the number of posts you want to display on the page.
Creating Multiple Feeds
If you want to filter and create multiple feeds, once you get the formatting and other settings the way you want, duplicate the Query Loop Block. Under the Block Settings, change the Category to the one you want to display. Leave all other settings as is.
Creating Posts
To add a new entry to your Timeline page, you will create a new post. Being that the Post Title is not displaying, I am using this as a summary of what the post is about.
It is up to you how to structure your posts. You can use images or web fonts as category icons. Personally, I am using shortcodes for the icon and date. This allows me to easily update all of the icons under a particular category. See the Advanced on how to do this.
Note: If you are not filtering out the posts on your main blog, you will want to do that by creating a separate blog category or deselecting the categories you created for your timeline page. If you do not filter these posts, they will display on your main blog.
Advanced Customization
If you want some more advanced customization for your posts, you can modify some of your theme’s files.
Note: Only edit these files if you are familiar with editing WordPress template files. As always, make a backup before changing your theme files.
Icon Shortcodes
If you want to create shortcodes for your timeline category icons, you can use the following code to reference them in your posts later. Paste this code in your Theme Functions file.
/* Timeline [Icon Name] Icon Shortcode */
function timeline_[icon name]_icon_shortcode() {
$icon = '[The code for your icon goes here]';
return $icon;
}
add_shortcode('[Shortcode Name]', 'timeline_[icon name]_icon_shortcode');The Shortcode Name is how you will reference the code for your icon in your posts. The Shortcode Name is case-sensitive and cannot have spaces.
In your post, it will look something like this [Shortcode Name] Post Content.
Notes: You will need to use the above code for each icon category you want to add. Also, any customization for the icon will be done by modifying the Icon variable.
Post Date Shortcode
I found the Post Date block to be hard to modify with my current theme. Also, the spacing between the blog content and the date was too large and could not be updated.
By adding the following shortcode to all of my timeline posts, it will grab the date the post was published and return the value. Paste the following code in your Theme Functions file.
function shortcode_post_published_date(){
$date = get_the_date();
return '<font size="2">' .$date. '</font>';
}
add_shortcode( '[Shortcode Name]', 'shortcode_post_published_date' );The Shortcode Name is how you will reference the date in your posts. The Shortcode Name is case-sensitive and cannot have spaces.
Combined Icon and Date Shortcodes
The final code should look something like this:
[Shortcode Name] Post Content[Date Shortcode Name]
I find this combined method to be easy to reference on my desktop and on the WordPress mobile app.
Let me know how your timeline page comes out!
Joe Gullo