How Can I convert my html theme to wordpress?

Discussion in 'HTML & Website Design' started by Md.Saddam Hossain, Aug 22, 2013.

  1. #1
    I am trying to convert my html theme to wordpress. I have index.html, style.css file,screenshot.png file and an image folder.

    First I change my index.html file to index.php.

    Then type a comment into style.css :
    /*
    Theme Name: Web Look
    Theme URI: http://www.digitalpoint.com
    Description: A theme for WordPress
    Version: 1.0
    Author: Alamin DC
    Author URI: http://www.digitalpoint.com
    */

    I put some php code into head and try to make dynamic for wordpress.

    My php code :

    For HTML : <html xmlns="http://www.w3.org/1999/xhtml/" <?php languale_attributes('xhtml'); ?>>

    For Meta : <meta http-equiv="content-type" content="<?php bloginfo('html_type); ?>; charset=<?php bloginfo('charset'); ?>" />

    For Title : <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

    For CSS Stylesheet : <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>
    /fonts/stylesheet.css" />

    For Ping : <link rel="pingback" href="<?php bloginfo('pingback_uri'); ?>" />

    For Archives : <?php wp_get_archives('type=monthly&format=links&limit=12'); ?>
    <?php //comments_popup_script(); // off by default ?>

    For Call Head : <?php wp_head(); ?>

    For Call Footer :<?php wp_footer(); ?>

    For Call Theme : <?php echo get_template_directory_uri(); ?>

    For H1 : <?php bloginfo('name'); ?>
    For Description : <?php bloginfo('description'); ?>

    For Menu : <?php wp_nav_menu( array( 'theme_location' => 'wpj-main-meny) ); ?>

    For Header : <?php get_header(); ?>

    For Slider : <?php get_template_part('slider'); ?>

    For Sidebar : <?php get_sidebar(); ?>

    For Footer : <?php get_footer(); ?>

    For Post : <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

    For H2 tag : <h2><?php the_title(); ?></h2>

    For Comment : <?php the_content(); ?>
    What problem..................PNG What problem..................PNG
    For END :

    <?php endwhile; ?>
    <?php else : ?>
    <h3><?php _e('404 Error&58; Not Found', 'bilanti'; ?></h3>
    <?php endif; ?>
    <?php dynamic_sidebar('sidebar'); ?>

    Please see in the image. I have been using localhost WAMPP. When I upload it then it show me this message. Please help me.
     
    Solved! View solution.
    Md.Saddam Hossain, Aug 22, 2013 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,818
    Likes Received:
    4,536
    Best Answers:
    123
    Trophy Points:
    665
    #2
    I converted a great many themes to WordPress and my advice would be not to. But if you want to then...
    1. Find a blank template example
    2. Add your html to it and follow it's structure
    3. tweak until it looks right
    Most of what you posted above made no sense. Try to use the template file conventions that WordPress default templates use.
     
    sarahk, Aug 22, 2013 IP
  3. Simon Wellander

    Simon Wellander Member

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #3
    You need to convert your static theme entirely. It can be a bit tough and time consuming before you get the hang of it.
    I would suggest you to search around for some video guides, maybe on YouTube. I have found them the most helpful for me. But everybody is different.

    But aside from that, I have some links for you that may be useful:

    http://wp.smashingmagazine.com/2013/05/15/migrate-existing-website-to-wordpress/

    http://thethemefoundry.com/blog/html-wordpress/

    You will also find this to be handy: http://www.graphicrating.com/2009/01/18/my-wordpress-cheat-sheet/

    Good luck. :)
     
    Simon Wellander, Sep 2, 2013 IP
  4. #4
    How To Convert an XHTML Website Template into a WordPres:

    What You Will Need
    • An XHTML web template
    • A WordPress install
    • A text editor (Like Dreamweaver or Notepad++)
    • An FTP client (Like Filezilla)
    Getting Started
    First, let’s set up our theme files.

    Prepare your files
    For this tutorial we are going to use the minimum number of theme files needed to create a functional WordPress theme. Your existing template files should include the following:

    • An HTML Template File
    • A CSS Stylesheet
    • An images folder
    You should rename your HTML Template File to ‘index.php’ and your CSS Stylesheet to ‘style.css’. This is important and is how WordPress knows which files are which.

    [​IMG]
    This is an example of what your theme folder should look like

    Add WordPress Theme Info (video)
    This is where your WordPress Theme gets your theme name, description, author link, etc. All you need to do is create a commented out area at the top of your stylesheet as follows:

    /*
    Theme Name: Rose
    Theme URI: the-theme’s-homepage
    Description: a-brief-description
    Author: your-name
    Author URI: your-URI
    Template: use-this-to-define-a-parent-theme–optional
    Version: a-number–optional
    .
    General comments/License Statement if any.
    .
    */
    CSS Goes here…

    Adding Template Tags To Your Theme
    Template Tags are bits of code that WordPress uses to populate your website with content. Different tags display different bits of information from the WordPress database. These are the main tags needed to make your WordPress theme work.

    Page Title – (video)
    Change whatever is within your <title></title> tags to:

    <?PHP wp_title(”); ?>

    Stylesheet – (video)
    We are going to need to swap out the call to our stylesheet with:

    <link rel=”stylesheet” href=”<?PHP bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

    Plugin Hooks – (video)
    Next you will need to add Action Hook Template Tags so WordPress plugins can access your theme. All you need to do is add:

    <?PHP wp_head(); ?>

    to your header (Usually write above the closing </head> tag).

    Then you should add:

    <?PHP wp_footer(); ?>

    to your footer (Usually write above your </body> tag).

    Media and Script Paths – (video)
    By default, your paths will most likely reference your site root. You will need to point all of your multimedia, scripts and stylesheets to your new theme folder within the WordPress file structure using:

    <?PHP bloginfo(‘template_directory’); ?>

    The easiest way to do this is to do a search and replace for ‘src=’ and add the appropriate template tags. This is not fool proof as not all template structures are created equal but it will work a majority of the time.

    [​IMG]
    Search and Replace to change paths to WordPress theme paths

    Adding The WordPress Loop
    The WordPress loop is what handles all of your websites content. Its main components are:

    • A header
    • A permalink
    • Some Content
    First you will need to identify where your content starts/repeats (if it repeats). The easiest way to do this is to look for your content’s header and begin The Loop there. The Loop will usually end immediately after your content unless you are displaying extra information below your entries. You will also need to identify where your content begins and ends.Scroll to the end of this section to view some example code.

    The Loop Code – (video)
    Beginning:

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    End:

    <?php endwhile; endif; ?>

    Template Tags Within The Loop – (video)
    The Title:

    <?php the_title(); ?>

    The Permalink

    <?php the_permalink() ?>

    The Content

    <?php the_content(‘<p>Read more</p>’); ?>

    Example Code
    So this becomes this.

    Navigation – (video)
    Most themes will have the navigation within an unordered list. This makes things easy for you. All you need to do is replace the list elements (everything between the <ul></ul> tags) with the following:

    <?PHP wp_list_pages(‘title_li=&depth=1&sort_column=menu_order&exclude=’); ?>

    This is the most basic of menus and wont display child pages. You can exclude pages by simply adding the page ids separated by comas after “exclude=”. Learn more about wp_list_pages().

    Upload and Activate Your Theme
    Now all you have to do is upload your theme folder which should now consist of:

    • An index.php file with custom code
    • A CSS file with header information about the theme
    • An images folder with all of your images
    If all goes accordingly you should have a functional WordPress theme that allows you to add new pages and posts as well as use most popular WordPress plugins. It is important to note that you will not be able to add widgets to your sidebar and people will not be able to comment on posts. There may also be some other limitations due to the themes simplicity.

    hope this will help u....​
     
    k.h.r online service, Sep 2, 2013 IP