Html Template to Wordpress Theme

Template Html for the Wordpress topic

The tutorial series takes you step-by-step through the process of converting a bootstrap HTML template to a WordPress theme. To convert the HTML Web site to the WordPress theme. For this tutorial we use the freelancer Bootstrap HTML template of StartBootstrap. There are two ways to convert your HTML template in the WordPress theme.

Conversion from HTML to WordPress (simple tutorial)

WordPress was not a quick step from web pages created with HTML. Beyond that, we no longer have to type markups ourselves, but can let our CMS do the work. This does not mean, however, that HTML web pages no longer exists. However, WordPress's increasing popularity shows that more and more users are moving to the WordPress application.

Some of them will switch from HTML to WordPress. In the following I will show you different ways how you can change from HTML to WordPress. In order to switch from HTML to WordPress, you must turn your HTML theme into a WordPress theme. One theme manages the look and feel of a WordPress website, while the CMS itself provides the functionalities as well as extra plug-ins.

When you go this way, take your available source and use it as a point of departure for creating WordPress theme file. It can be done with a little HTML, a little bit of PHP skills and a little help from your own team. Disadvantage: While you end up with a working WordPress theme, it will not have all the features WordPress has to provide.

If you do not install it later, your website is without widgets or the possibility to modify your menus via the WordPress baking end. As your website does its work, you cannot fully use WordPress to administer it. Rather than using your current website as a starting point, use a prebuilt WordPress design instead.

This way you can take full advantages of WordPress while maintaining the look and feel of your old website. Also, you no longer need to use WordPress functions. Instead, you can base it on an established theme - something for which the WordPress platforms are made. All you need to do is create a website, reinstall the design, and upload your HTML contents.

They also have the opportunity not to bother at all with switching from HTML to WordPress. Although you may already have one, it is important that you make sure that the servers you have are WordPress compatible. Demands on the CMS and a statical HTML website are different. Apart from that, it makes sense to install WordPress locally.

Usually this is quicker, more personal, makes you less dependent on an ISP and the change from HTML to WordPress more convenient. Naturally, you need to know how to use WordPress and how to add a sublime text or Atom to your WordPress. When your objective is to get started from the ground up and build your own WordPress theme that looks similar to your current HTML website, launch from here.

First thing you need to do is creating a new topic file. Call it whatever you want your topic to be invoked. Then go to the source text box and generate a series of text file. It' now up to you to get the WordPress Stylesheet (the file styles. bss you just created) ready to copy the old website to your old one.

Open the document and add the following: WordPress 2013 theme leads us back to the blogs, with a variety of postal styles, each presented in its own way. WordPress 2013 theme leads us back to the blogs, with a variety of postal styles, each presented in its own way.

WordPress 2013 theme leads us back to the blogs, with a variety of postal styles, each presented in its own way. That is the so-called stylesheet headers (Important: Do not omit the comment/*...*/ tag out!). Topic Name - Here comes the name of your theme. This can be anything you want, but it is usually the same as the name of your topic file.

Topic URI - You would normally publish the topic's home page here, but you can use your own website adress. Descriptions - An option to describe your topic. It is displayed in the WordPress frontend. Variant - The variant of your design. License, License URI, Tags - These things are only important if you plan to add your design to the WordPress theme list.

Copy and past the headers to the available HTML website and insert the available HTML-Code. Store the filename in your new topic directory and exit. In the next part, you must realize that WordPress usually uses PHP to retrieve information from its databases. Therefore, you need to split your HTML into different parts so that the CMS can put them together correctly.

This may sound complex, but it just means that you copy and paste parts of your HTML documents into multiple PHPs. You can see that this is a default HTML template that contains a headline, a contents area, a side bar, and a bottom line. First open your actual index. html (the primary HTML page file).

Then go through your new WordPress documents and copy the following into them (the following are my markups): From the beginning of your HTML page to the body of your HTML page (usually labeled or ) everything goes into this area. That is decisive for the proper functioning of many WordPress plug-ins.

