Using a static HTML theme in Wordpress without any programming
July 15, 2013 theming Web development Wordpress
Currently, I’m working on a theme/plugin for Wordpress which allows you to take a (static) HTML theme and use it in your Wordpress site, without needing any knowledge on how to program in PHP or create a Wordpress theme. The theme/plugin is called Coalescence.
A HTML theme is a theme which consists of static but styled pages. You can find HTML themes at sites such as http://wrapbootstrap.com/. These HTML themes are fairly cheap, sometimes just a few dollars. Unfortunately, you cannot use them directly in Wordpress. A HTML theme needs to be converted to a Wordpress theme, before it can be used in a Wordpress site.
The theme/plugin I’m creating allows you to take this HTML theme and use it directly in your Wordpress site. A HTML theme can be converted with a few simple rules where you tell what parts of the HTML theme to replace by the content from your Wordpress site. All this is done with a simple point-and-click interface, no programming experience is required what so ever. Or perhaps you don’t want a specific part of the HTML theme. Parts can be dropped from the HTML theme, again, with a simple point-and-click interface. More functionality is available, but is omitted for this short introduction.
How does it work? The following scenario describes how the menu from the HTML theme Notable Flower (http://www.freecsstemplates.org/preview/notableflower/) is replaced by the menu from a Wordpress site.
When the configuration panel of Coalescence is opened, you see two large panes. See the screenshot below. The left pane shows the Wordpress site in a very crude manner. All the elements are there, such as site title, menu, and the current article, but are hardly styled. The right pane shows the HTML theme. Below both panes there are two ‘selector’-boxes. These show a selector-expression of which element you are hovering over now and which element you have clicked on. The screenshot shows that in the left pane the menu is selected (which has a yellow border.) In the right pane, the menu is selected as well (which has a yellow border as well.)
Now that both menus are selected, we click the ‘Replace’-button. This replaces the currently selected element in the HTML theme (the menu) by the currently selected element in the Wordpress site (the menu.)
If we look at the site now, we see the menu has been replaced. See the screenshot below.
Just a few clicks were needed to set this up, no programming! Hope you are interested!