Anatomy of a Theme
WordPress Themes live in subdirectories of the WordPress themes directory (wp-content/themes/ by default) which cannot be directly moved using the wp-config.php file. The Theme's subdirectory holds all of the Theme's stylesheet files, template files, and optional functions file (functions.php), JavaScript files, and images. For example, a Theme named "test" would reside in the directory wp-content/themes/test/. Avoid using numbers for the theme name, as this prevents it from being displayed in the available themes list.WordPress includes a default theme in each new installation. Examine the files in the default theme carefully to get a better idea of how to build your own Theme files.
For a visual guide, see this infographic on WordPress Theme Anatomy.
WordPress Themes typically consist of three main types of files, in addition to images and JavaScript files.
The stylesheet called style.css, which controls the presentation (visual design and layout) of the website pages.
WordPress template files which control the way the site pages generate the information from your WordPress database to be displayed on the site.
The optional functions file (functions.php) as part of the WordPress Theme files.
Document Head (header.php)
- Use the proper DOCTYPE.
- The opening <html> tag should include language_attributes().
- The <meta> charset element should be
placed before everything else, including the <title> element.
- Use bloginfo() to set the <meta> charset and description
elements.
- Use wp_title() to set the <title> element. See why.
- Use Automatic Feed Links to add feed links.
- Add a call to wp_head() before the closing </head> tag. Plugins use this action hook to add their own
scripts, stylesheets, and other functionality.
- Do not link the theme stylesheets in the Header
template. Use the wp_enqueue_scripts
action hook in a theme function instead.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
Navigation Menus (header.php)
- The Theme's main navigation should support a
custom menu with wp_nav_menu().
- Menus should support long link
titles and a large amount of list items. These items should not break the
design or layout.
- Submenu items should display
correctly. If possible, support drop-down menu styles for submenu items.
Drop-downs allowing showing menu depth instead of just showing the top
level.
Widgets (sidebar.php)
- The Theme should be widgetized as fully as
possible. Any area in the layout that works like a widget (tag cloud,
blogroll, list of categories) or could accept widgets (sidebar) should
allow widgets.
- Content that appears in widgetized areas by
default (hard-coded into the sidebar, for example) should disappear when
widgets are enabled from Appearance > Widgets.
Footer (footer.php)
- Use the wp_footer() call, to appear just
before closing body tag.
<?php wp_footer(); ?>
</body>
</html>
No comments:
Post a Comment