How to Create a New Theme With Thematic
The Thematic theme framework for WordPress offers a clean and powerful foundation for building website designs. Its control panel allows users to easily configure and customize aspects of the theme's layout and colors, which makes it a popular choice among designers for their clients. Thematic is built using custom functions and template "hooks," and it employs "Child Themes" to allow designers to create different looks. A Child Theme can be designed similar to any normal Web page. Place WordPress and Thematic template tags within specific areas of the HTML document that allow it to be used with the Thematic system.
Other People Are Reading
Instructions
-
-
1
Create a new folder and name it after your new theme. Open your Thematic theme folder and copy the contents of the "thematicsamplechildtheme" folder into your new theme folder. This is the foundation for your new Child Theme.
-
2
Launch your favorite HTML or text editor and open the "style.css" file found in your Child Theme folder. This file will contain the primary layout information for your theme. Begin by replacing the "Theme Name" value with your desired theme name. Add your "Theme URL," which can be your website address. Edit the description, author and author URL, but leave the "Template: Thematic" entry as-is. This entry tells WordPress to use Thematic as your theme's framework.
-
-
3
Remove the following line linking to Thematic's "default.css" file:
@import URL('../thematic/library/styles/default.css');
You will want to create your own styles for your Child Theme, and the easiest way to do it is to copy the default styles to your new style sheet.
-
4
Open the "default.css" file located in the Thematic template directory under "library >styles." Copy the entire contents of the page and paste it below the existing content in your Child Theme's style.css document. Edit the styles as desired, then save your changes. If you wish to create your own styles for fonts and text, repeat these steps to remove the line linking to "typography.css" and copy its contents into your style.css document to be edited.
-
5
Open the "functions.php" file from within your Child Theme folder. This file controls what information will be pulled in by each Thematic hook in the framework templates or in your own replacement templates. Edit the existing functions where desired. You also may create your own "action hooks" or add custom theme filters to this document. The Thematic website contains an extensive library of documentation for both.
For example, if you are building your new Child Theme to use the HTML5 standard, you can insert the following filter between the "}" and "?>" at the bottom of the document:
function childtheme_create_doctype($content) {
$content = '<!DOCTYPE html>';
$content .= "\n";
$content .= '<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->"';
return $content;
}
add_filter('thematic_create_doctype', 'childtheme_create_doctype');
-
6
Open the files located in the Extensions folder inside the Thematic template folder. Each of these files contains functions pertaining to specific pieces of code that make up the overall design. If you have created a layout in HTML, copy the functions into your Child Theme's functions.php file and edit the "$content = " values with your custom code. Only one line of code should go into each content statement, and you can add more if necessary by entering a new line such as:
$content = ' ' . "\n";
-
7
Upload your new Child Theme to your main "wp-content/themes" directory and activate it in your WordPress administration panel. You may continue to edit your styles and tweak your function contents in the Appearance Editor, while viewing your changes in the browser.
-
1
Tips & Warnings
Use Opera's "Inspect Element" option from the right-click menu to easily determine which styles are applied to an element in the template and edit where required. A similar function is available in Firefox by downloading the "Firebug" add-on.
Edit the functions.php file with care and make sure you understand the syntax. If you get a blank white screen, review the code for missing semi-colons or single quotes and re-read the Theme Hooks reference guide if needed.
References
- Photo Credit BananaStock/BananaStock/Getty Images
