Thumbnail-22-4

Welcome guys,

Here we are gathered to do something exciting with web designing.

Of Course, WordPress provides so many themes which can be set by ourselves the overall appearance of a blog or website.

But sometimes we want to have our own design for our WordPress website. In that circumstances, HTML templates into WordPress theme conversion will help to do that. you can follow How to Create Child Theme WordPress if you want to make the template as the child theme.

Here, we have given some easy steps with a live example. Just follow this blog and you will be able to convert HTML templates into WordPress themes. And that converted theme will be fully dynamic. Users can manage every single content of their site dynamically.

First of all, get the HTML template you want to convert. In this blog, we have used the DropTrope HTML template from html5up.com.

And follow the given below steps to set up the base of our website:

Step 1 : Create theme folder in local directory/wp-content/themes

Step 2: In your newly created theme folder, create the required files for WordPress Themes.

Files will be like,

  • style.css
  • index.php: It displays blog posts, archives, generic posts, etc… when we select to show the latest post or it is used to show the layout of the selected static page.
  • functions.php
  • header.php
  • footer.php
  • front-page.php: It shows the page which is selected as a front page.
  • single.php: To show a single post.
  • page.php: To show page contents.
  • sidebar.php
  • archive.php: To show archives of posts, pages, categories, tags, etc…
  • search.php: To show search results.

After creating this structure, just do as given below instructions.

Step 3: style.css : 

Set like given below information to creating WordPress theme,

/*
Theme Name: <theme name>
Theme URI: https://wordpress.org/themes/<your theme>/
Author: <author name>
Author URI: https://<author uri>/
Description: <descriptions>
Tags: <comma separated tags>
Version: <version> 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
Licence: GNU General Public Licence v2 or later
Licence URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: <text domain>
*/

After that, bring all the styles from the CSS file of the HTML template into this file.

Step 4: header.php and footer.php:

Get all header/footer structure of HTML template to its particular file.

// header.php
// Set before head tags ends in header.php
// Header structure will be from html tag to header tag ends.
<?php wp_head(); ?>
// -----------------------------------------------------------------
// footer.php
// Set before the body tag ends in footer.php
// Footer structure will be entire footer section with html tag ends.
<?php wp_footer(); ?>

Step 5: Get all main content code from the HTML template to front-page.php

Step 6: To enqueue style and script

<?php
 
function gvdroptrope(){
    wp_enqueue_style('style', get_stylesheet_uri());
 
    wp_enqueue_script('jquery'); // includes jQuery from WordPress core
 
    wp_enqueue_script('gvdroptrope-brower', get_template_directory_uri().'/assets/js/browser.min.js');
 
    wp_enqueue_script('gvdroptrope-breakpoints', get_template_directory_uri().'/assets/js/breakpoints.min.js');
 
    wp_enqueue_script('gvdroptrope-util', get_template_directory_uri().'/assets/js/util.js');
 
    wp_enqueue_script('gvdroptrope-main', get_template_directory_uri().'/assets/js/main.js');
}
add_action('wp_enqueue_scripts', 'gvdroptrope');

Step 7: Include the header and footer on the front page.

// Set at Top of the code in front-page.php
<?php get_header(); ?>
 
// Set at bottom of the code in front-page.php
<?php get_footer(); ?>

And remove added linked styles from header.php and scripts from footer.php

Step 8: Add another WordPress theme supports to that new function in functions.php

like this:

function gvdroptrope_theme_setup(){
    add_theme_support("custom-logo");
    add_theme_support("title-tag");
    add_theme_support("widgets");
    add_theme_support("post-thumbnails");
    add_image_size("home-featured", 680, 400, array('center', 'center'));
  	add_image_size("single-post", 588, 272, array('center', 'center'));
    add_theme_support("automatic-feed-links");
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'wplearning')
    ));
   
    // for custom header
    $args = array(
    'default-image' => get_template_directory_uri().'/assets/img/header-1.jpg',
    'default-text-color' => '000',
    'width' => 1920,
    'height' => 400,
    'flex-width' => true,
    'flex-height' => true,
    );
    add_theme_support("custom-header", $args);
}
add_action('after_setup_theme', 'gvdroptrope_theme_setup' );

Step 9: Set dynamic WordPress Logo, and Set WordPress dynamic navigation menu.

Let’s add class to the body using the WordPress function in header.php,

<!DOCTYPE HTML>
<html>
	<head>
        <meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <?php wp_head(); ?>
    </head>
  	//Remove previous body element class and add class like this
	<body <?php body_class('homepage is-preload') ?> >
		<div id="page-wrapper">
		// Header
			<section id="header">
  				// Replace WordPress logo text with this, This given below function will bring WordPress Logo dynamically.
				// Logo
				<?php the_custom_logo() ?>
// WordPress Logo must be around it's default size 90px * 43px and for horizontal logo it must be 250px X 45px to 250px X 55px size.
  
				// Nav menu
				<nav id="nav">
					<?php
						wp_nav_menu(array(
							'theme_location' => 'primary',
							'container' => ''
						));
					?>
				</nav>
			</section>

