Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to convert a HTML and CSS template that uses .js files as well, into a WP theme on my localhost. The index.html has the following:

<head>
<title>Home</title>
<meta charset="utf-8">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/touchTouch.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/camera.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<script src="js/jquery.equalheights.js"></script>
<script src="js/touchTouch.jquery.js"></script>
<script src="js/jquery.carouFredSel-6.1.0-packed.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/sForm.js"></script>

For this I have written the following in header.php:

<head>
<!--<?php bloginfo('name'); ?> <?php wp_title(); ?></title> -->
<title>Home</title>
<meta charset="utf-8">

<link rel="icon" href="<?php bloginfo('template_directory'); ?>/img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/img/favicon.ico" type="image/x-icon"/>
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/bootstrap.css" type="text/css"> 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/camera.css" type="text/css"> 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/responsive.css" type="text/css"> 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/touchTouch.css" type="text/css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<script src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<!--<script src="<?php bloginfo('template_url'); ?>/js/jquery1.js"></script>-->
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery-migrate-1.1.1.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/superfish.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.mobilemenu.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.cookie.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/camera.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="<?php bloginfo('template_url'); ?>/js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<script src="<?php bloginfo('template_url'); ?>/js/jquery.equalheights.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/touchTouch.jquery.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.carouFredSel-6.1.0-packed.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.mousewheel.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.touchSwipe.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/sForm.js"></script>

All the CSS and .js files are therefore linked. But yet some minor CSS and probably some js features are not being converted. Also the WP dashboard toolbar isn't appearing. once I visit the site from the dashboard, I have to click the back button of the browser to go to the WP dashboard. I have been suggested to use the the wp_head() and wp_footer() functions but after reading from codex.wordpress.org, can't figure out how to use them. Also the HTML for the menu bar is as follows:

  • About Us
  • Artists
  • Works
    • Dolore ipsu
    • Consecte
      • Dolore ipsu
      • Consecte
      • Elit Conseq
    • Elit Conseq
  • Blog
  • Contacts
  • I have written functions.php as:

    <?php
    function register_my_menus() {
      register_nav_menus(
        array(
          'header-menu' => __( 'Header Menu' ),
          'extra-menu' => __( 'Extra Menu' )
        )
      );
    }
    add_action( 'init', 'register_my_menus' );
    ?>
    

    and written the following in my header.php:

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'nav-collapse nav-collapse_ collapse',  'menu_class' => 'nav sf-menu clearfix')); ?>
    

    But the WP menu is displaying as a vertical list. I want it to be horizontal with the CSS as in the HTML template.

    share|improve this question

    2 Answers 2

    I prefer changing all:
    <?php bloginfo('template_url'); ?> and <?php bloginfo('stylesheet_directory'); ?>
    into:

    <?php echo get_template_directory_uri(); ?>
    

    For connection to default style.css I prefer to change:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
    

    into:

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    

    I found no script type is defined in any of the scripts:

    <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.js" type="text/javascript"></script>
    

    The best option of using wp_head() is using it just before the closing tag, like:

    ...
    <?php wp_head(); ?>
    </head>
    

    And the best way to using wp_footer() is using it in footer, but just before the closing </body> tag:

    ...
    <?php wp_footer(); ?>
    </body>
    

    And beside that,
    Ian Stewart's theme development tutorial may help you understand the very core things of WordPress themes in a very easy way.

    And also, WordPress by default uses some js files, so js can conflict with those in many ways. If, then you have to find out the conflicting js manually.

    And for a menu CSS, I call THIS ONE a Universal Menu CSS. :)

    share|improve this answer

    You should enqueue your js and CSS this way :

      function wpse_105303_enqueue_my_scripts() {
    
        wp_register_script( 'my-js1', get_stylesheet_directory_uri(). '/js/myjs1.js',false,null,true );
        wp_register_style( 'my-style1',  get_stylesheet_directory_uri(). '/css/my-style1.css' );
    
        wp_enqueue_script('my-js1');
        wp_enqueue_style('my-style1');
         }
       add_action('wp_enqueue_scripts','wpse_105303_enqueue_my_scripts');
    

    The code goes in the file called functions.php

    share|improve this answer
        
    Thank you for the reply. So if I have 10 css files and 14 js files to enqueue do I have to write a separate wp_register_script() and wp_register_style() entry for each of those files? And also their corresponding register_script() and register_style() entries separately? And in which file and where should I write this code ? –  Debashis Sikdar Jul 4 '13 at 12:55
        
    I've edited code (made a mystake). No you do not have to, you can use wp_enqueue_script and wp_enqueue_style directly like wp_enqueue_style( 'my-style1', get_stylesheet_directory_uri(). '/css/my-style1.css' ); but yes you have to do this for each file. The code goes in functions.php as I've said in answer. –  JMau Jul 4 '13 at 13:06
        
    Thank you once again for your reply. After including this code in the functions.php, where I already have a function written for my menus and an add_action tag for it, is it required to add another add_action tag for the new function? Also how should I write the action tag? My present functions.php has the following: <?php function register_my_menus() { register_nav_menus( array( 'header-menu' => __( 'Header Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'register_my_menus' ); ?> –  Debashis Sikdar Jul 4 '13 at 13:31
        
    function I've written is only for JS and CSS (apart from the main stylesheet which has to be left in header.php). –  JMau Jul 4 '13 at 13:39
        
    I've added the following to the existing functions.php code: function demoweb_enqueue_my_scripts() { wp_register_script( 'my-js1', get_stylesheet_directory_uri(). '/js/myjs1.js',false,null,true ); // for each file wp_register_style( 'my-style1', get_stylesheet_directory_uri(). '/css/my-style1.css' ); // for each file } add_action('wp_enqueue_scripts','demoweb_enqueue_my_scripts'); add_action('wp_enqueue_styles','demoweb_enqueue_my_scripts'); But the problem is still there. Kindly advise. Regards Debashis –  Debashis Sikdar Jul 5 '13 at 6:27

    Your Answer

     
    discard

    By posting your answer, you agree to the privacy policy and terms of service.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.