Scribd Logo
Upload

Welcome to Scribd!

  • 125 views

    How To Create A Wordpress Theme

    Uploaded by

    sameerroushan
    The document discusses how to create a basic WordPress theme including the necessary files like style.css and index.php, how to add template tags to dynamically output content, and best practices for organizing the theme files and dividing the template into reusable portions using include files. It provides examples of common template tags and instructions for uploading and linking the theme files correctly on a WordPress site.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    How To Create A Wordpress Theme

    Uploaded by

    sameerroushan
    125 views13 pages
    The document discusses how to create a basic WordPress theme including the necessary files like style.css and index.php, how to add template tags to dynamically output content, and best practices for organizing the theme files and dividing the template into reusable portions using include files. It provides examples of common template tags and instructions for uploading and linking the theme files correctly on a WordPress site.

    Original Description:

    Creating a wordpress theme

    Original Title

    82323788 How to Create a Wordpress Theme

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses how to create a basic WordPress theme including the necessary files like style.css and index.php, how to add template tags to dynamically output content, and best practices for organizing the theme files and dividing the template into reusable portions using include files. It provides examples of common template tags and instructions for uploading and linking the theme files correctly on a WordPress site.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    125 views13 pages

    How To Create A Wordpress Theme

    Uploaded by

    sameerroushan
    The document discusses how to create a basic WordPress theme including the necessary files like style.css and index.php, how to add template tags to dynamically output content, and best practices for organizing the theme files and dividing the template into reusable portions using include files. It provides examples of common template tags and instructions for uploading and linking the theme files correctly on a WordPress site.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 13
    At a glance
    Powered by AI
    The key takeaways are that a WordPress theme consists of PHP, CSS, and image files that are used to style the content and layout of pages. The main components are the style.css file which contains styling and theme information, and the index.php file which acts as the main template. Template tags are used to output dynamic content.

    The main components of a WordPress theme are the style.css file, which contains styling and metadata about the theme, and the index.php file, which acts as the main template for content. Other files can be used for additional templates.

    The style.css file serves as the main stylesheet for the theme. It must contain specific metadata at the top and be linked properly for the styling to be applied. It controls the visual design and layout of the site.

    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(); ?> <?php bloginfo('stylesheet_url');?>
    Outputs the date of the post/page Outputs the URL of your style.css

    <?php wp_list_pages('title_li='); ?> <?php bloginfo('template_directory'); ?>


    Outputs a list of all your pages Outputs the directory of your template

    <?php the_author(); ?> <?php the_permalink(); ?>


    Outputs the name of the page’s 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?
    CASE: The images are located in this folder:
    •
    blog.adam.co/wp-content/themes/my-theme/images

    • You need to provide the correct image path so they


    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 tem-
    plates
    • 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 after
    <html> <?php get_header(); ?>
    <head> <div id="content">...</div>
    <title>My Template</title> <?php get_sidebar(); ?>
    </head> <?php get_footer(); ?>
    <body>
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="sidebar"></div>
    <div id="footer">...</div>
    </body>
    </html>

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

    You might also like