Theme Development and Customization

THEME DEVELOPMENTAND CUSTOMIZATION

By / Aniket Pant @aniket_pant

http://aniketpant.com/

http://twitter.com/aniket_pant

PREVIEW1. Basic Concepts2. Stylesheets3. Functions4. Templates5. Child Themes6. Bones

WHAT IS WORDPRESS?

CONTENTMANAGEMENT

SYSTEM

WHAT IS A THEME?As per the codex —

“ Fundamentally, the WordPress Themesystem is a way to “skin” your weblog. Yet,it is more than just a “skin.” Skinning your

site implies that only the design is changed.WordPress Themes can provide much

more control over the look andpresentation of the material on your

website. ”

By at #frontend2011

“ In Web design, we should all becraftsmen or craftswomen. We should

break the frame and explore the unknown.”

Simon Collison

http://twitter.com/colly

WHAT MAKES A THEME?Theme StylesheetsFunction FilesTemplate Files

THEME STYLESHEETSThis is the theme information of Bones

/****************************************************************** Theme Name: Bones Theme URI: http://www.themble.com/bones Description: An incredibly simple starter theme for developers. Author: Eddie Machado Author URI: http://www.themble.com/bones/ Version: 1.07 Tags: html5, framework, css3, development

License: GPL or whatever License URI: ? All Default Styles are in library/css/default.css I recommend not editing those files and making all changes here. That way if something goes awry, you can easily revert back to the original, but that's totally up to you. Happy Developing! ******************************************************************/

FUNCTIONS FILEYou can put in your custom PHP codes in this file to

modify some core functions of your theme.

It is often used to insert 2 sidebars, change the number ofcharacters in the excerpt, add custom admin panels or a

new type of post.

“Put in your entire hand coded functions, tailor made for yourtheme.”

EXAMPLE #1function bones_excerpt() { the_excerpt(); echo '<br />'; echo '<p><a href='".get_permalink()."'> Read More...</a></p>';}

EXAMPLE #2function bones_register_sidebars() { register_sidebar(array( 'id' => 'sidebar1', 'name' => 'Sidebar 1', 'description' => 'The first (primary) sidebar.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widgettitle">', 'after_title' => '</h4>', )); }

TEMPLATE FILESstyle.css index.php comments.php home.phpsingle.php single-.php search.php attachment.phpimage.php 404.php page.php category.phptag.php taxonomy.php author.php date.php

THE HEADER<!doctype html> <head> <meta charset="utf-8"> <title><?php wp_title( '-', true, 'right' ); bloginfo( 'name' ); ?></title> <link rel="shortcut icon" href="/favicon.ico"> <link rel="pingback" href=""> <?php wp_head(); ?> <link rel="stylesheet" href=""> </head> <body <?php body_class(); ?>> <div id="container"> <header role="banner"> ... </header>

THE CONTENT<?php get_header(); ?> <div id="content" class="clearfix"> <div id="main" class="col700 left clearfix" role="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article id="post-"> <header> <h1 class="h2"><?php the_title(); ?></h1> </header> <section class="post_content clearfix"> Read more on "'.the_title('', '', false).'" »', "bonestheme")); ?> </section> <footer> ... </footer> <?php comments_template(); ?> <?php endwhile; ?> <?php else : ?> <article id="post-not-found"> <header> <h1>Not Found</h1> </header> <section class="post_content"> <p>Sorry, but the requested resource was not found on t

THE MIGHTY LOOP

THE LOOPThis is what you see.

It will contain The Loop.The Loop is the key to printing all your posts.

This is how it starts:

And this is the end:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?>

<?php endif; ?>

SINGLE POST TYPE

SINGLE-<POST-TYPE>.PHPAnother important feature in WordPress 3.0 is that you

can add your own Custom Post Type Boxes.

The default list –Post, Page, Attachment, Revisions, Nav Menus

REGISTER A POST TYPEAdd this to your function.php

register_post_type('movies', array( 'label' => 'Movies', 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'hierarchical' => false, 'rewrite' => array('slug' => 'movies'), 'query_var' => true, 'supports' => array( 'title', 'editor', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'thumbnail', 'author', 'page-attributes',) ) );

By at #frontend2011

“ The content is like water. And design islike a flavour sprinkled on content. ”

@standardistas

http://twitter.com/standardistas

“ People say Web Design is not coding, Icall that bullshit.

We design the web by coding. ”

CHILD THEMES

CHILD THEMESDerive something from another theme and what you get

is a Child Theme.

You can do absolutely anything with a Child Theme, butthe only difference between a new theme and a child

theme is that.It would be residing in the parent theme's directory.

BUILD A CHILD THEMEJust make a directory in your parent theme directory.You

can name it anything.

You can put anything in this directory.So, if it's just astyling change you wish to make, make a style.css

There are some required information that you need tomention in the child theme's CSS like –

Theme Name & Template.You can refer to the Codex regarding this.

WHAT WE HAVE COVEREDThe basic concepts of WordPressLittle on StylesheetsSome snippets on functionsMaking TemplatesBuilding Child ThemesMy favorite theme bones

“ We are the architects of the Web, andthis is our playground. ”

WHAT DO I DO?Read regularly.

Visit daily.

Read about typography.

Read anything and everything about CSS.

Smashing Magazine

Hacker News

http://smashingmagazine.com/

http://news.ycombinator.com/

QUESTIONS?

THE ENDBY ANIKET PANT / @ANIKET_PANT

Theme Development and Customization

Technology

Transcript of Theme Development and Customization