An iA3 WordPress child theme

I very much enjoy my minimalist theme made by the lovely people at iA3, and have recently discovered that I share it with none other than Slyvester Stallone. I’m in good company, I think you’ll agree.

iA3 sell the theme with the proviso that it’s priced reasonably because they aren’t going to hand hold non-technical WordPress users. It’s not what they love to do. This post is some hacks I’ve added to get it the way I like it.

Firstly, I like the idea of child themes in WordPress. It’s not a perfect way of customising and inheriting theme updates but it’s better than throwing away the previous version which, if you’re like me, you’ll have hacked and then forgotten what you hacked until something disappears on the new site.

So far iA3 have released 3 updates of the theme, so it’s worth considering implementing a child theme if you want to have customisations. I’ve a new theme folder called ia3_child. Inside it I have the following.

A copy of the style.css

This is just a pre-requisite for a child theme and only contains the text
[css]
@import url("../iA3 1.2/style.css");
[/css]

A copy of the index.php

This is included to make a few key changes.

  1. Fix the @includes

    By default the iA3 template isn’t coded to have children made from it. The problem is in the php @includes. They link directly to files in the same working directory. To correct this nicely, for each @include you find in a template you want to edit, change

    [php]
    <?php @include(‘inc_head.php’); ?>
    [/php]

    into

    [php]
    <?php @include(locate_template( array(‘inc_head.php’),true) ); ?>
    [/php]

    This function locate_template will search a child theme directory first (if being called from one) then the parent theme directory. It’s neater that way.

  2. Include a hand written excerpt

    To break a long story you can use a ‘quicktag’ [html light=”true”]<!–more–>[/html] in your post (described in the_excerpt vs the_content), but if you like a hand written excerpt you’ll have to alter the iA3 template to get it.

    The original index.php contains this for the featured story
    [php]
    <div class="formatted">
    <?php the_content(__(‘Read more’, ‘ia3’)); ?>
    </div><!– .formatted –>
    [/php]
    Here is my excerpt enabled version.
    [php]
    <div class="formatted">
    <!– if no hand crafted excerpt exists show content, else show excerpt –>
    <?php if (empty( $post->post_excerpt )): ?>
    <?php the_content(__(‘Read more’, ‘ia3’)); ?>
    <?php else: ?>
    <?php $triffid_excerpt = $post->post_excerpt;
    // make sure there are paragraph tags to make nice the stylings.
    echo preg_replace(‘#^(<p>)*(.+?)(</p>)*$#’,'<p>$2</p>’,$triffid_excerpt); ?>
    // add a Read More link
    <a href="<?php the_permalink() ?>" class="more-link"><?php _e(‘Read more’, ‘ia3’); ?><span class="implied"> &ndash; &lsquo;<?php the_title(); ?>&rsquo;</span>.</a>
    <?php endif; ?>
    </div><!– .formatted –>

    [/php]

A copy of inc_head.php

This file contains the meta information for the header of the pages. It needs to be corrected to include your own site/blog meta description.

[php]
<meta name="description" content="<?php if (have_posts() && !is_home()): while (have_posts()): the_post(); echo strip_tags(get_the_excerpt()); endwhile; else: _e(‘XXX Your blog info here’, ‘ia3’); endif;?>" />
[/php]

On my wishlist is having this as a theme option.

A copy of folders assets/img

In this folder structure I have added my own sprite.png so in my iA3 preferences the link to my logo image is entered as
[html wraplines=”1″]
/wp-content/themes/ia3_child/assets/img/sprite.png
[/html]

and any subsequent iA3 updates (I think) will always use that URL and image file as the logo.

That’s about it for my small modifications. Big thanks to iA3 and as always I look forward to the updates.

A note for the interested, for this post I installed the WordPress plugin SyntaxHighlighter for the code snippets (v2.x) which is rather nifty.

20 thoughts on “An iA3 WordPress child theme”

  1. Ive been trying to make a child theme for iA’s template too, your include fix helped a lot.
    But I seem to be running into a bug here.
    After followed your steps my theme is inserting the footer twice.

    A simple include doesnt do it, but the locate_template array inserts it twice.
    Any ideas?

  2. After doing some tests, i found that
    @(locate_template( array(‘inc_body_footer.php’),true) );
    doesnt duplicate my content but
    @include(locate_template
    did…

  3. I’ve wanted to convert to this theme but im an HTML/XML/CSS purist and have no knowledge on PHP. I bought this theme at my own risk, but im very disappointed that even getting it set up with a completely fresh wordpress install just results in a blank screen. Is there any way to get a ‘quick start’ going?

  4. This is great, thanks. A further refinement is to have a simple function in the child theme’s functions.php

    function include_parent($f){ @locate_template(array($f),true);}

    i found it easier on the eye when modifying parent theme code for use in the child theme – just replace all instances of @include with @include_parent

  5. I too share this theme and love it. I actually saw Stallone’s and asked were they got it. My biggest issue is the read more button isn’t working particularly on the featured blog that controls the main picture. I am an author not a wordpress expert so if anyone has any way I can fix that, that I can understand I would greatly appreciate it.
    Glad to stumble across this!!! Let me know if I can help you in any way!
    John

  6. Hi John.

    Your site looks great – clean and bright. I see what you mean about the links. Actually the ‘read more’ links are pointing where they should but something untoward is happening after the the blog links are clicked (I notice pages are ok). Perhaps it’s a permalink issue?

    Check this article out and have a look at what ‘format’ you’ve set your permalinks to.
    http://codex.wordpress.org/Using_Permalinks

    Cheers!
    ~loothi

  7. Thanks for sharing this! It really helped me out. One more difficulty I came across is that in this setup the original style.css file is loaded and not the one in the child theme.

    To solve this, in inc_head.php (or a copy of that file in your child theme) replace the following code in line 17:
    echo get_bloginfo(‘template_directory’);
    by this:
    echo get_stylesheet_uri();

    (Please ignore my first two posts, they didn’t show the php parts in the lines of code correctly.)

  8. Hi,

    I am also using the iA3 them but I noticed that it doesn’t show a themed image like on your site. Did you change/add any code to make this work with iA3? I would appreciate your advice!

    Thanks

    Arjan

  9. Hi Arjan,
    In a post, be sure to add a “Featured Image” of the right pixels (960 wide by something, I have forgotten exactly) to a post.
    Also make sure the post is in the category “Featured” then it will appear on the home page.
    Hope that helps!
    ~loothi

  10. Hey there – thanks for the very helpful info – great theme – very easy to read and a welcome relief from all of the harsh premium WP templates on the market today! (I bought the IA template after stumbling on your blog the other day)

    Does anyone know how to enable comments on “pages”? I’ve pasted the “comments php code” into just about every section of the page template…..and yet, strangely – it never appears. I even tried copying the entire “post” template and pasting that in the page template – doesn’t work either. (and I have an existing blog with tons of comments on pages…..hate to lose them simply due to changing themes!)

    Thanks so much – any ideas would be much appreciated. (a coder I am obviously not..:-)

  11. Thanks so much – greatly appreciate your help – but……I had tried this (tried again – even doing a full paste) and it simply won’t render the comments on pages. (and tried on 2 separate installs, as well)

    Not sure why – have comments enabled on pages within the post level settings (in quick edit) as well as site wide – yet……on this specific theme, they get over-ridden somehow by something I’m not smart enough to see – or I’m missing someething simple that’s preventing them from showing. (which sort of stinks……only because I love the theme – but don’t want to lose a few years worth of comments on pages – and the traffic that emanated from those – as a result..:-)

  12. I’m not sure if you came across this. When you put in your own description in the meta tag for the inc_head. Did the search engine still come up as ##iA is a strategic design agency in Tokyo, Japan. We analyze business goals and user needs, and develop interfaces that match.##

    It still puzzles me where that description is coming from.
    Ive changed everything.

  13. Do you ever have any issues with delayed CSS changes?

    Even with all caching turned off and cleared, if I make changes to the CSS file in the iA3 theme, it takes a day or so for the changes to take affect.

    Any ideas?

  14. I’ve never had any problems so far….

    Caching can happen in WordPress (usually via a plugin I believe, such as WP Super cache or W3 total cache) but if it isn’t your browser it could also be your web host’s configuration – worth asking them if they have any caching turned on. Failing that, sometimes an ISP can cache pages, but I’ve never seen this myself.

    Loads of troubleshooting steps here if you’ve not read it.
    http://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

    AFAIK iA3 doesn’t have any special CSS caching but do let me know if you find something useful out. 🙂

  15. Thanks John, very usefull post.
    One remark : wouldn’t it be better using false argument when calling the includes :

    to avoid duplicate content ?

    Regards,
    Dominique

  16. Can you please help me with the free version of this theme?

    Just found that IA has removed the link from their website.

    BTW your website is amazing. Thanks.

  17. I was attracted to the IA3 theme’s simplicity, finding the theme after coming across some of IA3’s blog posts. But I have mixed feelings about their “take it or leave it”, no support, approach. It would be fine if there was a decent guide to configuring it, and if they’d properly cleaned it up for public use (e.g. Try clicking the ia3 link in the footer of this page or any other ia3 themed site and you get a 404 error; there are errors with permalinks and installation in a sub-directory ..).

    For me, there’s a tipping-point where being challenging and opinionated just becomes arrogant and selfish. They’re about there. And it’s not as though the rest of the world stands still. Fashions change. Competitors arrive.

Leave a Comment