Let’s start with live demo as always. Theme has minimal design, beautiful WooCommerce-driven store and lots of options to customize it’s design.
Installation
It’s not a free theme. You can purchase it on CreativeMarket, checkout process takes a minute. The installation process is boring:
- Go to Appearance -> Themes then click Add New, then click Upload Theme.
- Press Choose file button and select theme archive from your computer. Install it.
- 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. You can find Basho Pro’s unique settings in the Theme Settings panel:
I also placed couple of options in the Site Identity and Color sections.
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. 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 like in a free Basho theme, but also an option to change text color too. Now you can completely change the look and feel of this theme to your likings.
Theme Settings
In the Theme Settings panel you will see six different sections: Global Settings, Site Header Settings, Posts Page Settings, Single Post Settings and Site Footer Settings and also WooCommerce Settings (notice, that this panel will be visible only if you have WooCommerce plugin installed and your user has capabilities to manage WooCommerce store). Names of the sections as always are self explanatory so let’s dive in.
Global Settings
Just two options in here, but they do a lot. From here you can choose desired Font Family (Google Fonts are integrated here) and Base Font Size. Why is it base font size? Because every other text on the page (headings, navigation, etc.) will adapt according to selected size keeping visual hierarchy.
Site Header Settings
Here you will find three options:
- Width of the website header. Make it narrow, wide or full-width depending on how you like it.
- Make header sticky. Enable this option to make website header always on top of the screen.
- 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:
- Page header width. Same as with the site header, but works for the bog page header and all archives (category, tag, author archives).
- Show categories. You can output blog categories above the blog posts. And in the theme code there is a filter
'basho_pro_blog_categories_args'that you can use to programmatically filter options passed to the get_categories() function used to show categories. - 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.
- 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.
- Enable parallax animation. In case if you want some unique look and feel. Just try it out.
- Enable masonry layout. Blog posts will be layout just on the demo website. Personally like this type of a layout for news websites, creative blogs (fashion, beauty, photography).
- Show grid divider. One more option to give your blog unique look and feel. Maybe you will find it useful.
- Columns gap. Add more negative space between the posts or completely remove margins.
- Blog pagination. Besides the standard one, you can show Load More Button to load new posts or enable Infinite Scrolling.
- 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 have two options to change the width of the widgets area container and of the site footer with copyright information too.
Also here you have options to change footer background color, text and links color.
If you will don’t have widgets in the Site Footer widgets area, then it will be hidden of course. Also you can completely hide the footer with copyright data, you have an option for that. Or you can replace the text in the left and right sections of the site footer. Theme is completely white-labeled, you can remove links to developer (not recommended :D) or WordPress.
WooCommerce Settings
Here you will find similar to posts page panel options: you can change the shop header width to make it look similar to your blog for example.
Also you have options to show product categories above the products on archive pages.
Shop pagination. Same as on posts page: select Classic, Load More Button or Infinite Scrolling.
Shop width. Self-explanatory, same as on posts page.
Columns. You have four options to select number of columns on shop page. Note! You have four options instead of five as in the blog because number of columns on large screens is set by the standard WooCommerce option, which can be found in the Customizer by navigating to WooCommerce -> Product Catalog, here you’ll find the Products Per Row option.
Summary
If you like what you see, then purchase Basho Pro theme here. 🙂
Enjoy and give me your feedback. As always, 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.
