Spirit892
12-09-2004, 08:49 PM
The popular publishing/blogging system known as wordpress has recently added a new feature to it's beta versions. The new feature allows the blogger to create themes or skins for the weblog. This tutorial will teach you how to create themes for you blog.
1. Create a folder in the /wp-content folder called themes
2. Create a folder inside themes for the new skin (we'll call it 1)
3. Inside the folder 1, upload the following files: index.php, wp-comments.php, wp-comments-popup.php, wp-comments-post.php, wp-layout.css (edit to fit your new theme) and wp-sidebar.php
*Note: Make sure you leave the those files in the main directory as well for your first theme.
4) Take the wp-header.php file and the wp-footer.php file and rename them to header.php and footer.php. Upload them to the 1 theme folder
5) Add the following to your index.php file:
<?php include "header.php"; ?>
Add that at the very top
<?php include "wp-sidebar.php"; ?>
<?php include "footer.php"; ?>
Add those two at the very bottom.
6) Chmod all those files to 766 so you can edit them in the wp-admin panel.
7) You should now have 2 themes, your main one and the one you just created. You can create as many themes as you want using the same technique.
I have included below a plugin that lets your users select the theme they want to use. Just follow the directions in the code and it should work. I didn't write the code, so do not ask me if you want to alter it. The author's name is included in the code.
<?php
/*
Plugin Name: Theme Switcher
Plugin URI: http://wordpress.org/
Description: Allow your readers to switch themes.
Version: 0.1
Author: Ryan Boren
Author URI: http://boren.nu/
Adapted from Alex King's style switcher.
http://www.alexking.org/software/wordpress/
To use, add the following to your sidebar menu:
<li>Themes:
<?php wp_theme_switcher(); ?>
</li>
This will create a list of themes for your readers to select.
If you would like a dropdown box rather than a list, add this:
<li>Themes:
<?php wp_theme_switcher('dropdown'); ?>
</li>
*/
function ts_set_theme_cookie() {
$expire = time() + 30000000;
$urlinfo = parse_url(get_settings('siteurl'));
$path = $urlinfo['path'];
$domain = $urlinfo['host'];
if (!empty($_GET["wptheme"])) {
setcookie("wptheme"
,stripslashes($_GET["wptheme"])
,$expire
,$path
,$domain
);
header("Location: ".get_settings('siteurl').'/');
}
}
function ts_get_theme() {
if (!empty($_COOKIE["wptheme"])) {
return $_COOKIE["wptheme"];
} else {
return '';
}
}
function ts_get_template($template) {
$theme = ts_get_theme();
if (empty($theme)) {
return $template;
}
$theme = get_theme($theme);
if (empty($theme)) {
return $template;
}
return $theme['Template'];
}
function ts_get_stylesheet($stylesheet) {
$theme = ts_get_theme();
if (empty($theme)) {
return $stylesheet;
}
$theme = get_theme($theme);
if (empty($theme)) {
return $stylesheet;
}
return $theme['Stylesheet'];
}
function wp_theme_switcher($style = "text") {
$themes = get_themes();
$default_theme = get_current_theme();
if (count($themes) > 1) {
$theme_names = array_keys($themes);
natcasesort($theme_names);
$ts = '<ul id="themeswitcher">'."\n";
if ($style == 'dropdown') {
$ts .= '<li>'."\n"
. ' <select name="themeswitcher" onchange="location.href=\''.get_settings('siteurl').'/index.php?wptheme=\' + this.options[this.selectedIndex].value;">'."\n" ;
foreach ($theme_names as $theme_name) {
if ((!empty($_COOKIE["wptheme"]) && $_COOKIE["wptheme"] == $theme_name)
|| (empty($_COOKIE["wptheme"]) && ($theme_name == $default_theme))) {
$ts .= ' <option value="'.$theme_name.'" selected="selected">'
. htmlspecialchars($theme_name)
. '</option>'."\n"
;
} else {
$ts .= ' <option value="'.$theme_name.'">'
. htmlspecialchars($theme_name)
. '</option>'."\n"
;
}
}
$ts .= ' </select>'."\n"
. '</li>'."\n"
;
} else {
foreach ($theme_names as $theme_name) {
$display = htmlspecialchars($theme_name);
if ((!empty($_COOKIE["wptheme"]) && $_COOKIE["wptheme"] == $theme_name)
|| (empty($_COOKIE["wptheme"]) && ($theme_name == $default_theme))) {
$ts .= ' <li>'.$display.'</li>'."\n";
} else {
$ts .= ' <li><a href="'
.get_settings('siteurl').'/'. 'index.php'
.'?wptheme='.urlencode($theme_name).'">'
.$display.'</a></li>'."\n";
}
}
}
$ts .= '</ul>';
}
echo $ts;
}
ts_set_theme_cookie();
add_filter('template', 'ts_get_template');
add_filter('stylesheet', 'ts_get_stylesheet');
?>
1. Create a folder in the /wp-content folder called themes
2. Create a folder inside themes for the new skin (we'll call it 1)
3. Inside the folder 1, upload the following files: index.php, wp-comments.php, wp-comments-popup.php, wp-comments-post.php, wp-layout.css (edit to fit your new theme) and wp-sidebar.php
*Note: Make sure you leave the those files in the main directory as well for your first theme.
4) Take the wp-header.php file and the wp-footer.php file and rename them to header.php and footer.php. Upload them to the 1 theme folder
5) Add the following to your index.php file:
<?php include "header.php"; ?>
Add that at the very top
<?php include "wp-sidebar.php"; ?>
<?php include "footer.php"; ?>
Add those two at the very bottom.
6) Chmod all those files to 766 so you can edit them in the wp-admin panel.
7) You should now have 2 themes, your main one and the one you just created. You can create as many themes as you want using the same technique.
I have included below a plugin that lets your users select the theme they want to use. Just follow the directions in the code and it should work. I didn't write the code, so do not ask me if you want to alter it. The author's name is included in the code.
<?php
/*
Plugin Name: Theme Switcher
Plugin URI: http://wordpress.org/
Description: Allow your readers to switch themes.
Version: 0.1
Author: Ryan Boren
Author URI: http://boren.nu/
Adapted from Alex King's style switcher.
http://www.alexking.org/software/wordpress/
To use, add the following to your sidebar menu:
<li>Themes:
<?php wp_theme_switcher(); ?>
</li>
This will create a list of themes for your readers to select.
If you would like a dropdown box rather than a list, add this:
<li>Themes:
<?php wp_theme_switcher('dropdown'); ?>
</li>
*/
function ts_set_theme_cookie() {
$expire = time() + 30000000;
$urlinfo = parse_url(get_settings('siteurl'));
$path = $urlinfo['path'];
$domain = $urlinfo['host'];
if (!empty($_GET["wptheme"])) {
setcookie("wptheme"
,stripslashes($_GET["wptheme"])
,$expire
,$path
,$domain
);
header("Location: ".get_settings('siteurl').'/');
}
}
function ts_get_theme() {
if (!empty($_COOKIE["wptheme"])) {
return $_COOKIE["wptheme"];
} else {
return '';
}
}
function ts_get_template($template) {
$theme = ts_get_theme();
if (empty($theme)) {
return $template;
}
$theme = get_theme($theme);
if (empty($theme)) {
return $template;
}
return $theme['Template'];
}
function ts_get_stylesheet($stylesheet) {
$theme = ts_get_theme();
if (empty($theme)) {
return $stylesheet;
}
$theme = get_theme($theme);
if (empty($theme)) {
return $stylesheet;
}
return $theme['Stylesheet'];
}
function wp_theme_switcher($style = "text") {
$themes = get_themes();
$default_theme = get_current_theme();
if (count($themes) > 1) {
$theme_names = array_keys($themes);
natcasesort($theme_names);
$ts = '<ul id="themeswitcher">'."\n";
if ($style == 'dropdown') {
$ts .= '<li>'."\n"
. ' <select name="themeswitcher" onchange="location.href=\''.get_settings('siteurl').'/index.php?wptheme=\' + this.options[this.selectedIndex].value;">'."\n" ;
foreach ($theme_names as $theme_name) {
if ((!empty($_COOKIE["wptheme"]) && $_COOKIE["wptheme"] == $theme_name)
|| (empty($_COOKIE["wptheme"]) && ($theme_name == $default_theme))) {
$ts .= ' <option value="'.$theme_name.'" selected="selected">'
. htmlspecialchars($theme_name)
. '</option>'."\n"
;
} else {
$ts .= ' <option value="'.$theme_name.'">'
. htmlspecialchars($theme_name)
. '</option>'."\n"
;
}
}
$ts .= ' </select>'."\n"
. '</li>'."\n"
;
} else {
foreach ($theme_names as $theme_name) {
$display = htmlspecialchars($theme_name);
if ((!empty($_COOKIE["wptheme"]) && $_COOKIE["wptheme"] == $theme_name)
|| (empty($_COOKIE["wptheme"]) && ($theme_name == $default_theme))) {
$ts .= ' <li>'.$display.'</li>'."\n";
} else {
$ts .= ' <li><a href="'
.get_settings('siteurl').'/'. 'index.php'
.'?wptheme='.urlencode($theme_name).'">'
.$display.'</a></li>'."\n";
}
}
}
$ts .= '</ul>';
}
echo $ts;
}
ts_set_theme_cookie();
add_filter('template', 'ts_get_template');
add_filter('stylesheet', 'ts_get_stylesheet');
?>