How to convert html & CSS theme to wordpress theme?

Hi guys , I'm making a site with html and css and jquery , I want convert that template to wordpress template , but I have some questions :

1. my template is static , if I convert that to wordpress them , how can I make that dynamic ?( I know , I should do that with wordpress php functions , but how ? )
   
   
2. You can see in my site demo ( I write my site link in codepen below ) , I want make a new posts section in my site , and do dynamic that , I want my site have 10 post per page , what should i do ? I must make a 10 post with html and css ? or one is enough ?
   
   
3. My posts should be fill ? i mean , i write a mega menu with html and css and jquery , I have new posts item in mega menu ( i call that پست های جدید ) , so that is a mom mega menu item , mean if you click that , a mega menu open . however , that mega menu item is new posts i write , if you see my codes , I write 5 img and p tags for that and I get a style to all of them , my work is true ? or i can do that just with a one img and p tags , then convert to wordpress and say to wordpress to make 5 of that . and my question about that , I must write p tags and fill that ? mean I must write something like this ?
   
   <img src="google.image.com.something" class="img-mega-menu">
   <p class="p-mega-menu">the new post</p>

or I can write that like this ?

<img src="#" class="img-mega-menu">
<p class="p-mega-menu"></p>

• . oh , and i have posts in my body ( i will write that ) in post you can see title , description , the writer name , comments numbers , i should make a design for that , and I should make a design for then I click to post to see complete posts , how can I do this ? and how can I markup that for wordpress?

this is my site still : http://codepen.io/Farzdev/details/pbQvPa/

 

You would do this via Wordpress loop (mostly). It's WAY too much to explain in a post here, I suggest you download the theme code for some of the standard themes on Wordpress (the ones that comes with the install) and try to figure out what the different files does, and the functions within them.

The above was the answer to your question 1.
For 2., I would suggest you read up on the Wordpress loop. You create one page, with the loop running, and limit it to 10 posts. You just create the wrappers and structure, and the Wordpress loop fills that in with posts pulled from the database.
For 3. You'll want to look into the menu-handling in Wordpress. A bit complicated, but it can pull posts and put it in the menu easily - however, you'll want to limit that as well, since if you don't, it's gonna be filled with all the posts you post. Depending on how much you post, that can quickly be too much.

 

http://www.wordpressdergisi.com/temalar/wordpress-ozel-tema-yapimi/

Turkish but you may translate my tutorial.

 

I know that this reply might be late but I wonder why you don't have an English version on your website for the tutorial that you suggest that OP should read. As you are able to communicate here in English, I don't doubt that you can make a good tutorial on English. This can also boost your traffic as your content is not limited to a specific geographical area. Regarding the suggestion to use a translation tool to understand your tutorial, I think that it's a bad suggestion. Especially when it comes to technical descriptions. Translating tools are unreliable with the plenty translation error they spit out.

 

There are actually some online tools that convert a static HTML site to a WordPress theme. The trick is to use the correct CSS classes and ID's, but I used one (forget which now) and it worked, more or less. It's not 100%, but it does set you up with the basics.

 

The best way you search free theme similar to your design and then update through theme files css etc. You can found 1000+ free theme on google... My site will be live for free themes next month with name websites-templates.com

 

Regarding your free themes website. Will people be able to upload themes? Will your website be independent or will it be like a search engine for other sites that have themes?

 

Are you asking for a custom made theme that is to look almost exactly like you current theme. This would be a lot of work and could take about two weeks to build. The other issue is creating all the content to be placed in the same, or similar places on the page. You always have to sacrifice some push for pull when you do this. Custom themes are always good but if you can find a free theme that is "close" to what you have then you are saving money. IMHO Html sites rank better than WP sites.

 

This is not how we use/create a theme. Many use page builders like Divi

 

I think it is better to spend some time learning Bootstrap, WordPress and PHP/MySQL thoroughly. Then you can easily implement it on your static html to WordPress project.

 

Hello,
Hope you are doing well.
If you you HTML then it will become easy to convert HTML to Static WordPress Theme.
You need to install WordPress
After installing WordPress, you need to navigate to Theme Folder
You can create a new theme for integration or used the existing theme
Below is the list of files you need to focus on:
-style.css - Main Style Of Theme
-index.php
-header.php - Header Section HTML
-sidebar.php - Sidebar Section HTML if there in HTML Theme
-footer.php - Footer Section HTML

COPY your HTML THEME CSS to the style.css
WordPress uses the header comment section of a style.css to display information about the theme in the Appearance (Themes) dashboard panel.
So you need to add header comment in style.css like this : https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

You must be good at distingushing Header, Sidebar and Footer from the HTML site
-COPY your HTML Header Section to the header.php
-COPY your HTML Footer Section to the footer.php
-COPY your HTML Sidebar Section to the sidebar.php

check that the link in header.php, footer.php and sidebar.php (css and js) point to the proper location so that it must load when wordpress site is loaded
Save all files for now.
So till now, header, footer, sidebar and style are ready.

open index.php
Type in get_header() which will call header.php
Type in get_footer() which will call footer.php
Type in get_sidebar() which will call sidebar.php

So the basic look of index.php will be like

<?php
get_header();
PUT HERE HTML BODY FROM YOUR HTML THEME
get_sidebar();
get_footer();
?>

Finally, save and close your close all your files.
Your new themes will appear in WP Admin > Appearance > Themes. Just activate it. At the end, release your new WordPress site with new design.

You HTML to WordPress Version is Ready but still you need many more dynamicfunction to use in a WordPress Theme. For that you must have a knowledge of WordPress functions, filters and hooks.