WordPress Bootstraps 4 Jumbotron theme

We are happy to announce the release of the free WordPress Bootstrap 4 Jumbotron, Happilyon theme. Although primarily aimed at developers with a basic understanding of web design and development as well as WordPress, the important bits of code are well commented, so anybody with a little bit of effort should be able to get this to work. Just read the info below and follow the instructions as well as the themes project page on GitHub.

Folder Structure

The theme folder structure is very simple, just three sub folders have been created within the main theme folder, a CSS folder, JS folder and an images folder. The theme uses the latest Bootstrap 4 CSS and JS files, if you choose to use, newer Bootstrap source files at the time of theme installation, just drop those newer files into the relevant folders within the theme, use the same naming conventions though. Popper.js has also been included in source files, as it is a requirement for Bootstrap 4.

In addition to the Bootstrap 4 source files, we have linked the theme to the default style.css file for custom styling as well as a theme.js file for JavaScript interactivity. The theme.js file currently has only one piece of code to hide and reveal the main navbar menu on scroll, future versions of the theme will have more user interface elements and interactivity called from within this file, you can also use this file to call your custom JavaScript or jQuery code. Remember not to change the location of the style.css file, this is placed within the main theme folder, and is a WordPress requirement. All we have done is essentially override the bootstrap.css file styling from within the default style.css file. You can follow likewise to add or remove custom website style elements by editing the style.css file.

Theme Customization

To change website branding to your own images, just drop your custom images into the images folder. The favicon image has a standard favicon size and the website navbar branding has an 30 X 30 pixel SVG image. To change the name of the branding image or image format just change the below code inside the haeder.php file, with your own image name and format.

<a class="navbar-brand" href="<?php echo esc_url( home_url() ); ?>"><img src="<?php echo esc_url( get_template_directory_uri());?>/images/happilyon.svg"width="30px" height="30px"></a>

The theme itself has the Bootstrap 4 Jumbotron home page, and the Jumbotron section can be edited from within the admin backend, the home page also has three widgets that hold custom content, these can also be customized via the admin backend. In addition, the theme also has a blog page, search page, a page with a sidebar and a full width page. The search, blog and page with a sidebar pages, all have custom sidebar widgets that can be customized from the admin backend. Now to make it all work, just follow the step by step below.


1. Install WordPress and delete all include sample content, pages, posts, images categories etc.

2. Install the theme either via WordPress or download the zip file from the GitHub or WordPress project page and upload to your site.

3. In the admin backend go to pages and create a Home, Blog, About and an Example Pages.

4. Create two subpages called Full Width Pages and Page width Sidebar. Make the Example Pages, the parent of these pages.

5. In the admin backend go to Settings > Reading > and set a static home page. Set the Homepage as Home, and Post page as Blog.

6. In the admin backend go to Appearance > Menus and create a menu for all above created pages, remember to nest the subpages under the Example Pages.

7. In the admin backend go to Posts > Categories > and add a few here like News, Reviews etc.

8. Go to Posts and add a few sample posts here, select the relevant categories for each post.

9. If all goes well, the theme should now look as intended and ready for customization.

Finally, for this theme to be really useful and less developer centric, it would require a good Bootstrap 4 shortcode plugin. So until such a plugin is available on wordpress.org or until we develop one to work with this theme, in order to get bootstrap CSS styling onto the web page via the admin backend, on pages, posts and widgets, use the text input rather than the visual input. In the text input add HTML and Bootstrap CSS class markup, to get a full reference of markup use the official getbootstrap.com site. In addition feel free to test and review the currently available shortcode solutions even from Bootstraps 3, they might work, especially the grid system shortcodes.

As this is version 1.0 of the theme, along with version updates more comprehensive documentation will follow at the WordPress developer page and GitHub project page, please comment and ask questions at these sites for any help. If you require a demo site to view, please make requests and we will consider.

Theme Project GitHub >>>

* For Bootstrap 4 theme project, with multiple developers and full documentation, use
Understrap >>>

any questions ?

All Rights Reserved,
Cookie data collection helps refine user experience, continued use implies consent, Learn how to disable