Anything that belongs to the section goes into this WordPress document. Well, everything that remains from the end of the sidebar to the end of the filename should be the bottom line information that is here. Then you are done with index. html and can finish it. Store all other filenames in your topic directory and quit them except headers. Php and index.php.

The only thing that remains for the headers is to modify the call of the stylesheet from HTML to WordPress. Search for an available hyperlink in the section. This is the part of WordPress in which the CMS displays the contents generated in the background. It' critical if you want WordPress to add dynamic contents to your pages that you will be importing later.

Saving the index. directory and closing it. It'?s your theme that's finished. You can now attach it to your new WordPress page. Now, insert a thematic screenshots which, together with the information from your stylesheet headers, serves as a previewer of your website in the WordPress beacon.

Open your website in a web brower and take a screenshots with your favorite methods. Store it as a screenshots. Click and drag and drop it to your topic folders. You' re up for your design now. There are several ways to bring the new design to your WordPress page.

Precondition is, however, that all data is located in your topic directory. First of all, you can make a zipped archive from it. Then go to your WordPress page and then to Appearance > Themes. Click here above on New and then click Upload Topic. On the following screen, use the icon to navigate to the destination of your zipped archive.

Select it and click Open, then click Install Now. Once it's done, enable the design. You can then load your (unpacked) topic file there. Afterwards, select the topic in the same place as before. The only thing you need to do to finish switching from HTML to WordPress is to bring in your current work. In the following, we will explain this in more detail when it comes to using an already established WordPress theme.

However, note that the fundamental theme now works, but there are more things you can do to better incorporate your HTML into WordPress. Maybe you also need to include some CSS mark-up because the contents are not part of your initial theme like pictures. Allows you to take full benefit of hundreds of existing WordPress topics while maintaining your initial theme.

