Post
Ask Question

How to Create Blog Website Using WordPress: Part 1

Introduction 

Today I'll show to you how to create a blog web site using Wordpress.

Part 1
  • Install Wordpress.
  • Convert HTML theme to Wordpress.

Step 1

At first download Wordpress. You can also get it from my attached file.



Copy and paste here:



Now you need a database for your site.

So create your database as in the following:


  1. Database Name= mytest  
  2. User=root  
  3. Password=no  
Step 2

Now open your Wordpress site from your wampserver.



Click Next >.



Click to Continue.



Click Go.



Now input your database name, username and password.

Then submit.



Run the install.



Click "Next >" then input website name, admin username, admin password and email.



Then install Wordpress.

Now your database and your website are ready for work.





Click here to login:

http://localhost/wordpress/wp-admin/



Now you'll see your Admin panel as in the following:



Next click "Appearance" : "Themes".



You can use these themes by clicking Active. And you can also install Add New wrodpressTheme. But we'll use a simple HTML theme to convert Wordpress.

Step 3

Download Theme: copy and paste here:



My Theme





Next, after refreshing your Browser:



Your Stylesheet is missing

There is no Stylesheet. No Problem. Open your folder and add some pages as in the following:



Add:

  • 404.php.
  • Index.php.
  • Functions.php.
  • Header.php.
  • Footer.php.
  • Page.php.
  • Single.php.
  • Style.css.

Now copy this code.

Style.css

  1. /* 
  2. Theme Name: my theme 
  3. Theme URI: http://mytheme.com 
  4. Author: DipankarBiswas 
  5. Author URI: http://wordpress.org/ 
  6. */  
Now refresh your admin page from:



No error found.

Now open your index.html page. Take a screenshot. And save this image here (rename screenshot).



Now your theme is ready to work.

Click on Active.



Header.php

Open the index.html source code and select header or footer.
  1. <html lang="en">  
  2.     <!-- Mirrored from peterfinlan.com/infusion/ by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 16 Apr 2015 09:54:04 GMT -->  
  3.     <!-- Added by HTTrack -->  
  4.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />  
  5.     <!-- /Added by HTTrack -->  
  6.     <head>  
  7.         <meta charset="utf-8">  
  8.             <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  9.                 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
  10.                     <title>Arise Infotech</title>  
  11.                     <!-- Bootstrap -->  
  12.                     <link href="    
  13.               
  14.                         <?phpbloginfo('template_directory'); ?>/css/bootstrap.min.css" rel="stylesheet">  
  15.                         <link rel="stylesheet" href="    
  16.               
  17.                             <?phpbloginfo('template_directory'); ?>/css/stylesc619.css?v=1.0">  
  18.                             <link rel="stylesheet" href="    
  19.               
  20.                                 <?phpbloginfo('template_directory'); ?>/css/queries.css">  
  21.                                 <link href="    
  22.               
  23.                                     <?phpbloginfo('template_directory'); ?>/css/font-awesome.css" rel="stylesheet">  
  24.                                     <!-- Fonts -->  
  25.                                     <link href='    
  26.               
  27.                                         <?phpbloginfo('template_directory'); ?>/http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>  
  28.                                         <link href='    
  29.               
  30.                                             <?phpbloginfo('template_directory'); ?>/http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>  
  31.                                             <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->  
  32.                                             <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  
  33.                                             <!--[if lt IE 9]>  
  34.                                             <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  
  35.                                             <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>  
  36.                                             <![endif]-->  
  37.     </head>  
  38.         <body>  
  39. <header class="clearfix">  
  40.                 <div class="logo col-md-3">  
  41.                 <h2 class="logo-text">Arise Infotech</h2>  
  42.                 </div>  
  43.                 <nav class="clearfix">  
  44. <?php    
  45. $defaults = array(    
  46. 'theme_location' => '',    
  47. 'menu' => '',    
  48. 'container' => '',    
  49. 'container_class' => '',    
  50. 'container_id' => '',    
  51. 'menu_class' => 'clearfix',    
  52. 'menu_id' => '',    
  53. 'echo' => true,    
  54. 'fallback_cb' => 'wp_page_menu',/* menu class here */    
  55. 'before' => '',    
  56. 'after' => '',    
  57. 'link_before' => '',    
  58. 'link_after' => '',    
  59. 'items_wrap' => '    
  60.                 <ul id="%1$s" class="%2$s">%3$s</ul>','depth' => 0,'walker' => ''    
  61. );wp_nav_menu( $defaults );?>  
  62.                 <!--<ul class="clearfix"><li><a href="#" class="active">design folio</a></li><li><a href="#">services</a></li><li><a href="#">our business</a></li><li><a href="#">how we help</a></li><li><a href="#">take the tour</a></li><li><a href="#" class="last">contact</a></li></ul>-->  
  63.                 </nav>  
  64.                 <div class="pullcontainer">  
  65.                 <a href="#" id="pull">  
  66.                 <i class="fafa-bars fa-2x"></i></a>  
  67.                 </div>  
  68. </header>    
