{"id":4449,"date":"2018-03-22T21:03:29","date_gmt":"2018-03-22T21:03:29","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2018\/03\/22\/how-to-edit-your-jekyll-theme\/"},"modified":"2020-09-23T17:24:16","modified_gmt":"2020-09-23T21:24:16","slug":"how-to-edit-your-jekyll-theme","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/","title":{"rendered":"How to Edit Your Jekyll Theme"},"content":{"rendered":"

We have already seen in our Jekyll series, how you can change your default theme using RubyGems. However, instead of changing your whole theme, you can also edit the theme you have and creat new layouts based on your own design. In this article, we’re going to show you how to edit your Jekyll theme.<\/p>\n

There are a few important ways you can edit your Jekyll theme:<\/p>\n

    \n
  1. Selecting assets and stylesheets<\/li>\n
  2. Including files<\/li>\n
  3. Creating layouts<\/li>\n<\/ol>\n

    Selecting Assets and Stylesheets<\/h2>\n

    In the course of making your Jekyll site, you may realize that the site comes with different parts. Some of these elements will change each time the site is built. However, some site elements will stay the same and require no further conversion or processing. For these static<\/em> assets, Jekyll has a folder called “assets”.<\/p>\n

    Any items places in the “assets” folder will be copied over to your final site when you run the build command. Unlike the markdown files, which are converted to HTML, the static assets in the “assets” folder will simply be copied. This means you can link to them (like images) or include them in your site header (like CSS stylesheets).<\/p>\n

    Including Files<\/h2>\n

    When building a site dynamically, different elements of the final page can come together from different files. For example, all pages have a header, body, and footer. The body may always be different, but the header and footer remain the same. This means that you can include<\/em> the same header and footer alongside each new body.<\/p>\n

    Jekyll works the same way. If you want a create a header file, you can use your text editor to fill in the necessary HTML code and then save the file the _includes<\/code> folder. In the next section we’ll explain how these files can be included in layouts.<\/p>\n

    Creating Layouts<\/h2>\n

    Now, assuming that you have a header file coded and saved in your _includes<\/code> folder, you can create an HTML layout called, let’s say, “Body1”, and save Body1.html<\/code> in the _layouts<\/code> folder. The code inside Body1.html<\/code> might look like this:<\/p>\n

    {% include header.html %} \n<h2>Title Content<\/h2> \n<!-- Post Content --><\/pre>\n
    Blank code has been written here to show where the variables for title and post information can do, but this demonstrates the proper syntax for including files.<\/p>\n
    We will provide more information about variables you can include in later articles.     For now, you should have a better grasp on how you can edit your current theme.     Remember that your current theme will have example code you can copy and edit as you see fit.<\/p>\n","protected":false},"excerpt":{"rendered":"
    We have already seen in our Jekyll series, how you can change your default theme using RubyGems. However, instead of changing your whole theme, you can also edit the theme you have and creat new layouts based on your own design. In this article, we’re going to show you how to edit your Jekyll theme. Read More ><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4306],"tags":[],"class_list":["post-4449","post","type-post","status-publish","format-standard","hentry","category-jekyll"],"acf":[],"yoast_head":"\nHow to Edit Your Jekyll Theme | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Edit Your Jekyll Theme | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"We have already seen in our Jekyll series, how you can change your default theme using RubyGems. However, instead of changing your whole theme, you can also edit the theme you have and creat new layouts based on your own design. In this article, we’re going to show you how to edit your Jekyll theme. Read More >\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-22T21:03:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-23T21:24:16+00:00\" \/>\n<meta name=\"author\" content=\"Christopher Maiorana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christopher Maiorana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/\"},\"author\":{\"name\":\"Christopher Maiorana\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\"},\"headline\":\"How to Edit Your Jekyll Theme\",\"datePublished\":\"2018-03-22T21:03:29+00:00\",\"dateModified\":\"2020-09-23T21:24:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/\"},\"wordCount\":420,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"articleSection\":[\"Jekyll\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/\",\"name\":\"How to Edit Your Jekyll Theme | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2018-03-22T21:03:29+00:00\",\"dateModified\":\"2020-09-23T21:24:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Edit Your Jekyll Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\",\"name\":\"Christopher Maiorana\",\"description\":\"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Edit Your Jekyll Theme | InMotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/","og_locale":"en_US","og_type":"article","og_title":"How to Edit Your Jekyll Theme | InMotion Hosting","og_description":"We have already seen in our Jekyll series, how you can change your default theme using RubyGems. However, instead of changing your whole theme, you can also edit the theme you have and creat new layouts based on your own design. In this article, we’re going to show you how to edit your Jekyll theme. Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2018-03-22T21:03:29+00:00","article_modified_time":"2020-09-23T21:24:16+00:00","author":"Christopher Maiorana","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Christopher Maiorana","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/"},"author":{"name":"Christopher Maiorana","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f"},"headline":"How to Edit Your Jekyll Theme","datePublished":"2018-03-22T21:03:29+00:00","dateModified":"2020-09-23T21:24:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/"},"wordCount":420,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"articleSection":["Jekyll"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/","name":"How to Edit Your Jekyll Theme | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2018-03-22T21:03:29+00:00","dateModified":"2020-09-23T21:24:16+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/jekyll\/how-to-edit-your-jekyll-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Edit Your Jekyll Theme"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f","name":"Christopher Maiorana","description":"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.","sameAs":["https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=4449"}],"version-history":[{"count":1,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4449\/revisions"}],"predecessor-version":[{"id":46717,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/4449\/revisions\/46717"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=4449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=4449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=4449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}