Arun Kale has released a new version (1.3) of The Morning After.
The Morning After?
The Morning After is a magazine-style theme for WordPress. The theme design is grid-based and has the following features:
- A three-column home page
- “Featured” post highlighting
- Associating images/thumbnails with recent posts
- Customisable logo/header image
- Easy CSS classes for adding captions and wrapping text around images in posts
- Asides
- Option for readers to email posts to friends
- Option to switch to a print-friendly view to print posts
With version 1.3, The Morning After also offers:
- Dynamic sidebars for widgets
- Support for WordPress’ in-built tagging functionality.
Since I have already added the tagging functionality to my customised version of The Morning After, I am curious about making my theme widget-ready.
WordPress widgets are like plugins, but designed to provide a simple way to arrange the various elements of the sidebar content without having to change any code.
Well, before my customised version of The Morning after is „widgetised“, some code needs to be changed. The Tutorial
Functions.php
In order to make The Morning After (1.2) widget-ready, a function file (functions.php) has to be created and saved into the theme subdirectory. For having two dynamic sidebars, the functions.php must contain the following code:
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'MiddleColumn',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="mast">',
'after_title' => '</h3>',
));
register_sidebar(array(
'name'=>'RightColumn',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="mast">',
'after_title' => '</h3>',
));
?>
Home.php
Now, one dynamic sidebar has to be inserted into the middle column of the home.php file. This can be done by adding the following code below include(‚ad_home.php‘) command:
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('MiddleColumn') ) : ?>
sidebar.php
And the second dynamic sidebar has to be inserted into the sidebar.php file. This can be done by adding the following code above the is_home / ‚ad_side.php‘ command:
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('RightColumn') ) : ?>
style.css
Finally, the style.css file has to be made widget-ready by inserting the following code for widgets, recent comments, wp-calendar and most e-mailed below the /* ad */ area and by updating the ul.archives variables in the comment form section:
/** widgets **/
.widget { margin: 0 0 1.4em 0; }
.widget a { color: #224970; }
.widget a:hover { color: #000; }
.widget ul, .widget ol { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 0 0 0.3em 20px; margin: 0 0 0.5em 0; border-bottom: 1px solid #dadada; background: url(images/bg/postbullet.png) no-repeat 0 2px; }
.widget ol li { padding: 0 0 0.3em 10px; margin: 0 0 0.5em 0; border-bottom: 1px solid #dadada; }
/*recent comments*/
ul#recentcomments li.recentcomments { background: url(images/bg/bubble.png) no-repeat 0 3px; }
/*wp-calendar*/
table#wp-calendar { margin: 0; width: 100%; border: 0; }
table#wp-calendar caption { text-transform: uppercase; font-size: 0.8em; line-height: 1.8em; font-weight: bold; padding: 0 0 0.6em 0; letter-spacing: 0.1em; color: #175595; }
table#wp-calendar th, table#wp-calendar td { height: 1em; padding: 0.2em 0.4em;/*padding: 5px 7px;*/ text-align: right; border-right: 2px solid #fff; }
table#wp-calendar th, table#wp-calendar td#today { font-weight: bold; background: #dadada; color: #000; border-bottom: 0; }
table#wp-calendar td#today { font-weight: bold; background: #f2f2f2; }
table#wp-calendar td { border-bottom: 1px solid #efefef; }
table#wp-calendar td a { font-weight: bold; }
/*most e-mailed*/
.widget_email_most_emailed ul li { background: url(images/bg/doc.png) no-repeat 0 2px; }
/*archives page*/
ul.archives, ul.wp-tag-cloud { margin: 0 0 1.5em 0; list-style: none; list-style-image: url(foo.gif); }
ul.archives li, ul.wp-tag-cloud li { padding: 0 0 0.2em 20px; background: url(images/bg/doc.png) no-repeat 0 2px; }
ul.archives li a, ul.wp-tag-cloud li a { color: #224970; }
ul.archives li a:hover, ul.wp-tag-cloud li a:hover { color: #000; background: #eee; }
Done!
Schreibe einen Kommentar