Create WordPress Theme With PixelKit UI Themes
- Article
- Comment
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.
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.
