Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Social Topics

Quick Guide: Child Theme
  • Why should I use a Child Theme?

    One thing: updates of the parent theme don't destroy your customizations. You are working in a seperate folder which uses all the functionalities Arras Theme has.

    How do I make a Child Theme?

    Copy the folder "sample-child-theme" to wp-content/themes and rename it. For this Quick Guide I'm going to make a Child Theme named 'Kuro' (which means Black in Japanese).

    There's a style.css in the sample-child-theme (now named Kuro). Open it and you'll see this.
    /*
    Theme Name: Child Theme of Arras Theme
    Theme URI: http://www.arrastheme.com/
    Description: Child theme for the Arras Theme for WordPress
    Author: Creature
    Author URI: http://www.arrastheme.com/
    Template: arras-theme
    Version: 1.0
    .
    For more information on how to create and use child themes:
    http://codex.wordpress.org/Child_Themes

    Any CSS code written below will override any existing
    declarations from the theme itself.
    .
    */

    Change this part into anything you like
    Theme Name: Child Theme of Arras Theme
    Theme URI: http://www.arrastheme.com/
    Description: Child theme for the Arras Theme for WordPress
    Author: Creature
    Author URI: http://www.arrastheme.com/


    Mine is now:
    /*
    Theme Name: Kuro
    Theme URI: http://www.kuro.ex
    Description: Black Child Theme for Arras
    Author: Giovanni / Extatix
    Author URI: http://www.animeblog.nl
    Template: arras-theme
    Version: 1.0
    .
    For more information on how to create and use child themes:
    http://codex.wordpress.org/Child_Themes

    Any CSS code written below will override any existing
    declarations from the theme itself.
    .
    */


    You're now ready to go. Go to WordPress and select Apperance - Themes. You'll now see your newly created Child Theme.

    image

    Press activate and you are ready to go. If you now visit your site you'll see a standard Arras Theme. Next thing we are going to do is change some colors. Let's say I want a completely black background (the theme is called Kuro after all).
    For that I need to add
    #wrapper { background: #000; }
    to the stylesheet.

    You do that in the style.css located in the child theme folder (aka Kuro).

    It'll look like this now.
    /*
    Theme Name: Kuro
    Theme URI: http://www.kuro.ex
    Description: Black Child Theme for Arras
    Author: Giovanni / Extatix
    Author URI: http://www.animeblog.nl
    Template: arras-theme
    Version: 1.0
    .
    For more information on how to create and use child themes:
    http://codex.wordpress.org/Child_Themes

    Any CSS code written below will override any existing
    declarations from the theme itself.
    .
    */

    #wrapper { background: #000; }

    Which results in:

    image

    That's all you need to know. Put changes in the css in the style.css and it will overrule the default.css / legacy.css (whatever you choose in the theme options).

    The big plus of this (I'll repeat it):
    Let's say you've put about 50 lines of css in the style.css and Arras Theme 1.4.4 is released. Simply update it and your changes are still there. No more worries about redoing css stuff.

    Neat, huh?
  • Take a look at this topic.

    The poster wanted to add an advertising space to his sidebar and wrote it directly into sidebar.php. It works.

    But.

    You don't want to do that. It means when Arras Theme will be updated you have to redo it.

    Is there any other way?

    Yes.

    Open sidebar.php and you'll see some code.

    </div><!-- #container -->

    <?php wp_reset_query() ?>

    <div id=\"primary\" class=\"aside main-aside sidebar\">
    <?php arras_above_sidebar() ?>
    <ul class=\"xoxo\">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Primary Sidebar') ) : ?>
    <li class=\"widgetcontainer clearfix\">
    etc. etc.


    Notice the <?php arras_above_sidebar() ?> ?

    That's a hook.

    If you open actions.php you'll see this (somewhere in the file)
    /**
    * Called before the main sidebar
    * @since 1.2.1
    */
    function arras_above_sidebar() {
    do_action('arras_above_sidebar');
    }


    In itself it doesn't do anything.

    But I'll tell you now: it's immensly powerful. You can add a function to that hook. To any hook (Arras has several) actually.

    This might sound like abracadra for some, but I'll give you an example of how to write a function which will attach the advertising space to that hook in sidebar.php without having to edit files in Arras Theme itself. But I'll start with simply adding a piece of text.

    First of all: create a functions.php in your child theme, just an empty file.

    For this Quick Guide I'm putting this in:

    <?php

    // We're going to add a few functions here

    ?>


    Now I'm going to write a function named say_hi().


    function say_hi() {
    echo 'hi';
    }
    add_action('arras_above_sidebar','say_hi');


    Very simple and basic.

    The result:

    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_03.png" border="0" />

    Now I'm going to expand it a bit, I only want to show it on the frontpage. Therefore I need to use a so-called Conditional Tag. In this is_home() will do. I will put it next to say_hi() and name it say_hi_again().

    function say_hi_again() {
    if (is_home()) {
    echo 'hi';
    }
    }
    add_action('arras_above_sidebar','say_hi_again');


    The result on front page:

    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_04.png" border="0" />

    On every other page/post it only says hi:

    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_05.png" border="0" />

    It looks like crap though, let's add a div class to it.

    function say_hi_again() {
    if (is_home()) { ?>
    <div class=\"greet\">
    hi
    </div>
    <?php }
    }
    add_action('arras_above_sidebar','say_hi_again');


    Notice the differences? The 'echo' is gone and I had to break out of PHP and open it up again before the end of the function. I'm not going to elaborate on that too much, there's plenty of material on teh big Interwebz on that already.

    Let's look at the result.

    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_06.png" border="0" />

    They are now positioned beneath each other because of the div class I added.
    Time for some css. I want black letters, red background, bold letters and a bigger font.

    .greet { color: #000; background: #ff0000; font-size: 16px; font-weight: bold }

    (add this to the style.css of the child theme!)

    Result:

    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_07.png" border="0" />

    I only did that last part to show a little trick later on.

    Now it's time to try to add the advertisement. I'll keep the say_hi_again() and functions.php looks like this now:
    <?php

    // We're going to add a few functions here

    function say_hi_again() {
    if (is_home()) { ?>
    <div class=\"greet\">
    hi
    </div>
    <?php }
    }
    add_action('arras_above_sidebar','say_hi_again');

    ?>



    Let's try some things


    function put_ad_in_sidebar() {
    echo '<img src=\"http://i45.tinypic.com/9hlvma.jpg\" />';
    }
    add_action('arras_above_sidebar', 'put_ad_in_sidebar');


    Result:
    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_08.png" border="0" />

    And now I'll show you why I kept say_hi_again(). I'm going to add a priority to the actions. The only thing I need to change is the last part of the functions.
    add_action('arras_above_sidebar','put_ad_in_sidebar', 1);
    add_action('arras_above_sidebar','say_hi_again', 2);

    Functions.php looks like this now.
    <?php

    // We're going to add a few functions here

    function say_hi_again() {
    if (is_home()) { ?>
    <div class=\"greet\">
    hi
    </div>
    <?php }
    }
    add_action('arras_above_sidebar','say_hi_again', 2);

    function put_ad_in_sidebar() {
    echo '<img src=\"http://i45.tinypic.com/9hlvma.jpg\" />';
    }
    add_action('arras_above_sidebar', 'put_ad_in_sidebar', 1);

    ?>


    The result:
    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_09.png" border="0" />

    They switched places. I added two actions to the same hook and established in which order I want them.

    Breaking down the add_action stuff:
    add_action('place_where_it_should_go', 'function_I_just_wrote', priority)

    There's a fourth parameter ($accepted_args) but I'll skip that one for now.

    This little guide gave you the basics on how to add actions. You can do a lot more with it. Arras Theme has several hooks (see actions.php) for you to play with. Next up will be a basic instruction on how to add filters, another great example of what you can do with Child Themes.
  • Short & quick look at filters

    If you take a look at single.php you'll notice a few PHP-functions which aren't clear at first sight. Take <?php arras_postheader() ?> as an example. This one is defined in filters.php and tells what to put where in the post header (title, thumbnail, category, etc.).

    function arras_postheader() {
    global $post, $id;

    if ( is_single() ) {
    if ( is_attachment() ) $postheader .= '<h1 class=\"entry-title\">' . get_the_title() . ' [<a href=\"' . get_permalink($post->post_parent) . '\" rev=\"attachment\">' . get_the_title($post->post_parent) . '</a>]</h1>';
    else $postheader = '<h1 class=\"entry-title\"><a href=\"' . get_permalink() . '\" rel=\"bookmark\">' . get_the_title() . '</a></h1>';
    } else {
    if ( is_attachment() ) $postheader .= '<h2 class=\"entry-title\">' . get_the_title() . ' [<a href=\"' . get_permalink($post->post_parent) . '\" rev=\"attachment\">' . get_the_title($post->post_parent) . '</a>]</h2>';
    else $postheader = '<h2 class=\"entry-title\"><a href=\"' . get_permalink() . '\" rel=\"bookmark\">' . get_the_title() . '</a></h2>';
    }

    if ( !is_page() ) {
    $postheader .= '<div class=\"entry-info\">';

    if ( arras_get_option('post_author') ) {
    $postheader .= sprintf( __('<span class=\"entry-author\">By %s</span>', 'arras'), '<address class=\"author vcard\">' . get_the_author() . '</address>' );
    }

    if ( arras_get_option('post_date') ) {
    $postheader .= ' &ndash; <abbr class=\"published\" title=\"' . get_the_time('c') . '\">' . get_the_time(get_option('date_format')) . '</abbr>';
    }

    if (current_user_can('edit_post')) {
    $postheader .= '<a class=\"post-edit-link\" href=\"' . get_edit_post_link($id) . '\" title=\"' . __('Edit Post', 'arras') . '\">' . __('(Edit Post)', 'arras') . '</a>';
    }

    if ( arras_get_option('post_cats') ) {
    $post_cats = array();
    $cats = get_the_category();
    foreach ($cats as $c) $post_cats[] = '<a href=\"' . get_category_link($c->cat_ID) . '\">' . $c->cat_name . '</a>';

    $postheader .= sprintf( __('<span class=\"entry-cat\"><strong>Posted in: </strong>%s</span>', 'arras'), implode(', ', $post_cats) );
    }

    $postheader .= '</div>';
    }

    if ( arras_get_option('single_thumbs') ) {
    $postheader .= '<div class=\"entry-photo\">' . arras_get_thumbnail('featured-slideshow-thumb') . '</div>';
    }

    echo apply_filters('arras_postheader', $postheader);
    }


    Well, that's a bunch of code, isn't it? The most important part here for child theme developers is the last part.
    echo apply_filters('arras_postheader', $postheader);

    Let's say you want something different in the postheader. You could edit this function or write a function in functions.php of your child theme which will overwrite this. Very simple example, I'm going to put a piece of text there, nothing more.

    function change_header() {
    echo 'This is my header';
    }
    add_filter('arras_postheader', 'change_header');


    This will result in:
    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_10.png" border="0" />

    All the stuff (title, author, etc.) is gone and replaced with my text. Advanced users can take advantage of this and create great functions which can overwrite any 'apply filters' used by Arras Theme.

    Quick breakdown
    add_filter('filter_you_want_to_overwrite', 'function_I_just_wrote')

    You can also add $priority & $accepted_args here like with add_action but let's concentrate on the more simple stuff for now.

    I'll write something down on the more advanced possibilities later on, but this is the basic idea behind filters.

    Advanced look at filters

    (more will follow)
  • Quick Quide for Templates

    WordPress checks for a couple of templates to see how something has to be displayed. Here a great image how WordPress handles it. Arras Theme has a couple of them, single.php, archive.php, etc. etc.

    With Child Themes you can make your own which get prioritized above the ones Arras Theme uses. In this quick guide I'll make a (slightly) different version of single.php. I start out with copying single.php from Arras Theme and placing it in the Child Theme (Kuro) directory.

    I'll keep it simple and add a text beneath the header and the content. This is single.php now.
    <?php get_header(); ?>

    <div id=\"content\" class=\"section\">
    <?php arras_above_content() ?>

    <?php
    if ( arras_get_option('single_meta_pos') == 'bottom' ) add_filter('arras_postfooter', 'arras_postmeta');
    else add_filter('arras_postheader', 'arras_postmeta');
    ?>


    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php arras_above_post() ?>
    <div id=\"post-<?php the_ID() ?>\" <?php arras_single_post_class() ?>>

    <?php arras_postheader() ?>

    <div class=\"entry-content\">
    <?php the_content( __('<p>Read the rest of this entry &raquo;</p>', 'arras') ); ?>
    <?php wp_link_pages(array('before' => __('<p><strong>Pages:</strong> ', 'arras'),
    'after' => '</p>', 'next_or_number' => 'number')); ?>
    </div>

    <!-- <?php trackback_rdf() ?> -->
    <?php arras_postfooter() ?>

    <?php if ( arras_get_option('display_author') ) : ?>
    <div class=\"about-author clearfix\">
    <h4><?php _e('About the Author', 'arras') ?></h4>
    <?php echo get_avatar(get_the_author_meta('ID'), 48); ?>
    <?php the_author_meta('description'); ?>
    </div>
    <?php endif; ?>
    </div>

    <?php arras_below_post() ?>
    <a name=\"comments\"></a>
    <?php comments_template('', true); ?>
    <?php arras_below_comments() ?>

    <?php endwhile; else: ?>

    <?php arras_post_notfound() ?>

    <?php endif; ?>

    <?php arras_below_content() ?>
    </div><!-- #content -->

    <?php get_sidebar(); ?>
    <?php get_footer(); ?>


    Lot of stuff again and people who read the part about actions and filters might recognize some things, for example <?php arras_below_content() ?> is a hook.

    Now I'll simply add the text 'In the part about filters I killed my postheader'.
            <?php arras_postheader() ?>

    <div class=\"my-text\"> In the part about filters I killed my postheader</div>

    <div class=\"entry-content\">

    I've placed it between the existing stuff and added a div for some custom styling.

    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_11.png" border="0" />

    Add some styling
    .my-text { font-size: 14px; font-weight: bold; color: #800517; }

    Result:

    img src="http://www.watkijkikoptv.info/mp3/kuro/kuro_12.png" border="0" />

    Not very exciting stuff but you can add php-functions too. I'll add a category-list after the author stuff. That's <?php wp_list_categories() ?>

         
    </div>

    <?php wp_list_categories() ?>

    <?php arras_below_post() ?>


    Result:

    image

    You can do these little things for basically all templates and when Arras Theme gets updated the changes will still be there.
  • Quick Guide to Combining Stuff

    All the above stuff is nice but how about combining stuff? I'm going to add the <?php wp_list_categories()?> to the single post without editing single.php itself (for the purposeness of clarity I'll keep the php-function I added in the part about templates so there will be two so people won't think I'm cheating :)

    Add a function to the functions.php of your child theme.
    function catlist_beneath_author() {
    wp_list_categories();
    }
    add_action('arras_below_post', 'catlist_beneath_author');

    I've 'hooked' this action to the 'hook' arras_below_post() which is located right underneath the wp_list_categories() I added in the Templates part.
    Result:

    img src="http://watkijkikoptv.info/mp3/kuro/kuro_14.png" border="0" />

    What's the use of this I hear you lot thinking, I could have written the function in the first place without the use of a seperate template.

    You are right.

    But how about this: add a hook of your own in a template.

    I'm going to add a hook to single.php which is located between the content and the post author stuff.

    First I start with adding an actions.php to my child theme. I made an empty php file and put this in

    <?php

    function my_first_hook() {
    do_action('my_first_hook');
    }

    ?>


    In functions.php I add this at the top of the php right beneath <?php and the text // We're going to add a few functions here<br />
    require_once 'actions.php';


    I do this to keep it clean. I really should have written my other functions in a seperate php and do a similar thing as I did with actions.php now, it gets messy quick.

    Now the the hook in single.php


    <?php arras_postfooter() ?>

    <?php my_first_hook() ?>

    <?php if ( arras_get_option('display_author') ) : ?>

    This middle part is now added to single.php.

    I'm going to add another category list (quite useless, but it's about the idea of course).

    function catlist_above_author() {
    wp_list_categories();
    }
    add_action('my_first_hook', 'catlist_above_author');

    See, I've hooked it to my_first_hook().

    Result:

    img src="http://watkijkikoptv.info/mp3/kuro/kuro_15.png" border="0" />

    It's still not very exciting stuff but think about the plugins which will give you a piece of template code which you can play with. Say a ratings-plugin gives you rate_me_now(). Add a function and hook it to your custom hook.

    Write a complete new filter to add stuff to your template files. Make new templates like taxonomy.php (I might do that since I use taxonomies). Make hooks in it. Add functions to it. Just awesome stuff can be done.

    On and on and on and on. The possibilities are almost limitless. Basically you can make a Child Theme which resembles nothing like Arras Theme but still has the functionalities Arras Theme has got to offer. Or just looks like Arras but works slightly different.

    Arras Theme isn't just a theme which works great out of the box (despite the struggles some people have) it also offers great possibilities to customize the hell out of with without touching Arras Theme itself. For that I'm very thankful to Zy.
  • An advanced example of using filters

    I've added Custom Taxonomies to my blog and now I want them to add to the postheader in single posts, I want them to show up under the category. I also want them to show up when they are actually there.

    There are a couple of ways to do this, I can make a template and add it to the template or I can use the filter Arras Theme used to place the postheader where it is. In an earlier example I showed how to replace a filter. For this particular example I need what is already there, I only have to add a thing.

    Luckily the filters stuff have the tools to do that. Arras Theme uses apply_filters('arras_postheader', $postheader). The last part of that is an accepted argument which I'm going to re-use while actually replacing the filter.


    function my_head($postheader) {
    echo $postheader;
    $var = get_the_term_list( $post->ID, 'studio',' ', ', ', '' );
    if (!is_page() && !empty($var)) {
    echo '<strong>Studio:</strong>' . $var . ' ';
    }
    $vartoo = get_the_term_list( $post->ID, 'jaar',' ', ', ', '' );
    if (!is_page() && !empty($vartoo)) {
    echo '<strong>Jaar:</strong>' . $vartoo;
    }
    }
    add_filter('arras_postheader', 'my_head');


    See what I did? I used $postheader as an argument for my own function and echo'd it in the second line. After that I added my own stuff.

    I could have written this function with breaking out of php a couple of times (see an earlier example) but I choose to use apostrophes in this example.

    The result:

    image

    So, you can not only replace a filter completely, you can use it in your function and re-use it.
  • Thanks for the great tips on using child themes effectively. Here's another.

    New Widget Areas

    It's simple to create new widget areas (sidebars) in your child theme. For this example I'm going to add a widget area (intended for banner advertising, but it could be for any purpose) to appear before the content of every archive-type page. This will involve copying and modifying the archive.php template (see Quick Guide for Templates, above, for an introduction) and adding a few lines to your child theme's functions.php file (see discussion of functions.php, above, for an intro).

    archive.php

    Here's the relevant section near the beginning of archive.php:

    <div id=\"content\" class=\"section\">
    <?php arras_above_content() ?>
    <?php is_tag(); if ( have_posts() ) : ?>


    The first line begins the content div. The second line calls a hook. The third line begins the actual content loop. If you're using the arras_above_content hook, you can decide whether your new widget area belongs before it or after it. In my case I decided to put the widget area after the hook. I'm calling my new widget area "Before Archive" but of course you can call yours whatever you want. Just be sure to use the same name in the template and in the functions file. Here's the new template code:

    <div id=\"content\" class=\"section\">
    <?php arras_above_content() ?>

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Before Archive') ) : ?>
    <!-- optional default content to show when no widget is in this area -->
    <?php endif; ?>

    <?php is_tag(); if ( have_posts() ) : ?>


    That part tells WP where to put the new widget area.

    functions.php

    To activate it in your child theme, add the following to your functions.php file:

    register_sidebar( array(
    'name' => 'Before Archive',
    'after_widget' => '</div>',
    'before_title' => '<h5 class=\"widgettitle\">',
    'after_title' => '</h5><div class=\"widgetcontent\">'
    ) );


    The only required part is the name parameter, which must match the name in the template file. The rest, in this case, will format a div for the widget area in a way that's consistent with the rest of Arras.

    Once you've made these changes you may have to close your browser and re-login to the WP admin area. When you go to Appearance/Widgets you'll see the new widget area listed as a sidebar. You may also find that some of your previously placed widgets have mysteriously migrated to different sidebars than the ones where you originally placed them. If so, just drag them back where they belong. Then you can place any widget(s) you like in the newly created sidebar, and they'll show up where you placed them in the template.

    Steve
  • Okay, so you do know there's an action hook and yet you choose to edit the template? Why?


    register_sidebar( array(
    'name' => 'Test',
    'after_widget' => '</div>',
    'before_title' => '<h5 class=\"widgettitle\">',
    'after_title' => '</h5><div class=\"widgetcontent\">'
    ) );

    function add_my_sidebar() { ?>
    <?php if (is_archive()) { ?>
    <div class=\"my-sidebar\">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Test') ) : ?>
    <?php endif; ?>
    </div>
    <?php }
    }

    add_action('arras_above_content', 'add_my_sidebar');


    Same result.
  • realy good guide, thx a lot for that i will test a few things when i have the time to. Just one little question, i think you can handle all the code and functions and so on faster then me. i want to make a template as the single.php but i want to add posts of a single category to the end of the page, same style like archive.php and with the arras style options like node based and so on.

    do u think u got the time to help me a bit with that?
  • Sure. But I'm not sure what you want actually. You want a single.php to handle a single post with an archive at the bottom? Am I correct?
  • oh sorry, not the single.php the page.php standardtemplate for a wordpress site and yes with an archive at the bottom.