{"id":2908,"date":"2020-07-26T15:26:46","date_gmt":"2020-07-26T05:26:46","guid":{"rendered":"http:\/\/vjdesign.com.au\/?p=2908"},"modified":"2022-04-18T11:55:00","modified_gmt":"2022-04-18T01:55:00","slug":"create-headers-footers-using-wordpress-blocks","status":"publish","type":"post","link":"https:\/\/vjdesign.com.au\/create-headers-footers-using-wordpress-blocks\/","title":{"rendered":"Create headers, sidebars and footers using WordPress Block Editor (GeneratePress)"},"content":{"rendered":"\n<p><strong>Design your theme using block editor. Use the WordPress block editor to design custom Headers, Sidebars, Footers, Call to Actions and more.<\/strong><\/p>\n\n\n\n<p>The WordPress block editor brings the ability to <a href=\"https:\/\/vjdesign.com.au\/landing-page-using-wordpress\/\">create well designed pages and posts<\/a> and  style them without the need to use any custom code (or page builders). I have always wanted to design my themes using blocks&#8230;<\/p>\n\n\n\n<p class=\"has-medium-font-size\">We will be using the new <strong>Block Elements<\/strong> feature in <a href=\"https:\/\/vjdesign.com.au\/generatepress-theme\/\">GeneratePress premium theme<\/a> that I use on my own site and for all my client projects.<\/p>\n\n\n\n<div class=\"lyte-wrapper\" style=\"width:1280px;max-width:100%;margin:5px auto;\"><div class=\"lyMe hidef\" id=\"WYL_F1Dww64H4IY\"><div id=\"lyte_F1Dww64H4IY\" data-src=\"https:\/\/vjdesign.com.au\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=%2F%2Fi.ytimg.com%2Fvi%2FF1Dww64H4IY%2Fmaxresdefault.jpg\" class=\"pL\"><div class=\"tC\"><div class=\"tT\"><\/div><\/div><div class=\"play\"><\/div><div class=\"ctrl\"><div class=\"Lctrl\"><\/div><div class=\"Rctrl\"><\/div><\/div><\/div><noscript><a href=\"https:\/\/youtu.be\/F1Dww64H4IY\" rel=\"nofollow noopener\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vjdesign.com.au\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FF1Dww64H4IY%2F0.jpg\" alt=\"-\" width=\"1280\" height=\"700\"><br \/>Watch this video on YouTube<\/a><\/noscript><\/div><\/div><div class=\"lL\" style=\"max-width:100%;width:1280px;margin:5px auto;\"><\/div><\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Add category links to the top of the blog page<\/h2>\n\n\n<div id=\"rank-math-howto\" class=\"rank-math-block\" >\n<div class=\"rank-math-howto-description\">\n<img loading=\"lazy\" decoding=\"async\" width=\"964\" height=\"371\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/category-links-on-blog-page.png\" class=\"attachment-full size-full\" alt=\"-\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/category-links-on-blog-page.png 964w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/category-links-on-blog-page-600x231.png 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/category-links-on-blog-page-1024x394.png 1024w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/category-links-on-blog-page-300x115.png 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/category-links-on-blog-page-768x295.png 768w\" sizes=\"(max-width: 964px) 100vw, 964px\">\n<p><strong>Requirements:<\/strong> <a href=\"#faq\">Check out the FAQs below<\/a>.<\/p>\n<p>I want to display links to all my categories on my blog page as illustrated above. This will allow users to filter and view my posts by category.<\/p>\n<p>When I click Edit, I am unable to edit and add blocks to the default blog page as illustrated below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/wordpress-blog-page-cannot-be-edited-1024x362.png\" alt=\"wordpress-blog-page-cannot-be-edited\"><\/p>\n<p>Let&#8217;s use the new <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/generatepress.com\/gp-premium-1-11-0-block-elements\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Block Elements feature in GeneratePress<\/a>. They work just like other Elements, but they allow you to use the block editor to build your Element content instead of needing to use HTML. When combined with GenerateBlocks, you can now build custom headers, sidebars, and footers. You can also use the Block Element as a regular hook to add content anywhere throughout your website!<br \/>We will create the category links as a block element an display them on Blog page using hooks (no coding needed).<\/p>\n\n<\/div>\n<p class=\"rank-math-howto-duration\"><strong>Total Time:<\/strong> <span>10 minutes<\/span><\/p>\n<ol class=\"rank-math-steps \">\n<li id=\"howto-step-1629601881766\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Location where we want to add some custom links<\/h3>\n<div class=\"rank-math-step-content \"><p>I want to add links to all my post categories on my blog page above the content. <\/p>\n<p><img decoding=\"async\" alt=\"-\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/blog-header-links-location.png\"><\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629601881766\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Add the new Block Element<\/h3>\n<div class=\"rank-math-step-content \"><p>From WordPress admin menu, go to Appearance > Elements, click on <strong>Add New Element<\/strong> (1) and choose <strong>Block<\/strong> (1) as the element type and <strong>Create<\/strong>.<\/p>\n<p><img decoding=\"async\" alt=\"add-new-block-element\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/add-new-block-element.png\"\/><\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629601881766\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Insert required blocks<\/h3>\n<div class=\"rank-math-step-content \"><p>The Block Element editing experience is similar to editing WordPress post\/page. <br \/>Click on (+) Add Block button and add a Category block. I decided to show post counts.<\/p>\n<p><img decoding=\"async\" alt=\"Block Elements Interface - add any type of blocks\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/categories-block.png\"\/><\/p>\n<p>I wrapped the category block inside a <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/docs.generateblocks.com\/article\/container-overview\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Container block<\/a>. This block allows us to add simple background colour to the block.<\/p>\n<p>As illustrated above, I also added additional CSS classes <code>list-inline has-separator border<\/code> to style the links in block. <\/p>\n<p>See FAQs below on how to add custom CSS.<\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629601881766\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Display the element on the right page<\/h3>\n<div class=\"rank-math-step-content \"><p>Scroll down and select the following settings to display these blocks on my blog page:<br \/>1. Set Block Type to <strong>Hook<\/strong><br \/>2. For the Hook, select to display it before the main content. Here is a <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/docs.generatepress.com\/article\/hooks-visual-guide\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">visual guide to hooks in GeneratePress<\/a>.<br \/>3. Only display on Blog page <\/p>\n<p><img decoding=\"async\" alt=\"Settings for the block element\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/block-element-settings.png\"\/><\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629601881766\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Add some custom CSS to make it better<\/h3>\n<div class=\"rank-math-step-content \"><p>When I visit my blog page, I notice that I can see the custom category links&#8230;<br \/><img decoding=\"async\" alt=\"-\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/categories-list-default-display.png\"><\/p>\n<p>Optional step: <br \/>I want to style the links with some custom CSS that I added using a plugin (see FAQ below).<\/p>\n<p>Add the below code.<\/p>\n<p><code>.list-inline {<br \/>list-style: none;<br \/>margin-left: 0;<br \/>margin-bottom: 0;<br \/>}<br \/>.list-inline > li {<br \/>display: inline-block;<br \/>margin-right: .5rem;<br \/>}<br \/>.list-inline.has-separator > li:after {<br \/>content: '|';<br \/>display: inline-block;<br \/>color: #ccc;<br \/>font-size: small;<br \/>margin-left: .5rem;<br \/>}<br \/>.list-inline > li:last-of-type:after {<br \/>content: '';<br \/>}<\/code><\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629601881766\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Done.<\/h3>\n<div class=\"rank-math-step-content \"><p>I can now see links to all my blog categories. <a href=\"https:\/\/vjdesign.com.au\/learn\/\">Check it out.<\/a><br \/><img decoding=\"async\" alt=\"-\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/category-links-on-blog-page.png\"><\/p>\n<\/div>\n<\/li>\n<\/ol>\n<\/div>\n\n\n\n\n\n\n<h2 class=\"gb-headline gb-headline-17ac1e44 gb-headline-text\" id=\"faq\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"rm-faq-faa1e7a543f463ff6f3b052386e5904e\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What theme do I need to design headers and footers using WordPress blocks?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You will need access to <a href=\"https:\/\/vjdesign.com.au\/generatepress-theme\/\">GeneratePress Premium theme<\/a>.  It is my go to theme for <strong>all<\/strong> of my own and client WordPress projects.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"rm-faq-1d55cb92e159fa59651de6fb284da1c8\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What plugins do I need to design headers and footers using WordPress blocks?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>I used <a href=\"https:\/\/generateblocks.com\" rel=\"nofollow noopener\" target=\"_blank\">GenerateBlocks<\/a> (free plugin), a small collection of lightweight WordPress blocks that can accomplish nearly anything. <\/p>\n<p><img decoding=\"async\" alt=\"-\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/generateblocks.png\"><\/p>\n<p>I am also using <a href=\"https:\/\/wordpress.org\/plugins\/simple-css\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">SimpleCSS<\/a>, to add some custom CSS to my site. It gives us an awesome admin editor and a live preview editor in the Customizer. After adding classes to the block, I added required CSS here.<\/p>\n<p><img decoding=\"async\" alt=\"SimpleCSS - CSS Editor Plugin\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2020\/07\/simplecss.png\"\/><\/p>\n\n<\/div>\n<\/div>\n<div id=\"rm-faq-b2934d5058e0c618e0040e0e72e7216b\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What are blocks? How can I design a page\/post with blocks?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>I have an entire post on <a href=\"https:\/\/vjdesign.com.au\/landing-page-using-wordpress\/\">how to Create an awesome Landing page using WordPress in just 15mins<\/a> \u2013 Illustrated Guide Feb 2020.<br \/>I have provided <a href=\"https:\/\/vjdesign.com.au\/landing-page-using-wordpress\/#landing-page-in-wordpress-faqs\">detailed FAQs on blocks<\/a> and why I believe they are the future for WordPress&#8230;<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p>I hope that you found this post useful, feel free to comment below if you have any queries&#8230;<\/p>\n\n\n\n<div class=\"wp-block-group alignfull has-central-palette-9-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Want Qualified Leads? <strong>Choose VJ Design<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\">\n<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f34a53\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.2 7.8l-7.7 7.7-4-4-5.7 5.7\"><\/path><path d=\"M15 7h6v6\"><\/path><\/svg>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">More revenue<\/h3>\n\n\n\n<p class=\"has-text-align-center\">Let&#8217;s focus on funneling high quality leads into paying customers that understand your value proposition.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\">\n<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#004f69\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"><\/line><path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"><\/path><\/svg>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Save Money<\/h3>\n\n\n\n<p class=\"has-text-align-center\">Higher conversion rates = lower cost per conversion. <\/p>\n\n\n\n<p class=\"has-text-align-center\">Money that you can keep or reinvest into your business.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\">\n<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#008FBE\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10\" cy=\"20.5\" r=\"1\"><\/circle><circle cx=\"18\" cy=\"20.5\" r=\"1\"><\/circle><path d=\"M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1\"><\/path><\/svg>\n<\/figure>\n<\/div>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">More Customers<\/h3>\n\n\n\n<p class=\"has-text-align-center\">Leads are only good if they lead to new paying customers and more revenue.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-central-palette-13-color has-text-color\">Do you want to convert your <strong>visitors<\/strong> into <strong>customers<\/strong>?<\/p>\n\n\n\n<p>I can help you build fast loading lightweight sites that look good on any device, <a href=\"https:\/\/vjdesign.com.auhttps:\/\/vjdesign.com.au\/contact\/\">get in touch today<\/a>! <\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Design your theme using block editor. Use the WordPress block editor to design custom Headers, Sidebars, Footers, Call to Actions and more. The WordPress block editor brings the ability to create well designed pages and posts and style them without &#8230; <a title=\"Create headers, sidebars and footers using WordPress Block Editor (GeneratePress)\" class=\"read-more\" href=\"https:\/\/vjdesign.com.au\/create-headers-footers-using-wordpress-blocks\/\" aria-label=\"Read more about Create headers, sidebars and footers using WordPress Block Editor (GeneratePress)\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2912,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1],"tags":[],"post_series":[],"post_folder":[],"acf":[],"_links":{"self":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/posts\/2908"}],"collection":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/comments?post=2908"}],"version-history":[{"count":20,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/posts\/2908\/revisions"}],"predecessor-version":[{"id":5287,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/posts\/2908\/revisions\/5287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/media\/2912"}],"wp:attachment":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/media?parent=2908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/categories?post=2908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/tags?post=2908"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/post_series?post=2908"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/post_folder?post=2908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}