And go to Appearance -> menus and set the menu as a primary menu by enabling the checkbox.

Step 10: style.css for menu items

Find the “.current” class and replace it with “.current-menu-item” to show the default class for the currently selected menu.

And to show submenu items by hovering on the menu, add WordPress default class instead of template class and make changes as needed.

Step 11: Set dynamic sidebars or widgets.

In the functions.php file, create a function and add an action for that function, like a Set array of arguments in the “register_sidebar()” function to create a dynamic WordPress sidebar or widgets.

function gvdroptrope_widget_init(){
 
register_sidebar(array(
       'name' => __('Primary Sidebar', 'gvdroptrope'),
       'id' => 'main-sidebar',
       'description' => 'Main Sidebar on RightSide',
       'before_widget' => '<aside id="%1$s" class="widget %2$s">',
       'after_widget' => '</aside>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
));
 
register_sidebar(array(
       'name' => __('Footer Widget 1', 'gvdroptrope'),
       'id' => 'footer-1',
       'before_widget' => '<section id="%1$s" class="widget %2$s">',
       'after_widget' => '</section>',
       'before_title' => '<header><h2 class="widget-title">',
       'after_title' => '</h2></header>',
));
}
add_action('widgets_init','gvdroptrope_widget_init');

Set every widget using “register_sidebar()” function. In that function, you need to add an array of every property of the widget. Like:

  • name: for the name of the widget
  • id: for the id of the widget
  • before_widget: for starting tag of widget
  • after_widget: for ending tag of widget
  • before_title: for starting tag of widget titleafter_title: for ending tag of the widget title
  • after_title: for ending tag of the widget title

Then, show WordPress widgets using function:

dynamic_sidebar(‘<sidebar-id>’);

Now, go to the WordPress dashboard then go to widgets from the appearance menu. There you can see all added widgets. Now you can add widgets or sidebars whenever you want.

Step 12: Set WordPress dynamic blog post.

Go to the page which contains blog posts to show. (in this theme, the post is coming from front-page.php) And perform WordPress query like this:

// Blog
	<section>
		<header class="major">
        	<h2>The Blog</h2>
        </header>
      	<div class="row">
          <?php
          $blog_args = array(
          'post_type'=>'post',
          'posts_per_page'=>2
        );
        $blog_posts = new wp_query($blog_args);
        while($blog_posts->have_posts()){
        $blog_posts->the_post();
      	?>
        <div class="col-6 col-12-small">
          <section class="box">
            <a href="<?php the_permalink() ?>" class="image featured">
            	<?php the_post_thumbnail('home-featured') ?>
            </a>
        <header>
        	<h3><?php the_title() ?></h3>
          	<p>Posted on <?php the_date() ?> <?php the_time() ?></p>
        </header>
        <?php the_excerpt() ?>
          <footer>
          	<ul class="actions">
          		<li><a href="<?php the_permalink() ?>" class="button icon solid fa-file-alt">Continue Reading</a></li>
          		<li><a href="<?php comments_link() ?>" class="button alt icon solid fa-comment"><?php echo get_comments_number()?> comments</a></li>
          	</ul>
          </footer>
         </section>
        </div>
       <?php } ?>
      </div>
	</section>

First of all, create an array for blog arguments -> by using array args, perform WordPress query and get the result into variable -> iterate loop through result variable. And within that use, all WordPress functions show blog details dynamically.

WordPress functions to show dynamic posts:

  • the_permalink() : It displays the permalink of current post.
  • the_post_thumbnail() : It displays post thumbnail.
  • the_title() : It displays current post title.
  • the_date() : It displays the date when post is created.
  • the_time() : It displays the time when post is created.
  • the_excerpt() : It displays post excerpt.
  • comments_link() : It displays link of current post comment.
  • get_comments_number() : It displays no. of comments on post.

Step 13: To show WordPress custom post type

Let’s create a custom post type first. Like this:

