A new website to try out building a WordPress template based on the popular Twitter Bootstrap CSS framework.
The final result can be seen at https://www.elthamwebdesign.com.
Information on how to set it up came from a quick From Bootstrap to WordPress course from Treehouse presented by the talented and knowledgeable Zac Gordon.
The theme created was also used for the Botanix Landscape website.
Creating your own theme from Bootstrap or any HTML template is a straight forward process but requires more time than just buying a ready made one.
The following are the notes I made while following the From Bootstrap to WordPress course from Treehouse.
index.phpwhich must reference this. Can also contain scripts etc.
header.php. Contains footer information including any scripts that can load last to improve website loading speed.
There are a number of things to consider and items to copy over from the HTML template, including:
footer.php just before
Grab the code for the form (or whatever content you want) and paste it into
Create the form using Ninja Forms, use the template function to create the code for it. Delete the submit button but keep the close button
Delete the buttons from the modal sample that are not needed.
Copy Button code from Bootstrap. Change the
data-target to which form (or modal window) eg.
div.modal fade change the ID the contact form’s id,
id="contactForm" in this example.
rewind_posts() and the second sets the images.
The sample web page is at https://getbootstrap.com/docs/3.4/examples/offcanvas/.
This project at https://github.com/wp-bootstrap/wp-bootstrap-navwalker is a plug-in that is intended to format your WordPress theme menu with the correct syntax and CSS classes to utilize the Bootstrap drop-down navigation. It does not include the required Bootstrap JS and CSS files – you will have to include them manually.