How to Convert html to Wordpress Theme Step by Step

Step by step how to convert html to Wordpress theme

This tutorial will give you the basics on how to convert a static HTML website to a WordPress theme. These are the special features of the tutorial: I'm converting my static HTML website template to a WordPress theme. Convert HTML to WordPress: Beginners' guide A newcomer to the WordPress universe? Explains the conversion of an HTML page into a WordPress theme from beginning to end and helps you launch your WordPress development careers. In this guide, we're talking about hands-on experience - we take a ready-made HTML sample and end up with a fully functional WordPress website.

WordPress is so beloved why? It' s a easy question, it's so easy to use! Do you know that Beyonce's offical site is WordPress? What is great about WordPress is that it is really versatile. When you go beyond purchasing premiums, you can have a great time there.

Read this to learn more about the differences between Branded and Personalized designs. However, this guide is for this "fun Custom Stuff", so let's get it started! It is important to remember before we begin that HTML, JavaScript and JavaScript skills are required. Essential comprehension is enough to get through this guide, but the WordPress franchise is highly fiercely contested, so you'd better be very good at it in the foreseeable future. What is more, the WordPress franchise is a great place to be.

This guide alone will give you enough insights to build your own WordPress topics. However, if you are going to become a true WordPress specialist, PHP is something you should masters. WordPress. The WordPress application works with PHP, a server-side scripts engine that requires a dedicated execution engine.

Here you make a directory for your projects, give it a name and move all your WordPress file to it. It' now your turn to build a data base. Ok, now we only need one PHPMyAdmin data base for our work. Simply click Datenbanken > Datenbank erstellen. Name it and click the Make Buttons.

Locate the DEBUG box and specify it TRUE. Store your files as wp-config. php in the same folder. First of all, we link our data base to our WordPress instances. Next, select your preferred languages, e-mail, login information and passwords to access the Dashboard and make sure the last box where you want your site to appear in Google Earth is not checked.

There is a WordPress page from the toolbar. However, you have a state-of-the-art widget and can select from a variety of topics, plug-ins and widgets. What's more, you can also use your own personal widget. However, we didn't come here to create WordPress pages with already existent topics, did we? Rather than go the way of sloth, we will create our own issues.

Go to wp-content then themes in your projects directory and make a directory with the name of your design. Now, before we do anything else, we have to make up our minds whether or not to use a start topic. Usually a Start Topic is the point of departure for creating a user-defined design, it already has a required data tree and some ready-to-use functions.

This serves as a basis for your topic. When it comes to foundations, FoundationPress is one of the most beloved front-end topics built on the widespread front-end frame Stiftung. Here is a good piece about why you should use a Start Topic and some good ideas for which you should use it.

In order to be operational, a WordPress theme must have styles. content and index. phone styles. content and index. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. phone styles. Usually you make a design from a PSD document, but to make it simpler for us, we take a pre-made HTML sample and make it a WordPress design.

Drag all your theme folders and drop them. Homepage (index. html), blog and contact. Re-name them so that they have at the end instead of.html. xml filename and fill in the theme name, your name and the subject of your theme there in a form like below. Okay, so we have index. php og styles. already existing content which means that we already have a WordPress theme from a technical point of view.

Go to the Dispatch tab and go to Appearance - Topics. You should see your design in the available designs page. Enable the topic. First thing you will see is that your style sheets are not loaded correctly and we have a page in plain HTML. This is because our standard directory location for the standard style sheet filename (app. css) is now wrong.

When you look at the code: rel= "stylesheet" type="text/css" href="css/app. bss "> it tries to download the application bss from your-site/css/app. bss as this was the initial pathname in our HTML style sheet. On of the most important things you need to keep in mind is that any files you try to download should be executed dynamically, and this is where PHP comes in.