function create_portfolio_cpt() {
 
    $labels = array(
        'name' => _x( 'Portfolios', 'Post Type General Name', 'textdomain' ),
        'singular_name' => _x( 'Portfolio', 'Post Type Singular Name', 'textdomain' ),
        'menu_name' => _x( 'Portfolios', 'Admin Menu text', 'textdomain' ),
        'name_admin_bar' => _x( 'Portfolio', 'Add New on Toolbar', 'textdomain' ),
        'archives' => __( 'Portfolio Archives', 'textdomain' ),
        'attributes' => __( 'Portfolio Attributes', 'textdomain' ),
        'parent_item_colon' => __( 'Parent Portfolio:', 'textdomain' ),
        'all_items' => __( 'All Portfolios', 'textdomain' ),
        'add_new_item' => __( 'Add New Portfolio', 'textdomain' ),
        'add_new' => __( 'Add New', 'textdomain' ),
        'new_item' => __( 'New Portfolio', 'textdomain' ),
        'edit_item' => __( 'Edit Portfolio', 'textdomain' ),
        'update_item' => __( 'Update Portfolio', 'textdomain' ),
        'view_item' => __( 'View Portfolio', 'textdomain' ),
        'view_items' => __( 'View Portfolios', 'textdomain' ),
        'search_items' => __( 'Search Portfolio', 'textdomain' ),
        'not_found' => __( 'Not found', 'textdomain' ),
        'not_found_in_trash' => __( 'Not found in Trash', 'textdomain' ),
        'featured_image' => __( 'Featured Image', 'textdomain' ),
        'set_featured_image' => __( 'Set featured image', 'textdomain' ),
        'remove_featured_image' => __( 'Remove featured image', 'textdomain' ),
        'use_featured_image' => __( 'Use as featured image', 'textdomain' ),
        'insert_into_item' => __( 'Insert into Portfolio', 'textdomain' ),
        'uploaded_to_this_item' => __( 'Uploaded to this Portfolio', 'textdomain' ),
        'items_list' => __( 'Portfolios list', 'textdomain' ),
        'items_list_navigation' => __( 'Portfolios list navigation', 'textdomain' ),
        'filter_items_list' => __( 'Filter Portfolios list', 'textdomain' ),
    );
    $args = array(
        'label' => __( 'Portfolio', 'textdomain' ),
        'description' => __( '', 'textdomain' ),
        'labels' => $labels,
        'menu_icon' => 'dashicons-portfolio',
        'supports' => array('title', 'editor', 'excerpt', 'thumbnail'),
        'taxonomies' => array(),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'menu_position' => 5,
        'show_in_admin_bar' => true,
        'show_in_nav_menus' => true,
        'can_export' => true,
        'has_archive' => true,
        'hierarchical' => false,
        'exclude_from_search' => false,
        'show_in_rest' => true,
        'publicly_queryable' => true,
        'capability_type' => 'post',
    );
    register_post_type( 'portfolio', $args );
 
}
add_action( 'init', 'create_portfolio_cpt', 0 );

Now you can see your custom post type menu on the WordPress dashboard. Create a custom post using it. And to show those custom post types dynamically, do the same as a blog post.

If you are using more than one loop on one page, then use “wp_reset_postdata()” at the end of every loop to avoid conflict. This function will reset loop data after loop and gives the proper result of wp-query.

Step 14: Now, let’s show the sidebar dynamically.

Go to single.php:

  • Set sidebar structure from HTML template.
  • Set WordPress header function on the top and footer function at the last.

Go to sidebar.php

  • Set sidebar structure
  • And within that HTML structure, call WordPress sidebar function with widget id.

Again go to single.php

  • And call sidebar using WordPress function, like this: <?php get_sidebar()?>
  • Iterate loop through posts, and set content dynamic as we did previously.

Step 15: To show the contents of pages.

Go to page.php and do the same as single.php

Step 16: To show all category’s results.

Go to archive.php and do like this:

<?php get_header() ?>
// Main
<section id="main">
    <div class="container">
        <div class="row">
            <div class="col-8 col-12-medium">
                <?php
                    if(have_posts()){
                        while(have_posts()){
                            the_post(); ?>
                            <div class="col-4 col-6-medium col-12-small">
                                <section class="box">
                                    <a href="<?php the_permalink() ?>" class="image featured">
                                        <?php the_post_thumbnail('home-featured') ?>
                                    </a>
                                    <header>
                                        <h3><?php the_title() ?></h3>
                                    </header>
                                    <?php the_excerpt() ?>
                                    <footer>
                                        <ul class="actions">
                                            <li><a href="<?php the_permalink() ?>" class="button alt">Read more</a></li>
                                        </ul>
                                    </footer>
                                </section>
                                </div>
                        <?php }
                    }
                ?>
            </div>
           <?php get_sidebar() ?>
        </div>
    </div>
</section>
 
<?php get_footer() ?>

Step 17: To show search results.

Go to search.php and do the same like archive.php

Step 18: To Show the blog page structure.

Go to the index.php and do the same like search.php

It will show the blog page structure. And make all the changes whatever you want in your WordPress site.

In addition to this, there are many functions of WordPress, with the help of which you can make your website the way you want it.

Github

Click on this given link to get the whole project code that we have performed here.

And stay connected with us to know more, learn more, and do more in the entire web development industry. Thank you!

Similar Posts

How to Create an Addon Plugin in WordPress

How to Create an Addon Plugin in WordPress

Bygvtechnolab

WordPress is a versatile and powerful platform that owes much of its functionality to its extensive ecosystem of plugins. These plugins enhance and extend the capabilities of your WordPress website, allowing you to tailor it to your specific needs.so lets learn How to Create an Addon Plugin in WordPress If don’t know how to create…

Leave a Reply

Your email address will not be published. Required fields are marked *