Create wordpress theme from html template

Using a while clause in PHP creates a loop that keeps doing something as long as the condition you specified is true. You can read more about the loop here, and see more complicated examples of what is possible to do with it. When you make a child theme, you only need style. When you make a completely new theme, in theory you just need one more file, indexx. This is the default fallback page for all possible pages a person might visit on your WordPress site.

If there are no page. Most themes however, make ample use of many templates within in the WordPress template hieararchy. This is where you will pull in necessary outside scripts, and register functionality that exists in your WordPress theme. For example, if you want to work with the WordPress Customizer, you need to do that from within the functions.

WordPress templates like most modern websites rely heavily on CSS to control the and result of their look. And in this file is where the CSS in your theme will be.

Even if you prefer to use SASS, you will still need to compile it into a regular style. Rather than building each different page template from scratch, WordPress themes typically work with different building block templates, that you piece together and then build on top of.

The bare minimum of these is the header. The thinking behind this is that these parts require fairly substantial bits of code, and are likely to be included in almost every page template. You also get very cleanly separated code, so that it is easier to edit down the road.

If you want to call in the sidebar. You can also create multiple sidebar, header or footer templates with different names. Calling this file would look like this:. At this point you can close the head tag, the title and everything else will get generated for each page by WordPress. So if you have different styles for certain types of pages, you can create page templates later, and then target those via their name in the body type.

For example, if you have a full-width page template, instead of the selector being. This calls the custom logo selected with the logo function if the logo function has been enabled in the theme functions. This will show the title the same on every page, if you want to style the title differently on the homepage, and other pages, you can use this code:.

If your menu is above your header or logo in your template, obviously code it first in the WordPress theme also. Then call the WordPress menu. Actually styling the menu, and making sure it looks like it does in your template is something we can tackle later in the stylesheet. You can put whatever you want here. This line will hook a widget area called footer, so if you want to call it something else you need to put that name in there. You can also add copyright information here, and anything else you might want to include in a footer.

If you have added a widget area to your main index. In the main sidebar. Start an aside section for the sidebar, prompt WordPress if the sidebar is active, and then call on the dynamic sidebar function. All in all it should look like this:. If you have added a widget area to the footer, you need to repeat this process but save the file as sidebar-footer.

Every theme has its different flow and styles. So it means if I keep using child themes, I have to learn documentation of every themes that I would use. Here I am trying to explain that dilemma systematically:. I know that i can continue my child theme development with older parent theme version but the only problem is what if a major bug found on my parent theme? The enlightenment said that I have to create my own WordPress theme, which based on those HTML template but not as a child theme, but as a parent theme.

This series will be divided into 3 or 4 posts or more, depends on my mood. I hope this series can give you a rock-solid foundation to create an amazing WordPress theme. You are commenting using your WordPress. You are commenting using your Google account.

You are commenting using your Twitter account. You are commenting using your Facebook account. Notify me of new comments via email.