Footer.php
  1. <footer>  
  2.     <div class="container">  
  3.         <div class="row">  
  4.             <div class="col-md-2">  
  5.                 <h2>INFUSION</h2>  
  6.             </div>  
  7.             <div class="col-md-5">  
  8.                 <p>Nam mi enim, auctor non ultricies a, fringillaeurisus.Praesent vitae loremetelittinciduntaccumsansuscipiteulibero. Maecenas diamest, venenatis vitae dui in, vestibulummollisarcu. Doneceunibhtincidunt, dapibussemeu, aliquam dolor. Cum sociisnatoquepenatibusetmagnis dis parturient montes, nasceturridiculus mus. Vestibulumconsecteturcommodoeros, vitae laoreetlectusaliq</p>  
  9.             </div>  
  10.             <div class="col-md-3">  
  11.                 <p>aliquam dolor. Cum sociisnatoquepenatibusetmagnis dis parturient montes, nasceturridiculus mus. Vestibulumconsecteturcommodoeros, vitae laoreetlectusaliq</p>  
  12.             </div>  
  13.             <div class="col-md-2">  
  14.                 <ul class="footer-links">  
  15.                     <li><a href="#">List One</a></li>  
  16.                     <li><a href="#">Page Two</a></li>  
  17.                     <li><a href="#">Design</a></li>  
  18.                     <li><a href="#">Work</a></li>  
  19.                     <li><a href="#">Contact Me</a></li>  
  20.                 </ul>  
  21.             </div>  
  22.         </div>  
  23.     </div>  
  24. </footer>  
  25. <script src="  
  26.     <?phpbloginfo('template_directory'); ?>/js/jquery.min.js">  
  27. </script>  
  28. <script src="  
  29.     <?phpbloginfo('template_directory'); ?>/js/bootstrap.min.js">  
  30. </script>  
  31. <script src="  
  32.     <?phpbloginfo('template_directory'); ?>/js/scripts.js">  
  33. </script>  
  34. <script src="  
  35.     <?phpbloginfo('template_directory'); ?>/js/unslider.min.js">  
  36. </script>undefined</body>undefined<!-- Mirrored from peterfinlan.com/infusion/ by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 16 Apr 2015 09:55:43 GMT -->undefined</html>  
Index.php
  1. <?phpget_header(); ?>  
  2. <div class="container">  
  3.     <div class="row">  
  4.         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">  
  5.             <?php  
  6. if(have_posts()):  
  7. while(have_posts()):  
  8. the_post();  
  9. ?>  
  10.             <div class="post-preview">  
  11.                 <a href="<?phpthe_permalink();?>">  
  12.                     <h2 class="post-title"><?phpthe_title();?></h2>  
  13.                     <h3 class="post-subtitle"><?phpthe_excerpt();?></h3>  
  14.                 </a>  
  15.                 <!--<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 24, 2014</p>-->  
  16.             </div>  
  17.             <hr>  
  18.                 <?php  
  19. endwhile;  
  20. endif;  
  21. ?>  
  22.                 <!-- Pager  
  23. <ul class="pager"><li class="next"><a href="#">Older Posts →</a></li></ul> -->  
  24.             </div>  
  25.         </div>  
  26.     </div>  
  27.     <hr>  
  28. <?phpget_footer(); ?>  
