WEB APPLIC APPLICA ATIONS TIONS 2

CREATING A WORDPRESS THEME CLASS 3

GRAP362

WHAT IS A WORDPRES WHAT WORDPRESSS THEME A Wordpress theme is simply a older that contains o PHP, CSS & images that are used as a “page wrap” or the pages you create in the CMS.

•

A “bare mininum” Wordpress theme consists o AT LEAST the ollowing:

•

ABOUT STYLE.CSS style.css will serve as your main stylesheet, exactly like you have •style.css done in the past

The lename must be called style.css s tyle.css

•

style.css must contain a comment stating various inormation about your theme at the top o the document, 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 le that will serve as the main template or your theme. It must have the .php extension because it will contain “template tags” wherever dynamic content is to be placed

•

a ew template tags or you A ew examples o some useul template tags:

•

 Outputs the date o the post/page

 Outputs the URL o your style.css style.css

Outputs a list o all your pages

Outputs the directory o your template

 Outputs the name o the page’s author Outputs the url o the current page

SAMPLE “LOOP” (Outputting the title & content o the post/page)     

      

using images in your template When creating a theme, it is good practice to place your images in their own older within your theme older

•

This is not a required convention, but its more organized

•

uploading your your theme The easiest way to upload u pload your theme theme is using FTP All your theme olders go into:

• •

~wordpress~/wp-content/themes/

how to link the css 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 linked properly:

•

  

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

•Youneed ouneedtoprovi toprovidet dethec hecorr orrect ectima imagepa gepaths thsoth othey ey canbeaccessedfromanypage!

YOU COULD:

•

  

EVEN BETTER:

•

   /images/myimage.jpg"

This template tag will automatically link the images properly :) 

•

adding dierent templates You are not limited to having a single template!

•

By deault, all your pages & posts etc.. will use index.php as their template Say yo you u wanted to make a separate template to use on all “pages”, you would add another php le called page.

•

•

the template template hierarch hierarchy y page.php is just one example, you can create as many templates as you like, even or specic pages.

•

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

dividing your template Dividing your HTML HTML into portions allows a llows you to re-use common portions o your HTML code that may appear in more than one

•

It is convention to separate the HTML portions o your header, sidebar and ooter into their own php fles, respectively.

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

•

beore            

afer      ">...