{"id":1347,"date":"2025-01-30T14:08:08","date_gmt":"2025-01-30T19:08:08","guid":{"rendered":"https:\/\/sites.smith.edu\/project-resources\/?p=1347"},"modified":"2026-03-04T14:17:07","modified_gmt":"2026-03-04T19:17:07","slug":"creating-a-timeline-with-cool-timeline","status":"publish","type":"post","link":"https:\/\/sites.smith.edu\/project-resources\/creating-a-timeline-with-cool-timeline\/","title":{"rendered":"Creating a Timeline with Cool Timeline"},"content":{"rendered":"\n<p>Cool Timeline is an vertical timeline tool you can use to create timelines on a WordPress site. To create a timeline, you\u2019ll need to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#event\">Draft your event text and collect images to illustrate your events<\/a><\/li>\n\n\n\n<li><a href=\"#post\">Create a post on your class WordPress site<\/a><\/li>\n\n\n\n<li><a href=\"#timeline\">Add a CoolTimeline block<\/a><\/li>\n\n\n\n<li><a href=\"#addevents\">Enter your events into the individual blocks<\/a><\/li>\n\n\n\n<li><a href=\"#publish\">Publish your WordPress post<\/a><\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"event\">Step 1. Creating your Events<\/h2>\n\n\n\n<p>The first step to creating a timeline is to create the events you\u2019d like to appear on your timeline.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The dates your events happened<\/li>\n\n\n\n<li>Text about the events on your timeline<\/li>\n\n\n\n<li>Images to illustrate your timeline<\/li>\n<\/ul>\n\n\n\n<p>Want to draft your event text in a template? Use this google doc template.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"post\">Step 2. Create a WordPress Post<\/h2>\n\n\n\n<p>Follow these directions to <a href=\"https:\/\/sites.smith.edu\/project-resources\/create-a-wordpress-post-and-add-content\/\" data-type=\"post\" data-id=\"1124\">create a WordPress post<\/a>.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"timeline\">Step 3. Add a Cool Timeline block<\/h2>\n\n\n\n<p>In your WordPress post, open the block inserter.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"631\" height=\"541\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_09-47-20.png\" alt=\"The expanded block inserter with a red circle highlighting the black square that opens it\" class=\"wp-image-1402\" style=\"width:500px\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_09-47-20.png 631w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_09-47-20-300x257.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_09-47-20-400x343.png 400w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/figure>\n\n\n\n<p>Search for the <em>Cool Timeline<\/em> block to insert a timeline.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"500\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_09-47-50.png\" alt=\"The cool timeline block in the block inserter circled in red\" class=\"wp-image-1404\" style=\"width:500px\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_09-47-50.png 663w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_09-47-50-300x226.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_09-47-50-400x302.png 400w\" sizes=\"auto, (max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<p>Cant find it? Reach out to <a href=\"mailto:tgrandy@smith.edu\" target=\"_blank\" rel=\"noreferrer noopener\">Travis<\/a>, <a href=\"mailto:dnavarro@smith.edu\" target=\"_blank\" rel=\"noreferrer noopener\">Abril<\/a>, or <a href=\"mailto:rkeyel@smith.edu\" target=\"_blank\" rel=\"noreferrer noopener\">Becca<\/a> for help!<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"addevents\">Step 4. Add your Events<\/h2>\n\n\n\n<p>Once you&#8217;ve added the Cool Timeline block, you can replace your event information into the pre-populated blocks, or delete the existing blocks and <a href=\"#addnew\">add new ones<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">To replace the image in an example entry<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"391\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_10-47-38.png\" alt=\"The contextual menu of a cool timeline story block with a red circle indicating the replace option\" class=\"wp-image-1405\" style=\"width:500px\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_10-47-38.png 794w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_10-47-38-300x148.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_10-47-38-768x378.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_10-47-38-400x197.png 400w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the image in the first entry, and in the contextual menu that appears directly above the image, choose Replace.<\/li>\n\n\n\n<li>From the drop down menu\n<ul class=\"wp-block-list\">\n<li>Choose Open Media library to add an image you&#8217;ve already uploaded<\/li>\n\n\n\n<li>Choose Upload to upload a new image.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">To replace the heading or paragraph text in an example entry<\/h3>\n\n\n\n<p>Select the text in the heading block or select the text in the paragraph block.<\/p>\n\n\n\n<p>Type or copy and paste your event text in the block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_10-49-37-1.gif\" alt=\"A gif displaying how to replace text in a header block within a cool timeline story\" class=\"wp-image-1406\" style=\"width:500px\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"addnew\">Add a new Event<\/h3>\n\n\n\n<p>Scroll to the bottom of the timeline and choose <strong>+ Add Story<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"454\" height=\"339\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_11-08-49.png\" alt=\"The + Add Story button indicated by a red circle\" class=\"wp-image-1408\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_11-08-49.png 454w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_11-08-49-300x224.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_11-08-49-400x299.png 400w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><\/figure>\n\n\n\n<p>To add an image, choose Add Media Block. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"435\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_11-09-02.png\" alt=\"The Add Media Block button in a cool timeline block circled in red\" class=\"wp-image-1407\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_11-09-02.png 575w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_11-09-02-300x227.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/2025-01-28_11-09-02-400x303.png 400w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/figure>\n\n\n\n<p>In the Image block, choose and Upload or Media Library to add your image.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"publish\">Step 5. Publish your WordPress Post<\/h2>\n\n\n\n<p>When you&#8217;ve completed your timeline, <a href=\"https:\/\/sites.smith.edu\/project-resources\/create-a-wordpress-post-and-add-content\/#saveorpublish\">publish your WordPress post<\/a> to make it available on your site.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Example Timeline<\/summary>\n<div class=\"wp-block-cp-timeline-content-timeline Cool-Content-Timeline\"><div class=\"cool-timeline-block-311ce577-5a42-4d3a-b58f-447e4f3fac79\"><div class=\"cool-vertical-timeline-body ctlb-wrapper both-sided left\"><div class=\"cool-timeline-block-list\">\n<div class=\"wp-block-cp-timeline-content-timeline-child swiper-slide\"><div class=\"timeline-content icon-false \"><div class=\"timeline-block-timeline ctl-row  position-right\"><div class=\"ctl-6 timeline-block-time\"><div class=\"story-time\"><p>April 20, 2017<\/p><\/div><\/div><div class=\"timeline-block-icon\"><svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/div><div class=\"ctl-6 timeline-block-detail\"><div class=\"story-details\"><div class=\"story-content\">\n<figure class=\"wp-block-image size-full ctlb-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"540\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/tinyboatandtino1.jpg\" alt=\"Two orange kittens\" class=\"wp-image-1473\" style=\"aspect-ratio:4\/3;object-fit:cover\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/tinyboatandtino1.jpg 720w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/tinyboatandtino1-300x225.jpg 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/tinyboatandtino1-400x300.jpg 400w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading ctlb-block-title\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">Biscuits and Gravy are Born<\/h3>\n\n\n\n<p class=\"ctlb-block-desc\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">Biscuits and Gravy are born in a barn somewhere in Wisconsin. Biscuits is a female orange cat, one of the rarest colors for a female! Gravy is an orange male cat. They soon contract a virus that causes their eye damage<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-cp-timeline-content-timeline-child swiper-slide\"><div class=\"timeline-content icon-false \"><div class=\"timeline-block-timeline ctl-row  position-left\"><div class=\"ctl-6 timeline-block-time\"><div class=\"story-time\"><p>November 2017<\/p><\/div><\/div><div class=\"timeline-block-icon\"><svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/div><div class=\"ctl-6 timeline-block-detail\"><div class=\"story-details\"><div class=\"story-content\">\n<figure class=\"wp-block-image size-full ctlb-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"540\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/tinyboatandtino2.jpg\" alt=\"\" class=\"wp-image-1474\" style=\"aspect-ratio:4\/3;object-fit:cover\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/tinyboatandtino2.jpg 720w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/tinyboatandtino2-300x225.jpg 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/tinyboatandtino2-400x300.jpg 400w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading ctlb-block-title\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">Spotted!<\/h3>\n\n\n\n<p class=\"ctlb-block-desc\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">The cats are spotted on PetFinder by their future adopter when she&#8217;s coping with the loss of her previous two cats<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-cp-timeline-content-timeline-child swiper-slide\"><div class=\"timeline-content icon-false \"><div class=\"timeline-block-timeline ctl-row  position-right\"><div class=\"ctl-6 timeline-block-time\"><div class=\"story-time\"><p>December 2021<\/p><\/div><\/div><div class=\"timeline-block-icon\"><svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/div><div class=\"ctl-6 timeline-block-detail\"><div class=\"story-details\"><div class=\"story-content\">\n<figure class=\"wp-block-image size-large ctlb-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"1024\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/CatLimo-768x1024.jpg\" alt=\"\" class=\"wp-image-1475\" style=\"aspect-ratio:4\/3;object-fit:cover\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/CatLimo-768x1024.jpg 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/CatLimo-225x300.jpg 225w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/CatLimo-1152x1536.jpg 1152w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/CatLimo-1536x2048.jpg 1536w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/CatLimo-940x1253.jpg 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/CatLimo-400x533.jpg 400w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2025\/01\/CatLimo-scaled.jpg 1920w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading ctlb-block-title\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">The Big Move<\/h3>\n\n\n\n<p class=\"ctlb-block-desc\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">Biscuits and Gravy stay in a hotel for the first time during their move to Western Massachusetts<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>Cool Timeline is an vertical timeline tool you can use to create timelines on a WordPress site. To create a timeline, you\u2019ll need to: Step 1. Creating your Events The first step to creating a timeline is to create the events you\u2019d like to appear on your timeline. Want to draft your event text in [&hellip;]<\/p>\n","protected":false},"author":5691,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,34],"tags":[],"class_list":["post-1347","post","type-post","status-publish","format-standard","hentry","category-class-instructions","category-tools"],"_links":{"self":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/users\/5691"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/comments?post=1347"}],"version-history":[{"count":13,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1347\/revisions"}],"predecessor-version":[{"id":1476,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1347\/revisions\/1476"}],"wp:attachment":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/media?parent=1347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/categories?post=1347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/tags?post=1347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}