Create WordPress Theme with Metro UI CSS |
X

Congrats, You are Subscribed to Receive Updates.

Create WordPress Theme with Metro UI CSS


After Twitter’s Bootstrap, Metro UI CSS is one of the popular  CSS framework. Now a days many websites build with Metro UI CSS. Which will give you a Windows 8 Startup style . Here I am going to help you to create your WordPress Theme.

a Wp Theme

a Wp Theme

If you know the necessary files for a Basic WordPress theme create it. Else create the following files under your WP themes folder.

  • index.php
  • functions.php
  • style.css
  • header.php
  • footer.php
  • loop.php
  • single.php
  • sidebar.php
  • search.php
  • front-page.php     //if you want static front page than create it.

These are all the necessary files to create your WP Theme. Than just download the Metro UI CSS  here.

Download Metro UI

Than extract on your localhost, and copy the following files.

css
    -- metro-bootstrap.css (required)
    -- metro-bootstrap-responsive.css // if you need responsive site
    -- iconFont.css // Custom fonts for your wp theme, if you dont want it than no need to copy the fonts folder too.
fonts
    -- iconFont.*
    -- metroSysIcons.* (required)
js
    -- metro.min.js (required)

and additionally you need to download the following files for better jQuery Support.

  -- jquery.min.js (required)
  -- jquery.widget.min.js (required)
  -- jquery.mousewheel.js (required for mouse wheel support)

That’s it for begining. If you are necessary to add complete features , than copy the entire js folder and place it there. Now , we have all the supportive files.  Yet to write codes to make  your theme interact with Metro UI CSS .

now open your  “style.css”  file first, write the following code to name your theme and include all the CSS of Metro UI.

/*
Theme Name: WP Metro Theme By KVcodes
Theme URI: https://kvcodes.com/
Author: Kv Varadha
Author URI: https://kvcodes.com/
Description: A Simple theme creation for  Wp With Metro UI. 
Version: 1.0
*/
@import url('css/iconFont.min.css'); 
@import url('css/metro-bootstrap.min.css'); 
@import url('css/metro-bootstrap-responsive.min.css');

and  we have to include all the js files by en queuing the js files. so open your “functions.php”  and write the following code.

/*################################################################################
// Enqueue Scripts
################################################################################*/
function kv_init_scripts() {
    wp_deregister_script( 'jquery' );  // de-registered the exisitng jquery file and include my own one. 

    wp_enqueue_script('jquery', get_template_directory_uri()  . '/js/jquery-1.11.0.js', '', '', true);

    //likewise include all the necessary supportive js files. 
}    

if (!is_admin())  {
	add_action('init', 'kv_init_scripts', 0);
}

Now, open your ” header.php ” and write the following codes.

<!DOCTYPE html>
<html>
    <head>
   <title><?php wp_title( '|', true, 'right' ); ?> <?php bloginfo('name'); ?></title>
    </head>
    <body class="metro">

	<!--if you theme is responsive  just add the container class, else leave it. -->
		<div class="container">
<nav class="navigation-bar">
                <div class="navigation-bar-content">
                    <a href="/" class="element"><span class="icon-grid-view"></span> METRO UI CSS <sup>2.0</sup></a>
                    <span class="element-divider"></span>

                    <a class="pull-menu" href="#"></a>
                    <ul class="element-menu">
                        <li>
                            <a class="dropdown-toggle" href="#">Base CSS</a>
                            <ul class="dropdown-menu " data-role="dropdown">
                                <li><a href="requirements.html">Requirements</a></li>
                                <li>
                                    <a href="#" class="dropdown-toggle">General CSS</a>
                                    <ul class="dropdown-menu" data-role="dropdown">
                                        <li><a href="global.html">Global styles</a></li>
                                        <li><a href="grid.html">Grid system</a></li>
                                        <div class="divider"></div>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="tables.html">Tables</a></li>
                                        <li><a href="forms.html">Forms</a></li>
                                        <li><a href="buttons.html">Buttons</a></li>
                                        <li><a href="images.html">Images</a></li>
                                    </ul>
                                </li>
                                <li class="divider"></li>
                                <li><a href="responsive.html">Responsive</a></li>
                                <li class="disabled"><a href="layouts.html">Layouts and templates</a></li>
                                <li class="divider"></li>
                                <li><a href="icons.html">Icons</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="dropdown-toggle" href="#">Community</a>
                            <ul class="dropdown-menu" data-role="dropdown">
                                <li class="disabled"><a href="http://blog.metroui.net">Blog</a></li>
                                <li class="disabled"><a href="http://forum.metroui.net">Community Forum</a></li>
                                <li class="divider"></li>
                                <li><a href="https://github.com/olton/Metro-UI-CSS">Github</a></li>
                                <li class="divider"></li>
                                <li><a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">License</a></li>
                            </ul>
                        </li>
                    </ul>

                    <div class="no-tablet-portrait">
                        <span class="element-divider"></span>
                        <a class="element brand" href="#"><span class="icon-spin"></span></a>
                        <a class="element brand" href="#"><span class="icon-printer"></span></a>
                        <span class="element-divider"></span>

                        <div class="element input-element">
                            <form>
                                <div class="input-control text">
                                    <input type="text" placeholder="Search...">
                                    <button class="btn-search"></button>
                                </div>
                            </form>
                        </div>

                        <div class="element place-right">
                            <a class="dropdown-toggle" href="#">
                                <span class="icon-cog"></span>
                            </a>
                            <ul class="dropdown-menu place-right" data-role="dropdown" style="display: none;">
                                <li><a href="#">Products</a></li>
                                <li><a href="#">Download</a></li>
                                <li><a href="#">Support</a></li>
                                <li><a href="#">Buy Now</a></li>
                            </ul>
                        </div>
                        <span class="element-divider place-right"></span>
                        <button class="element image-button image-left place-right">
                            Sergey Pimenov
                            <img src="images/me.jpg">
                        </button>
                    </div>
                </div>
            </nav>

