WordPress Themes

From Fishcakes Wiki

Jump to: navigation, search

Edit Menu

Edit Menu

Image:Icon_Wordpress_40px.png WordPress Themes

This page contains info about using Themes to change the look and feel of a WordPress website.

See also the Best WordPress Themes page.

Contents

About WordPress Themes

WordPress Themes are made up of a series of PHP Templates.

WordPress and YUI

WP-PagesNav

  • WP-PagesNav — creates page list with unique css classes. Nice, but dumps the sub-pages at the bottom of the list and not embedded as it should be. 
<div id="pages_nav">
   <?php if(function_exists("wp_pages_nav")) {
   wp_pages_nav("show_all_parents=1&sort_column=menu_order");
   } ?>
</div>

STS Dropdown

  • STS Dropdown — creates a dropdown menu for static pages and subpages, links, categories and archive.
display pages: 
<?php sts_list_pages('exclude=&sort_column=menu_order&title_li=' ); ?>
display links: 
<?php sts_links_list(); ?>
display categories:
<?php sts_list_cats('sort_column=name&optioncount=1&hierarchical=1'); ?>
display archives: 
<?php sts_get_archives('type=monthly'); ?>

display all: 

<?php sts_list_pages('exclude=&sort_column=menu_order&title_li=' ); ?>
<?php sts_links_list(); ?><?php sts_list_cats('sort_column=name&optioncount=1&hierarchical=1'); ?>
<?php sts_get_archives('type=monthly'); ?>

CSS Drop-down Menu

  • Suckerfish Plugin — Ryan Hellyer's CSS dropdown plugin. Just seems to work. To use, just install the plugin and add the following code to your theme's header.php (see Suckerfish Demo to see the menus in action):
    • <?php suckerfish(); ?> — Home Page button plus Pages, Archives, Categories and Blogroll dropdowns.
    • <?php suckerfish1(); ?> — Pages only menu (sub-pages dropdowns).
    • <?php suckerfish2(); ?> — Home Page button added to the Pages only menu (not needed for static home page).
    • <?php suckerfish3(); ?> — Pages, Archives, Categories and Blogroll dropdowns.
    • <?php suckerfish4(); ?> — first level Pages (with sub-pages dropdowns), followed by Archives and Categories dropdowns.
    • <?php suckerfish5(); ?> — first level Pages (with sub-pages dropdowns), followed by Archives and Categories dropdowns plus Home page button.

Also rans

WordPress K2 Advanced Template

  • Advanced template for the Wordpress blogging engine.
  • http://getk2.com
  • Features:
    • Semantic XHTML, CSS and JS structure.
    • Supports custom CSS files, the so-called 'styles'.
    • Smart layout adapts to needs.
    • Fully configureable from options page.
    • Upload and manage custom headers.
    • Sidebar Modules comes bundled (with special K2 modules) and support WordPress Widgets.
    • Live comment posting.
    • Livesearch.
    • Rolling Archives.
    • Dozens of plugins supported out-of-the-box.
    • Fam fam fam icons
  • See also code.google.com/p/kaytwo/wiki/WhatisK2 overview article.

Template File Structure

Required Template Files

Every theme has at least two files:

  • style.css — controls the look of the site.
  • index.php — controls all the other files.

The file index.php also contains the HTML layout for the page and the WP Loop function.

Optional Template Files

You can also breakdown the HTML layout into separate template files:

  • header.php — header info 
 <?php get_header(); ?>
  • footer.php — footer info 
 <?php get_footer(); ?>
  • sidebar.php — sidebar info 
 <?php get_sidebar(); ?>
  • searchform.php — search box 
 <?php include (TEMPLATEPATH . '/searchform.php'); ?>
  • theloop.php — calls for your blog's entries. This can also be done in index.php
  • wp-comments.php — generate comments

See codex.wordpress.org Stepping into Templates

Optional Sub-Template Files

You can also have separate template files for various auto-generated pages:

  • archive.php — display archive page using the code: 
     <?php the_excerpt(); ?>
  • category.php — display category page
  • search.php — display search results
  • single.php — single post view to display single post
  • tbd.php — multi-post view to display posts summary list
  • page.php — customise look of pages. 
     <?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
  • comments.php — customise look of comments.

Typical Template Files

  • header.php
    • theloop.php
    • wp-comments.php
  • sidebar.php
    • searchform.php
  • footer.php

See codex.wordpress.org Template Hierarchy

Inside index.php

Template Variables

Primary Template Variables

the loop 
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
   <?php endwhile; ?>
<?php endif; ?>
blog title 
 <?php bloginfo('name'); ?>
blog description 
 <?php bloginfo('description'); ?>
blog url 
 <?php bloginfo('url'); ?>
post title 
 <?php the_title(); ?>
post link 
 <?php the_permalink() ?>
post content 
 <?php the_content(); ?>
insert text Filed under: 
 <?php _e('Filed under:'); ?>
post category 
 <?php the_category(', ') ?>
insert text by 
 <?php _e('by'); ?>
post author 
 <?php  the_author(); ?>
insert comments popup 
 <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
insert edit link (only visible to logged in Admin user) 
 <?php edit_post_link('Edit', ' | ', ); ?>
id number for each post 
 <?php the_ID(); ?>
posts previous next navigation links 
 <?php posts_nav_link(); ?>
 <?php posts_nav_link('in between','before','after'); ?>
insert theme relative url 
 <?php bloginfo('stylesheet_directory'); ?>

Sidebar Template Variables

display pages li list 
<?php wp_list_pages(); ?>
<?php wp_list_pages('depth=3&title_li=<h2>My Pages</h2>'); ?>
  depth=3
  title_li='content for title'
display categories li list 
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
  sort_column=name
  optioncount=1
  hierarchical=0
display archives li list 
<?php wp_get_archives('type=monthly'); ?>
  type=monthly
 
<li>
  <h2><?php _e('Archives'); ?></h2>
  <ul>
     <?php wp_get_archives('type=monthly'); ?>
  </ul>
</li>
links li list 
<?php get_links_list(); ?>
search form — must have searchform.php defined first. 
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
 
<li id="search">
  <?php include(TEMPLATEPATH . '/searchform.php'); ?>
</li>
calendar 
<li id="calendar">
  <h2><?php _e('Calendar'); ?></h2>
  <?php get_calendar(); ?>
</li>
meta for login/logout, register and admin 
<li>
   <h2><?php _e('Meta'); ?></h2>
  <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <?php wp_meta(); ?>
  </ul>
</li>

Sidebar Widget Variables

You must first enable widgets in functions.php 

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
  insert alternative
<?php endif; ?>

Theme Screenshot

To add a screenshot to your theme:

  1. Create screenshot image 300x225 px.
  2. Save it as screenshot.png (PNG file).
  3. Place your image file in the theme’s folder.


Image:Icon Resources 20px.png WordPress Links

Official WordPress Links

WordPress Themes

WordPress Plugins

  • wp-fun.co.uk — generates an outline template for a plugin. Excellent place to start your plugin.

Unofficial WordPress Links

Excellent WordPress Sites


Retrieved from "http://wiki.fishcakes.biz/WordPress_Themes"
Personal tools