Tijdje terug heb ik aangegeven jullie mee te nemen in het proces hoe van Thematic naar een Child Theme te gaan hier op WP Dimensie. Vandaag deel 1. Zoals je nu ziet kun je zien dat WP Dimensie er al anders uit ziet dan de standaard Thematic theme en daarnaast gedraagt het huidige design zich op een aantal vlakken ook anders.
Ik weet niet of ik een standaard ga hanteren hoe ik de wijzigingen door ga voeren, maar in dit geval begin ik gewoon van boven naar beneden. Mijn intentie in eerste instantie was de designelementen van het vorige design te implementeren in deze versie. Te denken valt aan de volgende elementen:
- toevoegen van topnavbar inclusief twitter, rss feed, rss reacties
- menu overnemen (inclusief dropdown van categorieën)
- CSS voor WP125 plugin overnemen.
- CSS voor WP-Page-Navi overnemen.
Bij het maken van een childtheme heb je de mogelijkheid om enkel via functions.php alle wijzigingen ten opzichte van de Parent Theme te definiëren, maar uiteraard kun je ook je eigen versie van bijvoorbeeld header.php gebruiken. Ik heb gebruik gemaakt van een combinatie van deze mogelijkheden. Om te kunnen vergelijken is het handig in een apart venster de demo site van Thematic te openen.
Childtheme voorbereiden
Als eerste zul je een folder in the /wp-content/themes/ directory moeten hebben staan waar je childtheme bestanden in komen te staan. De meest makkelijke manier is de map thematicsamplechildtheme
Pas dan ook gelijk het style.css bestand aan zodat deze passend is. In mijn geval ziet deze er als volgt uit:
[css]/*
Theme Name: WordPress Dimensie
Theme URI: http://www.casinodimensie.nl
Description: WordPress Dimensie child theme op basis van Thematic.
Author: Remkus de Vries
Author URI: http://www.forsitemedia.nl/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/
/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');
/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');
/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');
/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');
/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');[/css]
Nu maak ik zelf nog geen gebruik van een andere layout dan de standaard Thematic layout, maar zoals je hierboven kunt herleiden maak ik gebruik van een 2 column with the right column fixed layout en heb je dus de mogelijkheid deze layout aan te passen. Kijk maar eens in de thematic library folder en dan zul je zien wat voor opties er hier voorgedefinieerd zijn.
Topnavbar
Voor de zwarte rand, de top navigation bar, die je hierboven ziet heb ik gekozen om de deze te implementeren door een eigen versie van header.php te gebruiken in combinatie van wat CSS
Thematic gebruikt de volgende code in de header:
[php]<?php thematic_create_doctype(); echo " "; language_attributes(); echo ">\n";?>
<head profile="http://gmpg.org/xfn/11">
<?php
thematic_doctitle();
thematic_create_contenttype();
thematic_show_description();
thematic_show_robots();
thematic_canonical_url();
thematic_create_stylesheet();
thematic_show_rss();
thematic_show_commentsrss();
thematic_show_pingback();
thematic_show_commentreply();
wp_head(); ?>
</head>
<body class="<?php thematic_body_class() ?>">
<?php thematic_before(); ?>
<div id="wrapper" class="hfeed">
<?php thematic_aboveheader(); ?>
<div id="header">
<?php thematic_header() ?>
</div><!-- #header-->
<?php thematic_belowheader(); ?>
<div id="main">
[/php]
Hier heb ik op de juiste plek de topnavbar geïntegreerd:
[php]<?php thematic_create_doctype(); echo " "; language_attributes(); echo ">\n";?>
<head profile="http://gmpg.org/xfn/11">
<?php
thematic_doctitle();
thematic_create_contenttype();
thematic_show_description();
thematic_show_robots();
thematic_canonical_url();
thematic_create_stylesheet();
thematic_show_rss();
thematic_show_commentsrss();
thematic_show_pingback();
thematic_show_commentreply();
wp_head(); ?>
</head>
<body class="<?php thematic_body_class() ?>">
<?php thematic_before(); ?>
<div id="wrapper" class="hfeed">
<?php thematic_aboveheader(); ?>
<div id="topnav">
<div id="topnavbar">
<div class="topnavbarright">
<a class="twitterlink" rel="nofollow" href="http://twitter.com/wpdimension">Twitter</a>
<a class="rsslink" rel="nofollow" href="<?php bloginfo('rss_url'); ?>"><?php _e("RSS Feed", 'thematic'); ?></a>
<a class="rsslink" rel="nofollow" href="<?php bloginfo('comments_rss2_url'); ?>"><?php _e("RSS Reacties", 'thematic'); ?></a>
</div>
</div>
</div>
<div id="header">
<?php thematic_header() ?>
</div><!-- #header-->
<?php thematic_belowheader(); ?>
<div id="main">[/php]
De CSS die daar bij hoort:
[css]/************************************************
* Top Navbar *
************************************************/
#topnav {
background: #000000;
border-bottom: 1px solid #1F2B73;
}
#topnavbar {
width: 960px;
height: 25px;
color: #DDDDDD;
margin: 0px auto 0px;
padding: 0px;
}
#topnavbar a, #topnavbar a:visited {
font-size: 11px;
font-weight: bold;
color: #DDDDDD;
text-decoration: none;
margin: 3px;
}
#topnavbar a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#topnavbar p {
font-size: 11px;
font-weight: bold;
padding: 0px;
margin: 0px;
}
.topnavbarleft {
width: 260px;
float: left;
margin: 0px;
padding: 0px;
}
.topnavbarright {
width: 700px;
float: right;
margin: 0px;
padding: 2px 0px 0px 0px;
text-transform: capitalize;
text-align: right;
}
.topnavbarright a img {
border: none;
margin: 0px 3px 3px 0px;
padding: 0px;
}
.rsslink {
padding: 2px 5px 2px 20px;
background: url(images/rss.png) no-repeat left center;
}
.twitterlink {
padding: 2px 5px 2px 20px;
background: url(images/twitter.png) no-repeat left center;
}
#twitter_update_list{
list-style: none;
}
[/css]
Daarnaast heb ik gekozen om de achtergrondkleur van de header een licht grijze achtergrond te geven voor wat contrast met de content.
[css]/************************************************
* Header *
************************************************/
#header {
background: #f4f4f4;
}[/css]
Na het opslaan van de bovenstaande gegevens in je lokale versie van header.php en style.css hoef je deze bestanden enkel te uploaden naar je childtheme folder in /wp-content/themes/.
Menu + Home & Dropdown categories
Standaard kent Thematic geen home knop in het menu. Zelf vind ik 'm over het algemeen wel erg fijn om er bij te zien, maar strikt noodzakelijk is het natuurlijk niet met een klikbare header tekst. Daarnaast vind ik het voor de gebruiker prettig dat deze direct naar de categorie van keuze kan gaan. Mijn keuze valt dan op een dropdown in het menu. Beide menu aanpassingen zijn te realiseren via je functions.php bestand met de volgende snippets:
[php]//Adds home to menu
function childtheme_menu_args($args) {
$args = array(
'show_home' => 'Home',
'sort_column' => 'menu_order',
'menu_class' => 'menu',
'echo' => true
);
return $args;
}
add_filter('wp_page_menu_args','childtheme_menu_args');[/php]
In feite voeg je een nieuwe functie toe die je via een filter toevoegt aan de functie wp_page_menu_args. Hetzelfde doe je voor de dropdown:
[php]//Adds dropdown list of categories to menu
function add_childtheme_cat_menu($args) {
$categories = wp_list_categories('echo=0&title_li=<a href="#">Onderwerpen</a>&depth=2');
$args .= $categories . '';
return $args;
}
add_filter('wp_list_pages','add_childtheme_cat_menu');[/php]
CSS voor plugins
Aangezien ik niet tevreden ben met de CSS die door twee plugins, waar ik gebruik van maak, wordt geleverd , wil ik deze zelf aan kunnen passen. Gelukkig kan dat bij de meeste plugins vrij eenvoudig door een optie te selecteren dat je je eigen CSS wilt gebruiken. In het geval van WP-Page-Navi is dit niet het geval en zullen we eerst het laden van die CSS moeten stop zetten. Dit kan vrij eenvoudig door de volgende functie:
[php]// Remove Page Navi CSS
function childtheme_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
}
add_action( 'wp_print_styles', 'childtheme_deregister_styles', 100 );[/php]
Voor de WP125 plugin hoef ik niet veel meer te doen als de juiste CSS te definiëren in mijn stylesheet. De combinatie van deze twee CSS aanpassingen zien er dan als volgt uit:
[css]/************************************************
/* Plugins *
************************************************/
#wp125adwrap_2c {
width: 100%;
}
#wp125adwrap_2c .wp125ad {
width: 125px;
padding: 2px;
margin: 0px 0px 0px 0px;
border:none;
float: left;
}
.wp-pagenavi {
margin:0 0 0 0.5em;
padding:0.5em 0;
}[/css]
Concluderend
Alles bij elkaar zijn het nog maar kleine aanpassingen ten opzichte van het origineel, maar je ziet vast al wel dat je vrij eenvoudig je eigen theme definiëren / maken. Ondertussen heb ik al een paar meer aanpassingen gedaan, maar deze post is denk ik lang genoeg onderhand. Meer volgt. Vragen, aanvullingen, correcties? Ik hoor ze graag in de reacties!
Ik volg je met belangstelling.
Educatief gezien zou je je main theme beter even met rust kunnen laten en de wijzigingen in een gekloonde versie aanbrengen. Met een bijv. een linkje of knopje ‘wissel naar gewijzigde theme’ zou het één en ander wat aanschouwelijker gedemonstreerd kunnen worden zijn.
Cheerio!
Hé, dat laatste woordje ‘zijn’ hoort daar natuurlijk niet te staan. Ik vergeet (net als jij overigens) af en toe te checken op de correctheid van het nederlands alvorens te posten.
Haha.. tsja, nu kan ik me wel verschuilen achter het feit dat Nederlands mijn tweede taal is, maar je hebt gelijk; af en toe zul je foutjes tegen komen.
Ik heb zojuist een extra link toegevoegd naar de demo van Thematic zodat je deze kunt openen in een apart venster en kunt vergelijken. Hope this helps