Make a new filename in the directory of your design - functions.php. Within this filename we will be defining features that contribute to our theme adding features. The first thing we do is to get our own css file registered (and the ys while we' re at it). wp_enqueue_style('main-style', get_template_directory_uri() . Within a grep day we build a new vl_styles () command (vl for a whitelabel - although it can be arbitrarily named) and within it we declared a wordpress command line variable. vp_enqueue_style has a lot of parameter.

The ' /css/app. css' get_template_directory_uri() is another feature (yes, we have a feature within a feature that is within another feature), it will get the correct pathname for our topic folder as a character string. for example,'/css/app. css' will get_template_directory_uri() is another feature (yes, we have a feature within a feature that is within another feature), it will get the correct pathname for our topic folder as a character string. The ' /css/app. css' is our pathname in our topic folder and it is also a character chain. The same applies to the media-query. content files, which are in charge of reactivity.

Then, we append actions to associate our feature with wp_enqueue_scripts hook. Campaign and hooking are important factors in what makes WordPress so great, but we will be talking about it in upcoming issues. We' ll be adding our only script in the same way, but using the feature wp_enqueue_script instead. wp_enqueue_script('main-js', get_template_directory_uri() .

First, it is a feature and the latter is a catch. From now on, your features. php files should look like this: wp_enqueue_style('main-style', get_template_directory_uri() . Now go back to the index. pH-P-File and add this feature before you close the -Tag: wp_head is one of the features that are indispensable for any topic you have created.

The headers and footers look exactly the same on all pages of the website we are creating. As copying the entire headers and footers to all our pages will sound like a total wastage of our times, we will move both parts into two seperate files: headers. Php and footer.php.

Return to our index. plp and move the entire HTML from top to bottom in the final tags to our new added headers. phi files. Also move the entire mark-up, beginning with opening the tags to the end of the bottom line. pdf files. {\a6}(php wp_footer(); {a6}function.

The wp_footer hooked feature triggers the mandatory hoot for your design. Nothing should be fixed in a WordPress theme. We' ll have to modify it like this: title>php wp_title('|', true, 'right') > < < <?? php bloginfo('name') ? ></title> < < < < < < < < < < < < < < < < < < < < < < < < << < < > < < < < < < < < < < <wp_title feature will show the White Label Agency website name. bloginfo('name') will give us the name of a particular page (blog, contact, etc.).

Also, since the headline is in our headers. pdf files, it will work for every page. It'?s goin? back to our Dashboard. NOTE: It' simpler when you want to insert pages that appear in the menu: Look - Customize - Menus - Append menus - Append elements - Append elements - On the Pages page tabs, type the name of the page in the Append new page box - click Append.

The next step is to use our models on the pages. We now have liaison. phone and blogs. phone templating phone and we need to copy and paste the entire contents of the index. phone directory and directory there. We' ll keep index.php as it is right now and come back to it later.

In order to make our pages appear as models in the Dashboard, we need to insert a small bit of coding at home. Phil as shown in the screenshots below. Once you have added this line, review your pages in the dashboard and you will see an optional application to this page.

In order to achieve this we go to Dashboard - Settings - Reading and for a title page we choose a statical page and put it on front. So, we've got our pages up and running, but our menus still don't work. Fortunately, creating a WordPress menus is child's play.

First we have to record our menue in the feature. pdf files. As with most things in WordPress, there is a feature for this - register_nav_menu( $location, $description). One is an ID and the other is the name of the menus in the dashboard. So.... append this line register_nav_menu('main','Main Menu'); to your functions. file directory name.

Back to the dashboard and we can see the "Menus" item in the "Appearance" section. Get there and customize the menus. Go to headers. Php files and find the menus there. Continue by adding:'theme_location'=>'main','menu_class'=>'top_menu_list', ) ; where'theme_location' is the name of our id from register_nav_menu( 'main', 'Main Menu').

Containers " determines if you have to pack your menus in tags (we don't). It is now possible to create, delete or modify new pages in the menus via the menu via the Dashboard. WordPress is designed to make all contents accessible via the theshboard. Therefore there are user-defined boxes and therefore Advanced Custom Boxes should be the first plug-in you should instal for your website.

Navigate to Plugins - Create New Addins and begin entering Advanced Customizing Areas. They have to ask themselves which contents should be able to be edited. For the time being, we jump over our head area and switch to the second section with "Your Design. We have two items that we can turn into user-defined fields: the tagline and the image below.

When you return to the dashboard, there is a Custom Panels radio button. Select Create new group. It is up to you how you want to organize your work. Now, in our case, we can use our Page is Front or Page is Front boxes, because our front box is only used for that particular page (home page), so both work for us.

If you want, we can set the rule so that the box group works for all pages, all contributions, a particular contribution or a particular class, and so on. And you can make your own set of things. In this example, we will create a group for all user-defined boxes on the home page. Let's now insert a user-defined box for a tagline.

As you can see, some words are printed in fat, so it is better to use Wysywig as the box style so that the end users have an available text processor to bypass the formating. is a picture. When we return to our homepage in the timetable, we can see that at the end of a page there are these two boxes that we have added.

Put some contents in it. In order to view the contents of our user-defined boxes on the page, we need to re-enter our coding and make a few changes. where " Sloan" is your alias. Any user-defined text types boxes are created exactly as described above. It' not allowed to add PHP stuff to the outside of a CSS but there is a way to bypass it.

Let's take backgrounds containing the following styles of CSS: background: url(../image/all. png) no-repeat; background-size: contain; -webkit-background-size: contain; and append them as offline html-codes. Best way to view a user-defined picture box is to give it back as an arrays. They are all modifiable via the Dashboard, so we need to have them all.

So, an array-type is a way. The following is a list of the parameters of our field: ? pp $image = get_field('slogan_-_image'); ? > diver class="text-center png-images" style="background: background: url(<? pp eccho $image['url']; ? >) no repetition; Hintergrund size: contain; -webkit-background-size: contain;">>/div> We display the parameter'url' of our box again. Previously, we added user-defined boxes that only worked on a specific theme.

However, sometimes you need to make user-defined boxes that are global in scope (e.g. for all pages, template or posts). You will recall that our headers and footers are the same for all pages of our website. So, we will make an options page on the Dashboard and save all user-defined field for it there.

So, if you have an ACF Pro enabled, just append this line of source to your feature. php under everything you had before: acf_add_options_page(); after you save, you can return to the wp dashboard and see it in the option tree. Now we have a storage place for our user-defined arrays and can begin to create them.

Navigate to User-defined Field and add a new field group head. In order to use our headers we need to insert 4 items in user-defined fields: your company name, your headline and two hyperlinks (start a job and see our services). Already you should know how to setup user-defined boxes for a logotype (img) and a headline (wyzwig).

But the only different is that you must give'option' as a value to call _field to show the contents of the user-defined box on the Options page. For the two hyperlinks, it's a little different because we want the site administrator to have an choice of whether to include one hyperlink, two (like now), three or more.

Repeaters allow you to insert as many data sets of the same kind as you need. So, let's go back to our Custom Boxes and Headers menus and make a new box - Header Links. Select repeaters as your box and you will see a new box - sub boxes.

Subfields work the same way as normal ones. Our hypertext hyperlinks require that we include a separate subfield for a text of the hyperlink and one for the hyperlink itself. Note the page linking style for a customized linking - refer to the page linking style for a customized linking - refer to the page linking URL. The Page Left option works as a drop-down list that lists all pages on the site, so the visitor can simply modify left pages using the dashboard.

We now have the User Defined Left box on the Options page with the ability to create new lines. The display of a repeat array is somewhat more complicated, but nothing to be anxious about. Click the header. open your phone book. and find the source of our link. Now you can insert any number of hyperlinks from the dashboard.

We' re showing inside repeat field. We have successfully completed the change from a stationary HTML page to a WordPress theme. Follow me for part two where we'll convert blog and contact page to WordPress and discuss the loop, custom post types, forms, and how to attach a card.

Auch interessant

Mehr zum Thema