{"id":710,"date":"2023-01-09T20:38:54","date_gmt":"2023-01-09T20:38:54","guid":{"rendered":"https:\/\/boostyourblog.com\/?p=710"},"modified":"2023-01-15T11:31:36","modified_gmt":"2023-01-15T11:31:36","slug":"customizing-default-generatepress","status":"publish","type":"post","link":"https:\/\/www.boostyourblog.com\/customizing-default-generatepress\/","title":{"rendered":"Customizing The Default GeneratePress Theme (For A Much Nicer Look)"},"content":{"rendered":"\n<p>I chose to build Boost Your Blog using the <a class=\"thirstylink\" title=\"GeneratePress homepage\" href=\"https:\/\/www.boostyourblog.com\/ref\/generatepress\/\" data-shortcode=\"true\">GeneratePress<\/a> theme because it&#8217;s known for being lightweight, multi-purpose, and above all <em>fast<\/em>.<\/p>\n\n\n\n<p><strong>Sadly, it doesn&#8217;t look that great out of the box. <\/strong>I spent some time sprucing it up and thought it&#8217;d be fun to show you my exact process&#8230;<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block has-medium-font-size\" id=\"rank-math-toc\"><h4>Table of Contents<\/h4><nav><ul><li ><a href=\"#why-im-using-plain-generate-press\">Why I&#8217;m using plain GeneratePress<\/a><\/li><li ><a href=\"#removing-unneeded-elements\">Removing unneeded elements<\/a><\/li><li ><a href=\"#adding-some-css\">Adding some CSS<\/a><\/li><li ><a href=\"#changing-the-fonts\">Changing the fonts<\/a><\/li><li ><a href=\"#adding-sidebars-and-headers\">Adding sidebars and headers<\/a><\/li><li ><a href=\"#blocks-and-detailing\">Blocks and detailing<\/a><\/li><li ><a href=\"#making-a-logo\">Making a logo<\/a><\/li><li ><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-im-using-plain-generate-press\">Why I&#8217;m using plain GeneratePress<\/h2>\n\n\n\n<p>I tried out a few templating systems and went with GeneratePress because it&#8217;s just so lightweight and clean. I&#8217;m not a fan of themes that come with giant page builders and other gizmos you&#8217;ll never use and that just weigh things down. <em>(Slow site = bad for SEO.)<\/em><\/p>\n\n\n\n<p>At first, I did consider installing one of the GeneratePress &#8220;starter site&#8221; themes from their <a class=\"thirstylink\" title=\"GeneratePress Site Library\" href=\"https:\/\/www.boostyourblog.com\/ref\/generatepress-site-library\/\" data-shortcode=\"true\">Site Library<\/a>. These pre-made themes look good but none of them<em> <\/em>fit exactly what I needed. <\/p>\n\n\n\n<p>I prefer building a site organically from the ground up anyway, rather than trying to bend a pre-designed theme to my specific needs.<\/p>\n\n\n\n<p>Since this is not a photography-heavy travel or food blog or anything, I believe I can get away with using just the default GeneratePress template. But not without doing some big improvements first!<\/p>\n\n\n\n<p>I&#8217;m not a designer, but I was still able to improve the default look a lot through the Customizer. Using a few bits of CSS, I further tweaked some specific elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"removing-unneeded-elements\">Removing unneeded elements<\/h2>\n\n\n\n<p>Here&#8217;s what GeneratePress looks like by default:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-1024x476.png\" alt=\"\" class=\"wp-image-734\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-1024x476.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-300x140.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-768x357.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-1536x715.png 1536w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-2048x953.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Oh be still, my beating heart!<\/p>\n\n\n\n<p>Yeah, this is not very exciting.<\/p>\n\n\n\n<p>First order of business: delete the search sidebar widget and delete recent comments. <br>They&#8217;re just not needed.<\/p>\n\n\n\n<p>Let&#8217;s add a few articles so we get a feel for what it will look like with content in it.<\/p>\n\n\n\n<p>I played with the link color until I landed on teal. Teal seems nice!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/2_generatepress_adding_content-1024x516.png\" alt=\"\" class=\"wp-image-736\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/2_generatepress_adding_content-1024x516.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/2_generatepress_adding_content-300x151.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/2_generatepress_adding_content-768x387.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/2_generatepress_adding_content-1536x774.png 1536w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/2_generatepress_adding_content-2048x1032.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-some-css\">Adding some CSS<\/h2>\n\n\n\n<p>One thing immediately bothers me and it&#8217;s the category tags&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/generatepress_tags_old.png\" alt=\"\" class=\"wp-image-738\" width=\"198\" height=\"24\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/generatepress_tags_old.png 361w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/generatepress_tags_old-300x37.png 300w\" sizes=\"(max-width: 198px) 100vw, 198px\" \/><\/figure>\n\n\n\n<p>I want them to look better, but for that we&#8217;ll need to add some CSS styling.<\/p>\n\n\n\n<p>At this point, I installed the <a href=\"https:\/\/wordpress.org\/plugins\/simple-css\/\" target=\"_blank\" rel=\"noopener\">Simple CSS plugin<\/a> so I can easily add styling within WordPress via <strong>Appearance &gt; Simple CSS<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-group has-light-teal-background-color has-background is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h5 class=\"has-contrast-color has-text-color wp-block-heading\" id=\"whoa-there-partner-whats-css\">Whoa there, partner! What&#8217;s CSS?<\/h5>\n\n\n\n<p>CSS is used to define the look of page elements such as a box or header. Knowing at least some CSS can be amazingly helpful as a blogger, as it will let you override the default styles of themes or plugins (even when you&#8217;re not given an option for it inside the WordPress admin).<\/p>\n\n\n\n<p>It&#8217;s worth spending an hour or two learning the basics of CSS. It&#8217;s not a coding language but a markup language, so it&#8217;s fairly easy to pick up.<\/p>\n\n\n\n<p>The key things to know are these:<\/p>\n\n\n\n<ul>\n<li>What classes and id&#8217;s are<\/li>\n\n\n\n<li>How to find them inside a page (easiest way: right-click in Google Chrome and select Inspector)<\/li>\n\n\n\n<li>How to select a class or id and add curly brackets<\/li>\n\n\n\n<li>How to add stuff inside the curly brackets<\/li>\n<\/ul>\n\n\n\n<p>The codes to change aspects of an element are easy to find by Googling it. Changing the font size of an element with the class my-header would work like this: <strong>.my-header { font-size: 20px; };<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To make the category links look a bit more like tags or buttons, I applied this CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.cat-links {\n    font-size: 0;\n    margin: 30px 30px 30px 0;\n}\n\n.cat-links:before,\n.cat-links a {\n    font-size: 15px !important;\n    background-color: #fff;   \n    border-radius: 10px;\n    padding: 7px 15px;\n    margin-right: 10px;\n    text-decoration: none;\n    font-weight: bold;\n    border: 1px solid #eee;\n}\n\n.cat-links a:hover {\n    background-color: #1fbfaa;   \n    color:#fff;\n}<\/code><\/pre>\n\n\n\n<p>Which makes it look like this:<\/p>\n\n\n\n<span class=\"cat-links\"><a href=\"https:\/\/boostyourblog.com\/category\/affiliate\/\" rel=\"category tag\">Affiliate<\/a>, <a href=\"https:\/\/boostyourblog.com\/category\/blogging-tools\/\" rel=\"category tag\">Blogging Tools<\/a><\/span><\/span>\n\n\n\n<p>You can hover over the above category tags to see the hover effect I added.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"changing-the-fonts\">Changing the fonts<\/h2>\n\n\n\n<p>It&#8217;s easy to change the fonts in GeneratePress by going to <strong>Appearance &gt; Typography<\/strong>.<\/p>\n\n\n\n<p>By default, there is already a huge selection of fonts available under <strong>Add Fonts<\/strong>, which are all sourced from Google&#8217;s free font library.<\/p>\n\n\n\n<p>I realized that I actually have access to thousands more fonts via <a href=\"https:\/\/fonts.adobe.com\/\" target=\"_blank\" rel=\"noopener\">Adobe Fonts<\/a> because I have an active Adobe Creative Cloud subscription. (I use Lightroom to edit my travel photos.) I installed the <a href=\"https:\/\/wordpress.org\/plugins\/custom-typekit-fonts\/\" target=\"_blank\" rel=\"noopener\">Custom Adobe Fonts plugin<\/a> to access them in WordPress.<\/p>\n\n\n\n<p>Adobe Fonts has a lot more premium fonts than Google, including many that font nerds get excited about.<\/p>\n\n\n\n<p>After playing around a bit I changed my headers to Futura. This is kind of a famous font, actually. Lots of brands and logos use it and it&#8217;s the favorite font of Wes Anderson. (All the text in <em>The Grand Budapest Hotel, The Life Aquatic<\/em>, etc. is Futura)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/3_generatepress_futura-1024x520.png\" alt=\"\" class=\"wp-image-746\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/3_generatepress_futura-1024x520.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/3_generatepress_futura-300x152.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/3_generatepress_futura-768x390.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/3_generatepress_futura-1536x780.png 1536w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/3_generatepress_futura-2048x1040.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Neato!<\/p>\n\n\n\n<p>I kept this font for a while but then I changed my mind. Futura is cool but it&#8217;s also the kind of font that would say <em>&#8220;I&#8217;m kind of a famous font, actually&#8221;<\/em>. It maybe draws a bit too much attention to itself.<\/p>\n\n\n\n<p>Then I found the font Sofia and loved it immediately. It&#8217;s like a milder version of Futura. I also changed the body text to Proxima Nova.<\/p>\n\n\n\n<p>OK done.<\/p>\n\n\n\n<p>Actually, one more thing! I tweaked the letter spacing a bit. <\/p>\n\n\n\n<p>I&#8217;m definitely not a designer but I learned that if just one thing makes a difference in typography, it&#8217;s the letter spacing. In <strong>Customize &gt; Typography<\/strong> I set it to -0,25 for all the headers. I can&#8217;t explain to you why but I think it&#8217;s a lot more pleasant that way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-sidebars-and-headers\">Adding sidebars and headers<\/h2>\n\n\n\n<p>The free version of GeneratePress has only some basic header and layout options. For better results, I highly recommend <a class=\"thirstylink\" title=\"GeneratePress Premium\" href=\"https:\/\/www.boostyourblog.com\/ref\/generatepress-premium\/\" data-shortcode=\"true\">upgrading to GeneratePress Premium<\/a>.<\/p>\n\n\n\n<p>It&#8217;s just $59 for Premium with one year of free updates. It&#8217;s <strong>not <\/strong>an annual subscription. You don&#8217;t have to keep paying every year if you don&#8217;t want to.<\/p>\n\n\n\n<p>GeneratePress Premium adds a ton of flexibility to create custom layouts and headers. It also adds super useful features like sticky menu bars, yet it remains very fast and lightweight. <\/p>\n\n\n\n<p>To begin with I thought I&#8217;d at a splash of color:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"324\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/4_generatepress_adding_color-1024x324.png\" alt=\"\" class=\"wp-image-766\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/4_generatepress_adding_color-1024x324.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/4_generatepress_adding_color-300x95.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/4_generatepress_adding_color-768x243.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/4_generatepress_adding_color-1536x485.png 1536w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/4_generatepress_adding_color-2048x647.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I figured my sidebar would need a mailing list signup box and that it would really need to stand out from everything else.<\/p>\n\n\n\n<p>I don&#8217;t really have an eye for color schemes so I went to <a href=\"https:\/\/color.adobe.com\/\" target=\"_blank\" rel=\"noopener\">Adobe Color<\/a> for some suggestions. I pasted the hex code for the teal in there and it spat out a bunch of complementary colors. <\/p>\n\n\n\n<p>I liked the terracotta red.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"701\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/5_generatepress_adding_sidebar-1024x701.png\" alt=\"\" class=\"wp-image-767\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/5_generatepress_adding_sidebar-1024x701.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/5_generatepress_adding_sidebar-300x205.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/5_generatepress_adding_sidebar-768x526.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/5_generatepress_adding_sidebar.png 1241w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I accomplished this using another bit of CSS. This tells it to display the second sidebar element in a different color:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.sidebar .widget:nth-child(2), .sidebar .widget:nth-child(2) .widget-title {\n    background-color: #d98768;\n    color: #fff;\n}<\/code><\/pre>\n\n\n\n<p>By the way, a lot of these CSS functions I don&#8217;t know by heart &#8212; I just know how to apply them. I searched for solutions and saw this one mentioned on the GeneratePress forums. Copy\/paste and presto.<\/p>\n\n\n\n<p>Using GeneratePress Premium you can easily create big &#8220;hero&#8221; headers. Activate the plugin module, then go to <strong>Appearance &gt; Elements<\/strong>.<\/p>\n\n\n\n<p>Here I created a Header set to display above every post. The screenshot below shows how this looks without changing the settings. (The menu bar is separate from it.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/6_generatepress_hero-1024x485.png\" alt=\"\" class=\"wp-image-775\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/6_generatepress_hero-1024x485.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/6_generatepress_hero-300x142.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/6_generatepress_hero-768x364.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/6_generatepress_hero-1536x727.png 1536w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/6_generatepress_hero.png 1892w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Later on, I used the setting &#8220;Merge on Desktop Only&#8221; to make the teal area cover not just the headline but also the menu above it. <\/p>\n\n\n\n<p>I also added a &lt;div&gt; element with the class &#8220;header-container&#8221; around the title text and set its maximum width to 70% on desktop. This is to prevent the headline from expanding the whole width, which would make it harder to read.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media screen and (min-width: 800px) {\n\t.header-container {\n \t\twidth: 70%;   \n\t}\n}<\/code><\/pre>\n\n\n\n<p>I also made a header set to be displayed on every Category page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/7_generatepress_categories-1024x490.png\" alt=\"\" class=\"wp-image-776\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/7_generatepress_categories-1024x490.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/7_generatepress_categories-300x143.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/7_generatepress_categories-768x367.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/7_generatepress_categories-1536x734.png 1536w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/7_generatepress_categories.png 1893w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I got into a bit of a weird phase here where I was adding really high-contrast elements. I guess it was getting late and I was slipping into Dark Mode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"599\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/8_generatepress_darkmode-1024x599.png\" alt=\"\" class=\"wp-image-777\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/8_generatepress_darkmode-1024x599.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/8_generatepress_darkmode-300x176.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/8_generatepress_darkmode-768x449.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/8_generatepress_darkmode-1536x899.png 1536w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/8_generatepress_darkmode-2048x1198.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This made things feel way too heavy, so the following day I went back to using mainly white for the menu bars.<\/p>\n\n\n\n<p>Light Mode it is.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/9_generatepress_lightmode-1024x518.png\" alt=\"\" class=\"wp-image-778\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/9_generatepress_lightmode-1024x518.png 1024w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/9_generatepress_lightmode-300x152.png 300w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/9_generatepress_lightmode-768x389.png 768w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/9_generatepress_lightmode-1536x777.png 1536w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/9_generatepress_lightmode-2048x1036.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"blocks-and-detailing\">Blocks and detailing<\/h2>\n\n\n\n<p>We&#8217;re getting close here but there are still a few things to do.<\/p>\n\n\n\n<p>GeneratePress doesn&#8217;t seem to come with a lot of Gutenberg blocks. Their pack only comes with 6 that are mostly utility blocks, not post layout elements. <\/p>\n\n\n\n<p>I added the <a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Spectra<\/a> pack of 20+ blocks. It has some great blocks like a Table of Contents.<\/p>\n\n\n\n<p>Finally, I went through the entire template and tweaked a bunch of little things.<\/p>\n\n\n\n<p>For example, the Recent Posts looks like this by default:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/12_recent_posts-702x1024.png\" alt=\"\" class=\"wp-image-780\" width=\"351\" height=\"512\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/12_recent_posts-702x1024.png 702w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/12_recent_posts-206x300.png 206w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/12_recent_posts.png 754w\" sizes=\"(max-width: 351px) 100vw, 351px\" \/><\/figure>\n\n\n\n<p>Hmmm, why are all these links underlined? <\/p>\n\n\n\n<p>That makes sense for links within body text, but it&#8217;s not needed for a sidebar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/13_recent_posts-692x1024.png\" alt=\"\" class=\"wp-image-781\" width=\"346\" height=\"512\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/13_recent_posts-692x1024.png 692w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/13_recent_posts-203x300.png 203w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/13_recent_posts.png 756w\" sizes=\"(max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<p>But there&#8217;s still something off about it. <\/p>\n\n\n\n<p>These links don&#8217;t really draw my eye and don&#8217;t feel very &#8216;clickable&#8217; somehow.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/14_recent_posts-666x1024.png\" alt=\"\" class=\"wp-image-782\" width=\"333\" height=\"512\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/14_recent_posts-666x1024.png 666w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/14_recent_posts-195x300.png 195w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/14_recent_posts.png 744w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p>Switching on the dates in the preferences looks better to me.  <\/p>\n\n\n\n<p>Let&#8217;s add a bit more CSS for a finishing touch:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.wp-block-latest-posts__list li:not(:last-child) {\n        border-bottom: 1px solid #eee;\n        padding-bottom: 20px;\n}<\/code><\/pre>\n\n\n\n<p>This tells the stylesheet to give every list item in the latest posts block (except the last one) a line below it and some extra padding.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/15_recent_posts-605x1024.png\" alt=\"\" class=\"wp-image-783\" width=\"303\" height=\"512\" srcset=\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/15_recent_posts-605x1024.png 605w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/15_recent_posts-177x300.png 177w, https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/15_recent_posts.png 756w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/figure>\n\n\n\n<p>I won&#8217;t bore you with every other tweak I made but I just generally went around the template looking for small things to tidy up.<\/p>\n\n\n\n<p>I then enabled GeneratePress Premium&#8217;s sticky menu bar. I think it&#8217;s important that users can always easily navigate to other sections or visit my <a href=\"\/resources\/\">Recommended<\/a> page. It reduces Bounce Rate and is generally just a good idea.<\/p>\n\n\n\n<p>I added my photo to the sidebar, made an About page, and did all the other basic prep work.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"making-a-logo\">Making a logo<\/h2>\n\n\n\n<p>I considered having a logo designed on 99designs or Fiverr, but that would cost a lot of money and no one cares about logos all that much anyway. <\/p>\n\n\n\n<p>If I do get a custom logo, it&#8217;s a luxury I&#8217;ll afford one day when this blog has become a megacorp with subsidiaries around the world.<\/p>\n\n\n\n<p>Instead, I just found another font I liked on Adobe Fonts, typed out &#8220;Boost Your Blog&#8221;, and slapped a bolt icon in front of it. I exported this as an .svg file (this will look sharp at any resolution) and added it to the theme in <strong>Customize &gt; Site Identity.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/boostyourblog.com\/wp-content\/uploads\/2023\/01\/boostyourblog_logo.svg\" alt=\"\" class=\"wp-image-1073\" width=\"242\" height=\"44\"\/><\/figure>\n\n\n\n<p>This is okay for now.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>I hope this has been in any way insightful or useful.<\/p>\n\n\n\n<p>This design may not win any awards but it&#8217;s definitely a huge improvement over just a plain blog template. I won&#8217;t mind looking at this template every day.<\/p>\n\n\n\n<p>I&#8217;ll get around to making a homepage layout someday. I barely have any content yet, so I&#8217;ll wait until later when it&#8217;s clearer what the homepage will need to do exactly.<\/p>\n\n\n\n<p>For now, it&#8217;s good enough for me to start publishing. All in all, it took me about 5 hours to tweak everything to my liking and give this blog a basic identity.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I chose to build Boost Your Blog using the GeneratePress theme because it&#8217;s known for being lightweight, multi-purpose, and above all fast. Sadly, it doesn&#8217;t look that great out of the box. I spent some time sprucing it up and thought it&#8217;d be fun to show you my exact process&#8230; Why I&#8217;m using plain GeneratePress &#8230; <a title=\"Customizing The Default GeneratePress Theme (For A Much Nicer Look)\" class=\"read-more\" href=\"https:\/\/www.boostyourblog.com\/customizing-default-generatepress\/\" aria-label=\"More on Customizing The Default GeneratePress Theme (For A Much Nicer Look)\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[18],"tags":[],"uagb_featured_image_src":{"full":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default.png",2854,1328,false],"thumbnail":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-150x150.png",150,150,true],"medium":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-300x140.png",300,140,true],"medium_large":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-768x357.png",768,357,true],"large":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-1024x476.png",1024,476,true],"1536x1536":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-1536x715.png",1536,715,true],"2048x2048":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/01\/1_generatepress_default-2048x953.png",2048,953,true]},"uagb_author_info":{"display_name":"Marek","author_link":"https:\/\/www.boostyourblog.com\/author\/marek\/"},"uagb_comment_info":3,"uagb_excerpt":"I chose to build Boost Your Blog using the GeneratePress theme because it&#8217;s known for being lightweight, multi-purpose, and above all fast. Sadly, it doesn&#8217;t look that great out of the box. I spent some time sprucing it up and thought it&#8217;d be fun to show you my exact process&#8230; Why I&#8217;m using plain GeneratePress&hellip;","_links":{"self":[{"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/posts\/710"}],"collection":[{"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":220,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/posts\/710\/revisions"}],"predecessor-version":[{"id":1772,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/posts\/710\/revisions\/1772"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/media\/734"}],"wp:attachment":[{"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/media?parent=710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/categories?post=710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/tags?post=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}