How to Create Page Template

  • Vivek

    (@kumarvivek134)


    11 years ago

    I wrote the following code for a page in HTML, CSS, and JavaScript. How do I transform this into a WordPress Page Template?

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/global.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.js"></script>
<body>
<div class="box1">
    <div class="top1"></div>
        <!-- Content Start Here -->
        <div id="m-container">
            <h1>Featured Clients & Partners</h1>
            <ul class="filterClients" style="float:left; clear:both; margin:0 0 0 0px; ">
                <li><a href="#" class="it">IT</a></li>
            </ul>
        </div>
        <!-- Content Start Here -->
    </div>
</div>
</body>
</html>

    How I can do so ? I am just a little bit confused that how i can add external CSS or JavaScript in wordpress as well as how i can edit header and footer in the page template.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Vivek

    (@kumarvivek134)

    11 years ago

    I want to create a Custom theme Template. with the above code within an existing Template. This Page will be a single page template.

    crtyrddean

    (@crtyrddean)

    11 years ago

    Hi, you can easily create a custom page template by using an existing theme and amending page.php to something like single-page.php and editing the template name as per below.

    <?php
    /*
    Template Name: About
    */
    ?>

    A good starting point would be to read up on the basics of the different files that make up a WordPress template.

    Template Files
    https://developer.ww.wp.xz.cn/themes/basics/template-files/

    Page Templates
    https://developer.ww.wp.xz.cn/themes/basics/page-templates/

    Also try looking at Twenty Fifteen or Underscores themes for examples.

    https://github.com/Automattic/_s/blob/master/page.php
    https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/single.php

    To add an external stylesheet you will need to enqueue your styles.css file within your functions.php using the following.

    wp_enqueue_style( ‘your-custom-style’, get_stylesheet_uri() );

    See Including CSS and Javascript
    https://developer.ww.wp.xz.cn/themes/basics/including-css-javascript/

    By default, a WordPress installation includes jQuery automatically so you do not need to manually declare the jQuery library in your theme.

    You can use template tags <?php get_header() ?> to call your header.php template along with <?php get_footer ?> for your footer.php templates to build your custom page template.

    Again, take a look under the hood of the Twenty Fifteen or Underscores theme as a good starting point.

    Thread Starter Vivek

    (@kumarvivek134)

    11 years ago

    Hi Crtyrddean,
    Thanks for Replying.

    I have tried it the same process.

    I have created 1 file one with the name client.php as i want a custom them page of my client portfolio. So i have created it and then added all the External Css and Jquery Code to the function.php file but it not working as well as it affect other theme function code, i have already attached the code.

    I have added the css and java script file into the function.php file using this code. 

    wp_enqueue_style( 'our-clients', get_template_directory_uri() . '/css/global.css',false,'1.1','all');
wp_enqueue_style( 'our-clients', get_template_directory_uri() . '/css/responsive.css',false,'1.1','all');
wp_enqueue_style( 'our-clients', get_template_directory_uri() . '/js/jquery-1.js',false,'1.1','all');
wp_enqueue_style( 'our-clients', get_template_directory_uri() . '/js/jquery.quicksand.js',false,'1.1','all');
wp_enqueue_style( 'our-clients', get_template_directory_uri() . '/js/drop-down.js',false,'1.1','all');

    But this code affected to the other theme function code as well as the single page template is also not perfectly shown on the template WordPress “Page Attribute Place”.

    Can you please help for the Same.

    Thanks In advance.
    Vivek

    crtyrddean

    (@crtyrddean)

    11 years ago

    Hi – what theme are you using? Are you using a pre-bought theme or are you creating your theme from scratch?

    Thanks

    Dean

    Thread Starter Vivek

    (@kumarvivek134)

    11 years ago

    I am using theme which has been design and developed by my developer but now is not here.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘How to Create Page Template’ is closed to new replies.