Scribd Logo
Upload

Welcome to Scribd!

  • How To Create A Wordpress Theme

    Uploaded by

    adamcoulombe
    58K views13 pages
    A Wordpress theme is simply a folder that contains of PHP, css and images. A "bare mininum" theme consists of AT LEAST the following: ABOUT STYLE.CSS style.css will serve as your main stylesheet. ABOUT INDEX.PHP index.php is essentially an HTML file that will serve as the main template for your theme.

    Original Description:

    Original Title

    How to Create a Wordpress Theme

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    A Wordpress theme is simply a folder that contains of PHP, css and images. A "bare mininum" theme consists of AT LEAST the following: ABOUT STYLE.CSS style.css will serve as your main stylesheet. ABOUT INDEX.PHP index.php is essentially an HTML file that will serve as the main template for your theme.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    58K views13 pages

    How To Create A Wordpress Theme

    Uploaded by

    adamcoulombe
    A Wordpress theme is simply a folder that contains of PHP, css and images. A "bare mininum" theme consists of AT LEAST the following: ABOUT STYLE.CSS style.css will serve as your main stylesheet. ABOUT INDEX.PHP index.php is essentially an HTML file that will serve as the main template for your theme.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 13

    WEB APPLICATIONS 2

    GRAP362

    CREATING A WORDPRESS THEME


    CLASS 3

    WHAT IS A WORDPRESS THEME

    A Wordpress theme is simply a folder that contains of PHP , CSS & images that are used as a page wrap for the pages you create in the CMS. A bare mininum Wordpress theme consists of AT LEAST the following:

    ABOUT STYLE.CSS
    style.css will serve as your main stylesheet, exactly like you have done in the past The filename must be called style.css style.css must contain a comment stating various information about your theme at the top of the document, before any styles.

    /* Theme Name: My Theme Theme URI: http://blog.adam.co Description: My First Wordpress Theme Version: 1.0 Author: Adam Coulombe Author URI: http://www.adam.co */ body { padding-top: 48px;

    ABOUT INDEX.PHP
    index.php is essentially an HTML file that will serve as the main template for your theme. It must have the .php extension because it will contain template tags wherever dynamic content is to be placed

    a few template tags for you


    A few examples of some useful template tags:
    <?php the_date(); ?> Outputs the date of the post/page <?php wp_list_pages('title_li='); ?> Outputs a list of all your pages <?php bloginfo('stylesheet_url');?> Outputs the URL of your style.css <?php bloginfo('template_directory'); ?> Outputs the directory of your template

    <?php the_author(); ?> <?php the_permalink(); ?> Outputs the name of the pages author Outputs the url of the current page

    SAMPLE LOOP

    (Outputting the title & content of the post/page)

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; endif; ?>

    using images in your template


    When creating a theme, it is good practice to place your images in their own folder within your theme folder

    This is not a required convention, but its more organized

    uploading your theme


    The easiest way to upload your theme is using FTP All your theme folders go into:

    ~wordpress~/wp-content/themes/

    how to link the css


    Traditionally, you may be used to seeing your stylesheet being linked like so:
    <link href="style.css" rel="stylesheet" type="text/css" />

    For your wordpress template, you must use the appropriate template tag to ensure your stylesheet is linked properly:
    <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />

    images broken?
    The images are located in this folder: CASE:
    blog.adam.co/wp-content/themes/my-theme/images

    ou need to provide the correct image path so they Y can be accessed from any page! YOU COULD:
    <img src="http://blog.adam.co/wp-content/themes/my-theme/images/myimage.jpg" />

    EVEN BETTER:
    <img src="<?php bloginfo('template_directory'); ?>/images/myimage.jpg" />

    This template tag will automatically link the images properly :)

    adding different templates


    You are not limited to having a single template! By default, all your pages & posts etc.. will use index.php as their template Say you wanted to make a separate template to use on all pages, you would add another php file called page.

    the template hierarchy


    page.php is just one example, you can create as many templates as you like, even for specific pages.

    Source: http://codex.wordpress.org/images/1/18/Template_Hierarchy.png

    dividing your template


    Dividing your HTML into portions allows you to re-use common portions of your HTML code that may appear in more than one

    It is convention to separate the HTML portions of your header, sidebar and footer into their own php files, respectively.

    dividing your template


    Once you have divided your template, it will look much smaller and be more manageable

    before
    <html> <head> <title>My Template</title> </head> <body>

    after

    <?php get_header(); ?>

    <div id="content">...</div> <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    <div id="header">...</div> <div id="sidebar"></div>

    <div id="content">...</div> <div id="footer">...</div>

    </html>

    </body>

    The template tags <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?> are used to include their respective portions.

    You might also like