Functions.php
  1. <?php  
  2. register_nav_menus( array(   
  3. 'primary' => __( 'Top Menu', $themename ),   
  4. 'secondary' => __( 'Bottom Menu', $themename ),   
  5. ));  
  6.   
  7. functionarphabet_widgets_init()   
  8. {  
  9. register_sidebar( array(  
  10.     'name' => 'Blog right sidebar',  
  11.     'id' => 'blog_right_sidebar',  
  12.     'before_widget' => '  
  13.         <div class="row_1">',  
  14.         'after_widget' => '</div>',  
  15.         'before_title' => '  
  16.         <h5>','after_title' => '</h5>',  
  17. ) );  
  18. }  
  19. add_action( 'widgets_init', 'arphabet_widgets_init' );  
  20. ?>  
Page.php
  1. <?phpget_header(); ?>  
  2. <div id="content">  
  3.     <?php  
  4. if (have_posts()):  
  5. while(have_posts()):  
  6. the_post();  
  7. ?>  
  8.     <div class="row">  
  9.         <?phpthe_content();?>  
  10.     </div>  
  11.     <?php  
  12. endwhile;  
  13. endif;  
  14. ?>  
  15. </div>  
  16. <?phpget_footer();?>  
Single.php
  1. <?php  
  2. get_header();   
  3. ?>  
  4. <div class="main">  
  5.     <div class="content_2">  
  6.         <h1>  
  7.             <?phpthe_title();?>  
  8.         </h1>  
  9.         <div class="blog_panel_left">  
  10.             <?php  
  11. if(have_posts()):   
  12. while(have_posts()): the_post();  
  13. ?>  
  14.             <div class="single_post">  
  15.                 <h2>  
  16.                     <a href="<?phpthe_permalink();?>"><?phpthe_title(); ?></a>  
  17.                 </h2>  
  18.                 <h3>Posted on   
  19.                     <span><?phpthe_date('F m, Y'); ?></span>  
  20.                 </h3>  
  21.                 <?phpthe_post_thumbnail('featured-image'); ?>  
  22.                 <h3>Posted in   
  23.                     <?phpthe_category(', '); ?>  
  24.                     <?phpthe_tags('Tagged ', ', '); ?>  
  25.                 </h3>  
  26.                 <?phpthe_content();?>  
  27.                 <h3>  
  28.                     <?php if ( comments_open() || get_comments_number() ) :  
  29. comments_template();  
  30. endif;?>  
  31.                 </h3>  
  32.             </div>  
  33.             <?php  
  34. endwhile;  
  35. else:  
  36. echo "  
  37.             <h3>No Posts Found</h3>";  
  38. endif;  
  39. ?>  
  40.         </div>  
  41.         <div class="blog_panel_rght">  
  42.             <div class="search">  
  43.                 <form id="searchform" role="search" method="get" action="  
  44.                     <?php echo esc_url( home_url( '/' ) ); ?>">  
  45.                     <input type="text" value="Search" name="s" id="search" onblur="if(this.value == '') { this.value='Search'}" onfocus="if (this.value == 'Search') {this.value=''}" />  
  46.                 </form>  
  47.             </div>  
  48.             <?phpdynamic_sidebar( 'blog_right_sidebar' ); ?>  
  49.         </div>  
  50.     </div>  
  51.     <?php  
  52. get_footer();   
  53. ?>   
404.php
  1. <?phpget_header(); ?>  
  2. <div class="main">  
  3.     <div class="content_2">  
  4.         <h1>404 Error</h1>  
  5.         <p align="center" style="font-size:18px;">404 Error. Page Not Found.</p>  
  6.     </div>  
  7. </div>      
  8. <?phpget_footer(); ?>  
Your site is ready now.



That is my simple attempt at understanding Wordpress.

Thanks.


Similar Articles