Wordpress Tutorials

Wordpress setting

Wordpress Function

wordpress top 10 problems

Important Links

Home » wordpress » Html to wordpress

How to convert html themes to wordprsss themes ?

WordPress themes live in a folder inside the /wp-content/themes/ directory in your WordPress installation. Each theme’s folder includes a few essential components:

style.css

index.php

header.php

footer.php

sidebar.php

create html theme to wordpresss themes.

First create a directory (themes name) inside /wp-content/themes/ in your WordPress.

create style.css file in created folder. and write some comment line in your css file.
/* Theme Name: [A unique theme name here] Theme URI: [The theme website] Description: [A description] Author: [Your name] Author URI: [Your website].[Any other comments]. */

copying and pasting all of the content from the mainHTML file in your site template into this new file header.php file. WordPress has a built-in function called bloginfo for accessing all types of information about the installation and the theme. include your page title, logo, and navigation menu.Cut and paste this into a new file, and save it in the same location as your index.php file with the name header.php
br/> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

Assets :
All css file , js file and images directory path , we use
<?php bloginfo('template_directory') ?>/assets/ <br/> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css" media="screen" /> <br/>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.8.2.min.js"></script>

in naviagation bar menu in header.php . write some code in ul tag of menu bar. such as

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

in index.php page , put the code in place of header content <?php get_header(); ?>

in index.php page , put the code in place of sidebar content <?php get_sidebar(); ?>

in index.php page , put the code in place of footer content <?php get_footer(); ?>

File name : index.php

<?php get_header();?>

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page');
endwhile;
?>

<?php
query_posts('cat=11');
while(have_posts()):the_post();
the_content();
endwhile;
?>

<?php get_footer(); ?>

Note :-

NOTE :- create content-page.php page in your themes directory. and write some code.
<?php
/**
* The template used for displaying page content in content-page.php

*/
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<div class="entry-content">
<?php the_content(); ?>

</div>

</article>

create aboutus.php page in your themes directory. these page is creates for post category.

put some code on aboutus.php page.

File name : index.php

<?php /* Template Name: aboutusth1*/ ?>
<?php get_header(); ?>

<?php while(have_posts()):the_post();?>
<?php get_template_part('content','page');?>
<?php endwhile; // end of the loop ?>

<?php
query_posts('cat=3');
while(have_posts()):the_post();
the_content();
endwhile;
?>
<?php //get_sidebar( 'content-bottom' ); ?>

<?php //get_sidebar(); ?>

<?php get_footer(); ?>

Note :-

template name : aboutusth1 add the attribute in your created page template in wordpresspage on rightside widget. below parent.

similarly create services.php page in your themes directory. this page is creates for post category.

File name : index.php

<?php /* Template Name: servicesth1 */ ?>

<?php get_header(); ?>
<?php
query_posts('cat=4');
while(have_posts()):the_post();
the_content();
endwhile;

?>
<?php get_footer(); ?>

Output :-

template name : servicesth1 add the page attribute in your created page template in wordpresspage on rightside widget. below parent.

Note:
create snapshort.PNG image your html running page. for themes images. paste the snapshort.png image into your created template.

Itechtuto

Wordpress Tutorials

Wordpress setting

Wordpress Function

wordpress top 10 problems

Important Links

How to convert html themes to wordprsss themes ?

create html theme to wordpresss themes.

File name : index.php

Note :-

create aboutus.php page in your themes directory. these page is creates for post category.

File name : index.php

Note :-

File name : index.php

Output :-

Connect Us Socially:

Quick Links