Creating a Theme using Raw HTML, CSS and Bootstrap

Hello Vicky,

I’ve built a couple of themes for clients starting with nothing but Bootstrap so perhaps I can be of help.

As with any theme from scratch, you’ll first want to create your base files: style.css, functions.php, and index.php. From there you’ll add templates using the Template Hierarchy as a reference. It’s strongly advisable to create separate header.php and footer/php files as well to include your boilerplate HTML along your get_header() and get_footer() functions. You may find it beneficial to break other components into their own files as well, but this really depends on you and what you’re trying to accomplish more than anything else.

Download Bootstrap and put the CSS and JS files in the theme somewhere. Use the functions.php file along with the wp_enqueue_style() and wp_enqueue_script() functions to add your Bootstrap files to the theme so that they’ll be retrieved when you callget_header() and get_footer().

Anyway, back to the Template Hierarchy, you’ll essentially just want to create templates for whatever aspects of the CMS you think you’re going to be using. Most general purpose themes have page.php, single.php, archive.php, home.php, and quite a few more but technically you don’t need any of them but index.php.

I hope this is helpful.

Hi,

Kendall: Thank you so much for your great and detailed response. <333

I would highly appreciate if you could please help me further in achieving my goal. Personally, i just know a little about WordPress but i am good at html, css and i wanna learn how i can create themes on WordPress from scratch especially converting a static website into WordPress theme. I searched and got some articles on google in which they explained converting html, css done site into WordPress theme but their way of teaching so tolls me and i get confused. each article has a different way to do it but there would be a proper way to so as you said (it’s strongly advisable to create separate header.php and footer/php files as well to include your boilerplate HTML along your get_header() and get_footer() functions) so i wanna stick with your professional criteria and i love the way you do. Can you also assist me regarding, what is boilerplate HTML?

If i explain you a little bit about my personal project would you help me achieving this step by step, (sorry to be pain)?

Yours Only,
Vicky!

This video tutorial guides you through the process of converting a finished skeleton website(another framework similar to bootstrap but much leaner) into a working wordpress theme. It should help you understand the basics even though it’s not specifically for bootstrap:

https://webdesign.tutsplus.com/tutorials/skeleton-to-wordpress-getting-up-and-running–webdesign-7943

You might also want to checkout “starter” themes like Bones, BlankSlate or Underscores to get an understanding of the underlying wordpress structure.

Best regards,

Kim

@vicky:

I completely understand your pain as I’ve been in your situation before. I’d like to say from experience that the easiest way into theme development isn’t to start trying to develop themes. Rather start with some existing themes and build child themes out of them. Also try your hand at assembling some plugins as this is also immensely beneficial. Also I’d like to note that even though I’m capable of building themes from scratch, I almost never do as it’s often far more beneficial for me and my clients to use child themes.

Ultimately themes make use of the many WordPress APIs. To be a good theme developer you don’t need to have every detail of every API memorized or anything, but you do need to know how to work through the documentation to find the functions/actions/filters that you need to fulfill your goals. The APIs are very well documented and it’s usually fairly simple to find several working examples of how to use each function.

Trying to develop a theme from scratch without some knowledge of the WordPress APIs is like jumping into the deep end of pool without knowing how to swim. Again, in your situation I would start smaller with child themes or rudimentary plugins before diving full on into theme development. Fortunately there is a wealth of knowledge on how to use the APIs to accomplish all sorts of goals. Once you understand the APIs and theme development a little better, adding a framework such as Bootstrap is just as trivial as it would be to add it to a static HTML page.

Also, to answer your question about “boilerplate code”. The term is usually used to reference blocks of code that are often repeated with little or no changes. Examples in web development typically include things like headers, footers, sidebars, and menus.

I hope this is helpful.

@kendall Weaver

Thank you so much for taking your precious time to respond my query! ??

I have got it now very well and i will try my best to do things the way you said, God Willing!

And if i will face any problem will eventually let you know, love ya!

Can give me your personal ID?

Peace!

@kimkwanka

Thank you so much for your help and suggestions!

how to use my java script in wordpress