Home
Eltham Web Design

Eltham Web Design

20th September 2019 My Blog, WordPress

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

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.

Anatomy of a WordPress Theme

style.css
Declares the theme name etc. It’s also the main store of the theme’s CSS, or it contains the overriding CSS if using Bootstrap.
index.php
The default display page if nothing else exists.
header.php
Top section of index.php which must reference this. Can also contain scripts etc.
footer.php
As for header.php. Contains footer information including any scripts that can load last to improve website loading speed.
page.php
The default page for displaying a single page.
functions.php
Sets up the theme and contains custom functions.
home.php
The default page used if setting Admin/Settings/Reading is set to Static Post and posts page is set to a dummy page. This dummy page can appear in the menu but its content is NOT displayed, but the posts are.
Other Pages
These can be created as required. Include the comments Template name: and the name will appear on the page editing screen under “Page Attributes”.
screenshot.png
A screenshot of your theme. Should be 880x660px in size.
single.php
Single page or post display.

More information:

https://developer.wordpress.org/themes/basics/template-hierarchy/

The WordPress template hierarchy in one diagram. From http://wpninjas.com/wp-content/uploads/2016/11/template-hierarchy.png

Converting an HTML Template

There are a number of things to consider and items to copy over from the HTML template, including:

  • Scripts (done with the enqueue function in the functions.php file.
  • Conditional scripts (ie, for IE9 only)
  • CSS
  • Decide which parts should be editable by the client and replace these with widgets.
  • Decide how single and multiple posts will be displayed.

Modal Screen

Copy the code from https://getbootstrap.com/docs/3.4/javascript/#modals and paste into footer.php just before wp_footer().

Grab the code for the form (or whatever content you want) and paste it into div.modal-body.

Ninja Form

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.

Contact Us Button

Copy Button code from Bootstrap. Change the data-target to which form (or modal window) eg. #contactform.

In div.modal fade change the ID the contact form’s id, id="contactForm" in this example.

Bootstrap Slide Show Carousel

Grab the code from Bootstrap at https://getbootstrap.com/docs/3.4/javascript/#carousel. Two loops are needed, one sets the posts rewind_posts() and the second sets the images.

There is also a plugin Advanced Bootstrap Carousel which makes the job easier, but it needs Bootstrap and the JavaScript installed to work. The slides need to be created manually.

Off Canvas

The sample web page is at https://getbootstrap.com/docs/3.4/examples/offcanvas/.

  • Copy offcanvas.css to style.css
  • Modify the main WordPress page (eg. page.php) and merge the code from the off canvas page.
  • Modify sidebar.php with off canvas code.
  • Copy any JavaScript that’s used in the sample to the main WordPress page.

WordPress Bootstrap Walker Class

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.

Related Posts

Leave a Reply