Modify wordpress theme to include the dynamic bootstrap assets

Step 5 of Convert Bootstrap 4 Template to Wordpress Theme

This is the Step 5 of Tutorial How to Convert Bootstrap 4 Templates to WordPress Themes . In this step we will include the dynamic bootstrap template assets in our wordpress theme.

Before we start including the assets (css and js) in our wordpress theme, We first need to copy the assets files from bootstrap template folder to wordpress theme folder.

Let’s do that first

# Copy Assets from Bootstrap Template Directory to WP Theme Directory

-> Copy css folder from your static template directory to theme directory (/wp-content/themes/freelancerb2w/css)

-> Now, Copy img folder from your static template directory to theme directory (/wp-content/themes/freelancerb2w/img)

-> Copy freelancer.min.js from static template js folder to theme directory js folder.((/wp-content/themes/freelancerb2w/js)

-> Now, Copy the vendor directory from your static template folder to theme directory root folder. ((/wp-content/themes/freelancerb2w/vendor)

Theme directory copy assets folder

This is how the theme directory looks like, once we have copied all the assets.

Once we have copied all the required asset files into our themes directory, Let’s start including these in our theme.

# Include CSS

Open header.php file in your editor, which is located at the theme root folder.

Currently the head section of WordPress  theme looks like this

We will include the CSS link refs from our static bootstrap template to this head section.

We have included the CSS link ref’s and have also modified the path of CSS files to dynamic. bloginfo('stylesheet_directory') returns the path of the root theme folder, Thus the modified path becomes something like this.

 

# Include JS

Open footer.php file from the themes folder and just above the end of body element </body> , Include the JS scripts.

We have to include the bloginfo('stylesheet_directory') in the scritps path as well.

That’s all is required to move your assets from static template into WordPress theme.

Great Job Till here, See you in Step 6 : Where we Convert Static Bootstrap Nav to Dynamic WordPress Menu.

 

 

Recent Comments

  • Stewart Fernandez

    February 19, 2018 at 2:52 pm

    Hi

    One small problem I’ve had is the style.css & some other .css loads after the freelancer.css thus it makes a few things look wrong

    Is there a way to load the freelancer.css last?

    • tgugnani

      February 19, 2018 at 2:55 pm

      Remove all the “Normalize” Stuff from Underscore’s Style.css. The Normalize css is included in our bootstrap, so we don’t need those. I will add this step in the Tutorial as well. Thanks.

Leave a Reply

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

%d bloggers like this: