Create WordPress Theme With PixelKit UI Themes |
X

Congrats, You are Subscribed to Receive Updates.

Create WordPress Theme With PixelKit UI Themes


Pixelkit UI is a awesome framework built with  Bootstrap. But it doesnot open the bootstrap css. It written separately with inherited featreus of Bootstrap.  WordPress is one of the most popular CMS framework . Most of the CMS platforms built with WordPress. So here I am going to use Pixelkit free template to build a simply Awesome WordPress Theme.  Just follow these steps to get ready your WordPress PixelKit theme.

wp_piexlkit

Now ,  First download your desired Pixelkit theme from github source . Than exact it and copy all the files to your WordPress themes directory put it under your newly created theme folder.  than you need to know th basic important files for theme creation,

  • functions.php
  • index.php
  • style.css
  • header.php
  • footer.php
  • sidebar.php
  • loop.php

These are all the necessary files for our theme creation. Than create png image with size of 300X225 for themes identification.

Now open your style.css file first to create theme name and theme details . just add these lines for better wordpress understanding.

/*
Theme Name: KV PixelKit and WordPress theme
Version: 1.0
Theme URI: https://kvcodes.com/
Description: The theme is about sample work of pixelkit css template integration with WordPress. 
Author: V.K Varadha
Author URI: http://kvcodes.co/
*/

than below is our css work goes below. The above line will help wordpress to identify our theme name and lis tit on wordpress themes folder.

first open your ” functions.php ” file and we are going to include the supporting javascript files to wordpress theme.

################################################################################
// Enqueue Scripts
################################################################################
function kv_init_scripts() {
    // Queue Scripts
    wp_enqueue_script('modernizr', get_bloginfo('template_url') . '/js/lib/modernizr.min.js', '',  false);
    wp_enqueue_script('jquery', get_template_directory_uri()  . '/js/lib/jquery-1.10.0.js', '',  true);
	wp_enqueue_script('jquery-custom', get_template_directory_uri() . '/js/libs/jquery-ui.min.js', array('jquery'));
	wp_enqueue_script( 'bootstrap', get_template_directory_uri()  . '/js/libs/bootstrap.min.js');

}
add_action('wp_enqueue_scripts', 'kv_init_scripts');

likewise include all the js files into it.

Than open your header.php file and write your wordpress theme header section code and make it appropriate for better header section . 

<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?> <?php bloginfo('name'); ?></title>

// add your supporting files here.  better use wp_enqueue_scripts. 
</head>
<body> 
<div class="body_wrap" >
<!-- content -->
        <div class="content " role="main">

Than open your footer.php file and write your footer functions.

  </div>
        <!--/ content -->
    </div>
    <!--/ container -->
</div>
</body>
</html>

than you its set to include the js and css files. Its ready to use wordpress development.  Read more detailed usage of Pixelkit theme here.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level

Comment Below

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

*

Current ye@r *

Menu

Sidebar