This is done by using a so-called children-theme. They are based on a different theme (the superior theme) that does not just exist on its own, but simply adapts the superior theme to your needs. Your first choice is to choose a proper theme on which to build your style. To do this, it will help to find a theme that comes closest to your current one ( so you don't have to make too many changes) or to use a theme creation tool or theme, both of which serve as the basis for user-defined designs.

Have a look at the WordPress Topics Guide, our fantastic free topics page or have a look at our Premier Topics page to find a good fit. Following some research, I figured the Twenty Twelve theme would be a good place to start moving from HTML to WordPress. As soon as you have made your decision, just download and upload the design to your WordPress website as you are used to with any other design.

You don't have to enable it. Most of the remainder happens in the children theme. Similar to the previous way, you must make a topic file for the sub topic. If you are in the process of setting up a sub -topic, it is usual to call the sub -topic with the same name as the sub -topic plus sign. So since my children subject is twenty-twelve, I call it the twenty-twelve-child list.

You also need a stylesheet for the children theme. It works almost the same as the stylesheet above. First, make the customary styles. Put them in the theme file and add them to the album. You can see that it resembles the stylesheet headers you used before, with one exception: it contains the template tags.

This section should contain the name of the topic that acts as the primary topic. Children will not work without them. In order to prevent this, enter the name of the higher-level directory. Well, for twenty-twelve, that would be the bill: twelve. Only with the stylesheet and the directory it is already possible to enable the subordinate design.

This would not do much good, however, since your website would look like an HTML page without style at the moment. It is an important part of any WordPress install and allows you to make extensive changes to your website. To do this, just make a new filename and name it functions.php.

In theory, the opening PHP tags make the files available, but they don't do anything yet.

styles. css') ; wp_enqueue_style('child-style', get_stylesheet_directory_uri() .

Makes it possible to change the theme about your child's theme (more on this later).

Here, the subordinate theme is prepared to be enabled. Apart from that you can either compress it and upload it to WordPress via Appearance > Topics > Append New > Upload Theme or by just pasting the directory like wp-content/themes. Either way, when you enable the design, your site should now look exactly like its predecessor.

Now is the right moment to modify the theme of your current theme so that it looks like your initial HTML page. One of the first things that stand out, for example, is that my WordPress theme inserts place above the headline and below the bottom line that my HTML page doesn't have. In order to fix this, I can look at the HTML page with my web browsing development tool to find the appropriate mark-up.

If I do that, I meet the following: [...] margin: 0; margin: 0;[...] margin: 0;[...] margin: 0; Then I do the same with my new WordPress theme where I find these styles: [...] margin-top: 48px;[...] margin-top: 3. 428571429rem; My goal now is to use HTML page to WordPress theme style.

If this is the case, I can easily do this by appending the following to the theme of my sub theme. css: Margin: 0 Car; Margin: 0 Car; Margin: 0 Car; Margin: 0 Car; Margin: 0 Car; Margin: 0 Car; After the WordPress theme has been saved, it applies the new WordPress theme to it: This is because anything you attach to the stylesheet of the sub theme overwrites the styles in its higher-level element.

Plus, if you use an HTML5 template as a launcher and a cutting-edge WordPress theme as a parentage, much of the fundamental mark-up will match, making your lifestyle much simpler. There is much more you can do with sub-topics that you can study here. As soon as you've finished customizing the theme, it's your turn to bring in your work.

Eventually, on the conversion schedule from HTML to WordPress is with an established theme as it is and easily migration of your HTML page to it. The easiest way - all you have to do is choose the theme of your interest to get it installed and activated (I suppose you know how to do that by now) and then do the following.

Therefore, be sure to save your WordPress page before proceeding. First thing you need to do is download and run the HTML Import 2 plug-in. If you find it in the dropdown menu (it could be below), click Get Now. When it' ready, start it up.

In order to be able to import multiple pages at the same time, you must have them uploaded to the same FTP client as your WordPress install. It will suggest something like HTML file for imports as folders name, but you can select what you want. You can also individually customize the pages as you will see below.

Both methods go to WordPress and Settings > HTML Imports. Folder to be imported - Type the location to which you just copy your current data. Standard filename - The standard filename for folders on the old site, usually index.html. Filename Enhancements to Integrate - The enhancements of the filenames you want to integrate.

Excluded Folders - If you have folders on the old site that you don't want to export, type them here. Keep filenames - To use the plug-in with your filenames as the new filename for your site, select this option. If your tracks are very long, this makes good business as the importers usually use them to make the slot.

In Contents, you must set up the HTML tags that contain your page contents. Select the HTML tags at the top. If your contents are included in a day named , for example, the information you enter is divided, id, andma. All the other options on this page should be self-explanatory and allow you to easily add pictures, document, internal link and more.

That part is similar to the previous part. At the beginning you have to tell the plug-in how tracks are highlighted in your HTML template so that it can get them to the right place. You can also extract duplicate things such as the page header, which is often shown by WordPress topics by default. What is more, you can also add a new page header to your WordPress theme.

You can also ask the importing company to remove your tracks if they are inside the contents so that they are not duplicated. It is important that you choose whether you want to use your old contents as articles or pages. Everything else is more self-explanatory and allows you to set up WordPress preferences for new pages.

Next, select whether you want to create a folder of directories or an individual folder (you need to search for it), and then click Send.

As soon as you are finished, you should have all your WordPress page contents and be reformatted with the new design. Or if you have gone one of the other ways, your website should look exactly like your former HTML website. So if you are planning to use the WordPress site in the same place as the HTML site, there are a few more things to do before you get done.

This way you do not loose the current value of your AEO. Once you have entered the old page number in the HTML plug-in, it creates the re-direct for you. They can be copied and pasted into the files. This is the access point located on your computer system (usually in the home directory).

Have you successfully switched from HTML to WordPress? You' ve just learnt how to translate a page from HTML to WordPress. You have already got an idea of how WordPress works, it depends on which option you chose above. It is now very simple to go with the WordPress plattform and immerse yourself more deeply in website creation.

Otherwise I wish you good fortune with your new designed WordPress website. Hopefully you will have as much fun working with WordPress as I do. Have you moved your website from HTML to WordPress?

Auch interessant

Mehr zum Thema