WP theming

From Things and Stuff Wiki
Revision as of 02:17, 9 September 2012 by Milk (talk | contribs) (→‎Sidebars)
Jump to navigation Jump to search

todo; fill out, rearrange and link up

Templates

Adding styles and scripts

Or wp_register_style/script with details then wp_enqueue_style on the registered item to choose when to load. Maybe wrapped up as a function and called with add_action 

// Using your own version number: 1.1.0
wp_enqueue_style('my-stylesheet', 'url-to-stylesheet', array(), '1.1.0');
wp_enqueue_script('my-script', 'url-to-script', array(), '1.1.0');
// Using a NULL value to hide the version number completely
wp_enqueue_style('my-stylesheet', 'url-to-stylesheet', array(), NULL);
wp_enqueue_script('my-script', 'url-to-script', array(), NULL); [1]

or ending; 

, false, null);

Theme Features

  • Theme Features allows a theme to register support of a certain feature. Theme support functions should be called in the theme's functions.php file to work.

Navigation menu

Does not kick in until Menu is created in Apperance > Menus and linked with appropriate theme menu area. If not set, falls back to showing all page links.

Settings API

  • Settings API - Allows admin pages containing settings forms to be managed semi-automatically. It lets you define settings pages, sections within those pages and fields within the sections.
    • Example given for choosing a background image.

Options API

  • Options API - a simple and standardized way of storing data in the database. The API makes it easy to create, access, update, and delete those options. All the data is being stored in the wp_options table under a given custom name. This page contains the technical documentation use the Options API.

Theme Options

  1. Copy “options.php” from the Options Check theme into your own theme.
  2. Edit the array in “options.php” to define the options you want to use.
  3. Add the following function to your theme so it will use default settings even if the Options Framework plugin is not installed:
/*
* Helper function to return the theme option value. If no value has been saved, it returns $default.
* Needed because options are saved as serialized strings.
*
* This code allows the theme to work without errors if the Options Framework plugin has been disabled.
*/
if ( !function_exists( 'of_get_option' ) ) {
function of_get_option($name, $default = false) {
   $optionsframework_settings = get_option('optionsframework');
   // Gets the unique option id
   $option_name = $optionsframework_settings['id'];
   if ( get_option($option_name) ) {
       $options = get_option($option_name);
   }
   if ( isset($options[$name]) ) {
       return $options[$name];
   } else {
       return $default;
   }
 }
}

Preprocess

See also preprocess, sass.

Sass/SCSS

  • wp-sass - This plugin allows you to write and edit .sass and .scss files directly and have WordPress do the job of compiling and caching the resulting CSS. It eliminates the extra step of having to compile the files into CSS yourself before deploying them.
    • uses phpsass!

install; 

git clone git://github.com/sanchothefat/wp-sass.git wp-sass
git submodule update --init --recursive

functions.php: 

<?php

// Include the class (unless you are using the script as a plugin)
require_once( 'wp-sass/wp-sass.php' );

// enqueue a .scss style sheet
if ( ! is_admin() )
   wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.scss' );
else
   wp_enqueue_style( 'admin', get_stylesheet_directory_uri() . '/admin.sass.php' );

// you can also use .scss files as mce editor style sheets
add_editor_style( 'editor-style.scss' );

?>

You can also create .sass.php or .scss.php files that will be preprocessed in the WordPress context. What this means is that you can use WordPress functions within the stylesheets themselves eg: 

$red: <?php echo get_option( 'redcolour', '#c00' ); ?>;

body {
  background: $red;
}

LESS

  • WP-LESS - Implementation of LESS (Leaner CSS) in order to make themes development easier.
    • uses lessphp v0.3.1, plugin-toolkit.

Process, etc.

  • Theme Review - Guidelines for designing and developing WordPress Themes plus WordPress Theme Directory standards and practices.

Theme customizer in 3.4 - still need to grok relation to Settings API, etc...

Process

  • Use base theme
    • HTML5
    • Mobile first
      • Make sure mobile devices don't get desktop size CSS or content
      • 320 And Up
    • If available, use server-side CSS preprocessing through theme or plugin.
      • LESS and limited SCSS/Compass in PHP (all shared), full SCSS/etc. with Ruby (easier on VPS)
      • Semantic CSS with grid and vertical rhythm systems
      • Web fonts and icons
  • Etc.

GUI

Testing

Layout

Sidebars

<?php $args = array(
   'name'          => sprintf(__('Sidebar %d'), $i ),
   'id'            => 'sidebar-$i',
   'description'   => '',
   'class'         => '',
   'before_widget' => '<li id="%1$s" class="widget %2$s">',
   'after_widget'  => '</li>',
   'before_title'  => '<h2 class="widgettitle">',
   'after_title'   => '</h2>' ); ?>

functions.php; 

register_sidebar(array('name'=>'highlight'));

Excerpts

Widgets

Template

not tried

Typography

quick webfont plugin hack;

Performance

Minify; http://bit51.com/prepare-your-wordpress-theme-to-be-minified/

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=WP_theming&oldid=4381"