Embed Size (px)
Citation preview
CREATING AWORDPRESSTHEME
WEB APPLICATIONS 2 GRAP362
CLASS 3
WHAT IS A WORDPRESSTHEME•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, beforeanystyles.
/*Theme Name: My ThemeTheme URI: http://blog.adam.coDescription: My First Wordpress ThemeVersion: 1.0Author: Adam CoulombeAuthor 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 tagsfor you•A few examples of some useful template tags:
<?phpbloginfo('template_directory');?>
<?phpthe_date();?>
<?phpthe_permalink();?>
<?phpbloginfo('stylesheet_url');?>
Outputs the directory of your template
Outputs the date of the post/page
Outputs the url of the current page
Outputs the URL of your style.css
Outputs a list of all your pages
Outputs the name of the page’s author
(Outputting the title & content of the post/page)
<?phpwp_list_pages('title_li=');?>
<?phpthe_author();?>
SAMPLE “LOOP”<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?><?php endwhile; endif; ?>
using images in yourtemplate•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/
•Traditionally, you may be used to seeing your stylesheet being linked like so:
•For your wordpress template, you must use the appropriate template tag to ensure your stylesheet is linked properly:
how to link the css
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
•Theimagesarelocatedinthisfolder: blog.adam.co/wp-content/themes/my-theme/images
•Youneedtoprovidethecorrectimagepathsotheycanbeaccessedfromanypage!
•This template tag will automatically link the images properly :)
•
•
images broken?CASE:
YOU COULD:
EVEN BETTER:
<img src="http://blog.adam.co/wp-content/themes/my-theme/images/myimage.jpg" />
<img src="<?php bloginfo('template_directory'); ?>/images/myimage.jpg" />
•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.
adding different tem-plates
•page.php is just one example, you can create as many templates as you like, even for specific pages.
the template hierarchy
Source: http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
•Dividing your HTML into portions allows you to re-use common portions of your HTML code that may appear in more than one
dividing your template
It is convention to separate the HTML portions of your header, sidebar and footer into their own php files, respectively.
•Once you have divided your template, it will look much smaller and be more manageable
dividing your template
before after<html>
<head>
<title>My Template</title>
</head>
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="sidebar"></div>
<div id="footer">...</div>
</body>
</html>
<?php get_header(); ?>
<div id="content">...</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The template tags <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?> are used to include their respective portions.
