Is there a way to package a theme in WP? When I say theme, I mean all the HTML, CSS, JS, custom post types, etc.
I see these things often on sites like ThemeForest where they have a WP theme for sale. I'd like to do the same for a design of mine that has already been converted into HTML/CSS/etc.
I'm just not familiar with the terminologies, so I'm not sure what to look up.
For HTML, CSS, JS:
The theme files (actually PHP, CSS and JS) are found in your theme folder. Each PHP file there has its own role based on the template hierarchy. CSS and JS files are also present in the theme folder and are called using wp_register_style and wp_enqueue_style for CSS and wp_register_script and wp_enqueue_script for JS.
For custom post types:
The WordPress theme folder contains a file called functions.php in which you can define your own functions used for that theme. You can add a register_post_type function to that file to define your own custom post types. register_post_type should be hooked to init. Example taken from the WordPress Codex:
function codex_custom_init() {
$args = array( 'public' => true, 'label' => 'Books' );
register_post_type( 'book', $args );
}
add_action( 'init', 'codex_custom_init' );
If you add the above example to your functions.php file, you will get a new post type called Books.
Custom Variables:
If you want to save site-wide variables, the Options API allows you to add, update, retrieve and delete those variables. Mixed with add_menu_page and the Settings API, you can create pages in the Dshboard where users can manage these variables.
Other things:
Similarly, you can add your custom taxonomies and widgets to that file and also add other hooks to modify WordPress Behaviour to suit your needs.
File structure is going to be variable, correlating to the scope of the project, but there are some industry best practices that you can follow to package your WordPress theme for deployment.
Envato provides extensive documentation on their submission guidelines and addresses formatting standards in a pretty comprehensive manner. Found here: http://support.envato.com/index.php?/Knowledgebase/Article/View/352/0/general-file-preparation-guidelines
Jeffrey Way, of Themeforest, also provides a step-by-step video screencast walkthrough of the file preparation and submission process for Themeforest templates that should serve as a great reference. Found here: http://blog.themeforest.net/site-news/how-to-submit-a-template-to-themeforest-screencast/
Hope this helps.
If you want to convert your existing HTML/CSS website to a WordPress theme you'll need to do quite a few things:
1. Rename your stylesheet to style.css and include a bit of metadata about your theme:
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)
License:
License URI:
General comments (optional).
Source: http://codex.wordpress.org/Theme_Development#Theme_Stylesheet
You also will need to include the WordPress CSS Core, which you can find here: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
2. Create an index.php file which will be used as "last resort", if no more specific page is found for the current page then this template will be used. More about the different templates you can find here: http://codex.wordpress.org/Template_Hierarchy
If you want a different style for your single pages you'll have to create a file single.php that file will be used for those pages. For the page with the blog posts, you'll use home.php,... See the link above for more file names.
3. Rather than placing the content directly in the files, which we obviously don't want when using WordPress you'll have to use "The Loop". You can read more about that here: http://codex.wordpress.org/The_Loop
Basically, it is an iteration that will loop over all the different posts of the page (category pages and blog home pages will have more posts than a single page).
The following code helped me a lot in understanding "The Loop":
<?php // any code included here occurs before the WordPress loop and is always displayed? >
<?php if (have_posts()) : ?>
<?php // if there are posts to display, process any code included here only once ?>
<?php // display any code output from this region above the entire set of posts ?>
<?php while (have_posts()) : the_post(); ?>
<?php // loop through posts and process each according to the code specified here ?>
<?php // process any code included in this region before the content of each post ?>
<?php the_content(); ?> <?php // this function displays the content of each post ? >
<?php // process any code included in this region after the content of each post ? >
<?php endwhile; ?>
<?php // stop the post loop and process any code included here only once ?>
<?php // any code output will be displayed below the entire set of posts ?>
<?php else : ?>
<?php // if there are no posts to display, process any code that is included here ?>
<?php // the output of any code included here will be displayed instead of posts ?>
<?php endif; ?>
<?php // any code included here occurs after the WordPress loop and is always displayed ?>
Source: http://perishablepress.com/easily-adaptable-wordpress-loop-templates/
WordPress theming is really hard to explain in just a single post, so I hope I helped you out to get you started, obviously, you'll still have to read a lot about it but that's perfectly normal, I look up functions in WordPress function reference every day... so one last link: http://codex.wordpress.org/Function_Reference/
Good luck!