I added the static code for your template, you have to make it adapt the menu which you created from wp-admin/menu and you can create your  header menu inside the header.php file. and your footer looks like the following one

   	<!--your copyright and end footer dive here -->

  </div>

</body>
</html>

and your “ index.php ” file looks like this.

<?php get_header(); ?>

<section id="main-content">

	<?php if (is_search()) : 		
		 get_template_part('search'); 		
	 elseif ((is_single())  :  
    		get_template_part('single');
	 else :
	 	get_template_part('loop'); 
	endif; ?>

</section>
<?php

 get_sidebar(); 

get_footer(); ?>

Now, Open your loop.php and write the following code.

<div class="row" > 
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
		<div class="panel">
    <div class="post" id="post-<!--?php the_ID(); ?-->">
        <div class="panel-header"><a href="<!--?php the_permalink() ?-->" rel="bookmark" title="Permanent Link to
        <?php the_title(); ?>"> <?php the_title(); ?></a></div>
        <small><?php the_time('F jS, Y') ?> <!-- by <!--?php the_author() ?--> --></small>

        <div class="panel-content">
            <?php the_content('Read the rest of this entry »'); ?>
        </div>

        <p class="postmetadata">Posted in <!--?php the_category(', ') ?--> <strong>|</strong>
            <?php edit_post_link('Edit','','<strong>|</strong>'); ?>
            <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments
        »'); ?>
        </p>
    </div>
	</div>
    <?php endwhile; ?>
    <div class="navigation">
        <div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
        <div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
    </div>
<?php else : ?>
    <div class="panel-header">Not Found</div>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    <?php include (TEMPLATEPATH . "/search.php"); ?>
<?php endif; ?>
</div>

And now, we are going to create the “single.php” to view the posts in unique page.

<div class="row" > 
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="panel">
			<div class="panel-header"><?php the_title(); ?></div>

			<div class="panel-content">
				<?php the_content( ); ?>
			</div>
			<div class="notice">
				<?php the_category(', '); the_tags( ' Tags: ', ', ', '</p>'); ?>
			</div>
		</div> 
		 <?php endwhile;
	else : ?>
		<div class="panel-header">Not Found</div>
			<p class="center">Sorry, but you are looking for something that isn't here.</p>
			<?php include (TEMPLATEPATH . "/search.php"); ?>
	<?php endif; ?>
</div>

Than, open your “sidebar.php”  and copy paste the following code.

<nav class="sidebar (light)">
    <ul>
<?php dynamic_sidebar( 'footer-sidebar' ); //This will get all the dynamic sidebars. 

get_sidebar(); ?>
</ul>
</nac>

And now,  your ” search.php ” .

<?php
	get_header(); ?>
            <div  class="row" role="main">

            <?php if ( have_posts() ) : ?>

                <header class="page-header">
                    <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
                </header><!-- .page-header -->

                <?php shape_content_nav( 'nav-above' ); ?>

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

                    <?php get_template_part( 'content', 'search' ); ?>

                <?php endwhile; ?>

                <?php shape_content_nav( 'nav-below' ); ?>

            <?php else : ?>

                <?php get_template_part( 'no-results', 'search' ); ?>

            <?php endif; ?>

            </div>     

<?php get_sidebar(); ?>
<?php get_footer(); ?>

That’s it, now you can create you simple Metro UI WordPress theme.

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

2 comments

  1. commenter

    Hi,

    First of all I hope that you are doing well and my thoughts and prayers are with you and all who reside in Ukraine.

    I have tried to load this theme a few times now, and can’t seem to get it up and running. My host is bluehost and I am using wordpress 3.91.

    I followed everything step by step as you outlined and I copied everything into a new theme file entitled: Metro UI CSS 2.0. I got a bit confused at the start of the tutorial as I did not know where to copy the files to so I made a css, icon, and jq file and put the files into those folders. Then I copied each of the content boxes above and pasted in the appropriate filles. For the footer, I assume that text goes into the footer.php correct? So, assuming I did ok so far, I went to wordpress and activated the theme.

    On the latest try at the top of the WP admin screen I get the following text from the functions.php file: ################################################################################ // Enqueue Scripts ################################################################################ function kv_init_scripts() { wp_deregister_script( ‘jquery’ ); // de-registered the exisitng jquery file and include my own one. wp_enqueue_script(‘jquery’, get_template_directory_uri() . ‘/js/jquery-1.11.0.js’, ”, ”, true); //likewise include all the necessary supportive js files. } if (!is_admin()) { add_action(‘init’, ‘kv_init_scripts’, 0); }

    So, I am doing something incorrectly obviously and need your help to get this up and running. I also noticed in the unzipped Metro file folder several other files. Should I add these to the theme as well? So confused.

    Also, is this a trial program and is there a premium version that has everything read to go that can just be simply uploaded into wordpress?

    I would appreciate and look forward to any help you can provide.

    Sincerely,
    Mark

    • commenter

      Hi mark thanks for your detailed comment. When you see the code on the admin page means your code does not enclosed with php tags

      This is the php tag all the php works put into the space. So it can work properly.

      If it doesnot help you than use my contact page with the error screenshots. I will help you.

Comment Below

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

*

Current ye@r *

Menu

Sidebar