Meet Basho. If you used my theme Eisai you will find this theme similar to it. But. I worked hard to make it even better: more customizable, more versatile and even better – it’s Pro version now has a WooCommerce support. Check live demo before you start reading, it worths a thousand words.

Installation

The installation is as simple as it could be, because this theme is freely available in the WordPress.org themes directory. So enter the WordPress administration dashboard and then:

  1. Go to Appearance -> Themes then click Add New and in the search box type in Basho.
  2. Below the theme screenshot click Install button.
  3. And after installation process is done press Activate.

And if you need a child theme, you can find it here.

Customization

To open Customizer go to Appearance -> Customize in the WordPress dashboard. Basho theme has it’s unique options in three sections of this menu: Site Identity, Colors and Theme Settings.

Site Identity

This is a standard settings section for all WordPress themes, but I added Retina logo option in here like you might seen in the TwentyTwenty theme before. With this option enabled your logo will be scaled down twice of it’s original size to look sharp on high-res screens.

Colors

In the Colors section you will find options to change background and links color. Now also you will have similar options for the footer section of the website too (will show later in this post).

Theme Settings

In the Theme Settings panel you will see four different sections: Site Header Settings, Posts Page Settings, Single Post Settings and Site Footer Settings. Names of the sections are pretty self explanatory. Let’s look what do we have in here.

Site Header Settings

Here you will find three options:

  1. Width of the website header. Make it narrow, wide or full-width depending on how you like it.
  2. Make header sticky. Enable this option to make website header always on top of the screen.
  3. Display search form. By enabling this option you will have search form directly in the site header. When option is disabled only search icon will be shown and the form itself will be opened in a modal window.

Posts Page Settings

In this section you can customize your blog page. Options you have here are:

  1. Page header width. Same as with the site header, but works for the bog page header and all archives (category, tag, author archives).
  2. Show categories. You can output blog categories above the blog posts. And in the theme code there is a filter 'basho_blog_categories_args' that you can use to programmatically filter options passed to the get_categories() function used to show categories.
  3. Posts container width. Change the width of the posts container. Make it full-width, small, medium or wide depending on how many columns do you want. This is the next option.
  4. Number of columns. Here you will see five options where you can select number of columns for different screen sizes. For example you can have 1 column in the blog on smallest screens and have up to 6 columns when viewing you website on a large monitor.
  5. Post meta. Next options can enable or disable different post meta information on the blog page: you can toggle on and off post excerpt, post categories, tags, author, date and number of comments. And not only that, but you can toggle visibility of the meta data before post title and after post title, this will help you create different combinations on different websites. For some websites I need to show post date, for some don’t. For another website I want to show post categories before the title, for some after title etc. Play with the options and you will see how useful they are.

Single Post Settings

Customize single post page by enabling or disabling the visibility of the post meta before post title, after title and after the post content itself. Show or hide post excerpt on the single post page. You can also change the width of the page header and hide the post navigation if you will. Enjoy.

Site Footer Settings

For the website footer you can select a different width: it will affect the widgets area container and the site footer with copyright information too. Also here you have separate options to change footer background color, text and links color.

Summary

I’m sure you will create amazing websites with this theme. If you have any ideas and suggestions what options should be added to make this theme even better, let me know in the comments or via email. And by the way, this theme has a Pro version which ads much more options, WooCommerce support, ajax loading posts (infinite scrolling) on shop and blog page and so on, so check it out, I’m sure you’ll love it.

Join the conversation

Hi! I decided to not add a full-width page template for the post, because if you want, you always can use all the available width with the combination of blocks, look at this post for example – https://demo.webminimalism.com/basho/2020/04/03/one-more-page-to-reach-the-point-where-posts-navigation-is-visible/. Here after “Regular paragraph” goes grouped block with columns block in it. They are both full-width. I added background color to the group block just to make it clear, that this group of blocks is full width. But I understand that this approach may not be so convenient as there would be a page-template for that. Probably will add that feature in future updates.

Hi! It was 1.0.4 update. And as I can understand you are talking about your page title on your front page with posts. If so, then there was a reason to do that. I changed previous behaviour, because if you want to control your blog page title it is easier and more convenient to do the different way: in your dashboard create a page and in the site settings set it to be a page for posts, as a front page you can use a static page. That way you can change your posts page title to whatever you want and title on a blog page will change. No need to change website name every time, if you want to change just a page title.

If your goal is just to remove page title “Blog” than you can easily do this via CSS. In the dashboard go to “Appearance” -> “Customize”, there select “Additional CSS” tab and place this code:

.home.blog .archive-title {
display: none;
}

Leave a Reply

Your email address will not be published. Required fields are marked *