Support » Themes and Templates » Customising Twenty Eleven theme

  • I have some questions on customising the twenty eleven theme. I’m not sure whether it would be preferred for these questions to be asked in separate posts to make them easy to find by others with the same queries. If so, could someone who knows about these things pls let me know, and I will be happy to re-post each query separately.

    So, to the queries, which I’ll enumerate in order of most interest to me, and for the sake of clarity and convenience.

    1. I want to make the tags that appear at the end of each post invisible. Is this easily doable, pls?

    2. Can I easily decrease the size of the header (especially the depth)?

    3. Can I get rid of the blog title and subtitle from the top of the
    page and ‘float’ (superimpose) it over a customised header image?

    4. Alternatively, could I make the whole header a clickable link, and ‘hide’ the blog title, while still having it there so search engines can continue to pick it up?

    5. Can I reduce the depth of the white area above the header? Or get rid of it entirely?

    6. Is it easily possible to move the ‘Search’ box down so it is ‘floating’ (superimposed) over the header – say, in the top right corner?

    7. Can I get rid of the Comment bubble and just have a text link (eg: ‘Add a Comment’ or ‘Reply’) next to the blog post date?

    Cheers all
    Ross

Viewing 15 replies - 1 through 15 (of 24 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    start by creating a child theme http://codex.wordpress.org/Child_Themes

    this is to avoid that any customisations are overwritten with the next upgrade of your wordpress version; it is also important to have an unedited default theme as a fallback theme in case of serious theme problems.

    once your child theme is setup and working, it may be neccessary for you to post a link to your site, to get suggestions for some of your questions.

    Thanks, alchymyth. I hadn’t heard about child themes until your post, but on doing more research I understand the concept now. Great idea. I’m setting one up today, then will get back.

    In the meantime, I have a very basic question. Regardless of whether it’s a child theme or the theme itself being customised, is it possible to somehow do it without changing the current theme of the blog? It seems to me that it’s necessary to activate a theme if you want to customise it; otherwise, the theme’s files (style.css, header.php etc) are not accessible for modding.

    In other words, I’d like to work on customising a new theme ‘offline’ that can be activated once completed, and in the meantime my blog would continue with its current theme. Thus, the change to the new theme would be instant, rather than being a public work in progress.

    Possible or not, pls?

    Cheers
    Ross

    Michael

    (@alchymyth)

    Forum Moderator

    It seems to me that it’s necessary to activate a theme if you want to customise it; otherwise, the theme’s files (style.css, header.php etc) are not accessible for modding.

    you would need to select the theme from the ‘select theme to edit’ dropdown in the ‘appearance’ ‘editor’ page in the dashboard, above the list of theme files. the theme has to be in the themes folder of your wordpress installation.

    there are ways to work on a theme while another theme is active in the front – have a search on the web or forum –
    for instance: http://digwp.com/2009/12/develop-themes-behind-the-scenes/ (this is not a recommendation, as i haven’t worked with it)

    and then there is the possibility to install wordpress locally on your computer; search for ‘wordpress local installation’ or ‘wordpress local installation xampp’

    Thanks, alchymyth. Appreciated.

    I have now created a TwentyEleven child theme and it shows up in my dashboard, and is able to be activated. So, all OK there, it seems.

    However, I note a caption under the child theme that states: “Changes made to the templates will affect both themes.”

    I was under the impression that if you made changes to the child theme they were not also made to the parent theme. Have I got this wrong?

    Cheers
    Ross

    Michael

    (@alchymyth)

    Forum Moderator

    I was under the impression that if you made changes to the child theme they were not also made to the parent theme.

    you are right – i don’t know what the text refers to.

    1. I want to make the tags that appear at the end of each post invisible. Is this easily doable, pls?

    try and start with adding this to style.css of your child theme:
    .tag-links { display: none; }
    if you want to remove the tags links from single posts, copy content-single.php into your child theme; edit it and find:
    $utility_text = __( 'This entry was posted in %1$s and tagged %2$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
    change to:
    $utility_text = __( 'This entry was posted in %1$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );

    2. Can I easily decrease the size of the header (especially the depth)?

    add this to functions.php of your child theme (if you don’t have a functions.php in you r child theme, create one and put <?php at the beginning):

    //after theme setup section
    add_action( 'after_setup_theme', 'twentyeleven_child_theme_setup' );
    function twentyeleven_child_theme_setup() {
    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 160 ) );
    }

    3. Can I get rid of the blog title and subtitle from the top of the page and ‘float’ (superimpose) it over a customised header image?

    add this to style.css of your child theme:

    #branding { position: relative; }
    #branding hgroup { position: absolute; top: 0px; }

    4. Alternatively, could I make the whole header a clickable link, and ‘hide’ the blog title, while still having it there so search engines can continue to pick it up?

    the header is clickable by default; under ‘dashboard’ ‘apperance’ ‘header’ tick ‘display text’ [no]

    5. Can I reduce the depth of the white area above the header? Or get rid of it entirely?

    #page { margin-top: 0; }

    6. Is it easily possible to move the ‘Search’ box down so it is ‘floating’ (superimposed) over the header – say, in the top right corner?

    comes automatically with fix no.3; don’t do fix no.4

    7. Can I get rid of the Comment bubble and just have a text link (eg: ‘Add a Comment’ or ‘Reply’) next to the blog post date?

    get rid of comment bubble:
    .entry-header .comments-link{ display: none; }
    copy content.php into your child theme; edit it and locate:
    <?php twentyeleven_posted_on(); ?>
    directly after it, for instance, add:
    <?php if ( comments_open() ) : echo ' - '; comments_popup_link( 'Add a Comment', '1 Comment', '% Comments'); endif; ?>

    open to improvements

    Firstly, thanks so much for all your help, alcymyth. Much appreciated.

    I’m slowly working through your suggested mods. Re 1, I’ve made your first edit to the style.css of your child theme, but there was no visible effect to the tags as they appear online. Obviously, I also need to follow up with your content-single.php edits. Two points of clarification here, pls.

    a) First, I copy the entire contents of the parent content-single.php file to another such file, which I then upload into the child theme – correct?
    b) Will your edit remove the single post tags entirely, or leave them there for each post while rendering them invisibile publicly? It’s the latter I’m seeking to achieve, not the former. Just thought I should check before I go ahead with this edit.

    Cheers!
    Ross

    Hi RossB,

    Check your ISP – you might be able to have two installations of WP with no extra cost. If so, that gives you a development option without the hassle of installing locally or making hacks. (It also gives you a backup against hacks, but not server loss, if you synch it regularly when not developing.)

    Hi shastaw

    Thanks for that tip! I’ll have a look into what my ISP offers…will also have to check up on synching (never heard of that until now).

    Cheers!
    Ross

    Hi alchymyth. An update.

    Re 1: I’ve followed through on your complete instructions and the tags are no longer visible – hurrah! However, there are now two little vertical division lines (I guess the tags used to be enclosed within them). I can live with these, but just wondering if they can easily be reduced to just one vertical divider line?

    Also, as stated previously, I am concerned that I have not just made the tags invisible, but have deleted them altogether (which I don’t want to do, as I think that will compromise SEO or at least the ability to be picked up by search engines.

    Re 2 and 3: Have actioned both as per your suggestions, but no changes are apparent to the appearance of the theme. Maybe I should have copied and pasted the entire parent functions.php file to the child theme, rather than just created a new functions.php file and copied your code to it.

    If this is getting too protracted and time-consuming, I’ll see if I can hunt down some possible solutions or learn enough to converse a little more tech-articulately via Google!

    Cheers
    Ross

    Michael

    (@alchymyth)

    Forum Moderator

    there are now two little vertical division lines

    to avoid these, you really need to edit the template files – there is nothing with css to get rid of them, as far as i can see.

    Also, as stated previously, I am concerned that I have not just made the tags invisible, but have deleted them altogether (which I don’t want to do, as I think that will compromise SEO or at least the ability to be picked up by search engines.

    if you want the search engines to ‘use’ the tags, leaeve tha tags in place where they were – imho, ‘good’ search engines will not use ‘hidden’ tags nor anything that is not visible to the user.

    Re 2 and 3: Have actioned both as per your suggestions, but no changes are apparent to the appearance of the theme.

    the header size might only have effect on images uploaded after the change(?); although the addition to style.css should have immediate effect.

    Maybe I should have copied and pasted the entire parent functions.php file to the child theme

    definitively – no. this would create fatal errors.

    can you post a link to your site?

    Hi alcymyth

    Been caught up for a couple of days and unable to get back to modding my blog until now.

    I’ve pondered on your comment about leaving the tags in place, and have decided to go with the tags. So, reinstated! Ta for the crash education!

    I’ve done some messing with the CSS in the Style Sheet and after a lot of frustration have managed to get the header to the size I want. I’ve replaced the default header with a very plain customised one – that will have to suffice until I get around to designing something better.

    I’m beginning to like the clean, content-focused design of the Twenty Eleven theme, but there is one annoying aspect that I would GREATLY appreciate some advice on. As will be apparent when my site is viewed (pls see http://theboomtownrap.perthpunk.com/wordpress/), the white posting area comes to an abrupt and untimely end under the Sitemeter link, and the grey background then goes right across the page from that point down. This looks weird and unsightly, especially happening as it does just after the first pic of the photo series that concludes the post. This only happens on the home page. If I click on the post, or any other post, the white area does not end like that, instead continuing on ad infinitum no matter how far down the page I scroll.

    Do you have a fix for this please?

    Cheers!
    Ross

    Michael

    (@alchymyth)

    Forum Moderator

    it seems, where you inserted the sitemeter (into sidebar.php ?), you added an extra closing div:

    </div><!-- #secondary .widget-area -->
    
    <!-- Site Meter XHTML Strict 1.0 -->
    <a id="idSiteMeterHREF" href="http://www.sitemeter.com/stats.asp?site=s16boomtownrap" target="_top"><img ...
    ertc
    ...
    .sitemeter.com/js/counter.js?site=s16boomtownrap">
    </script>
    <!-- Copyright (c)2006 Site Meter -->
    </div>

    the last </div> is in excess.
    to have the sitemeter clearly in the sidebar, possibly move the sitemeter section to before this line:
    </div><!-- #secondary .widget-area -->

    Fixed! Thanks a lot, alchmyth!

    Only the comment bubble to go…will try to get on to that over next 24 hours and report back.

    Thanks so much for staying with me through this. It was a much-needed change that I’d been putting off for a long time, but you’ve taken a lot of the pain out of it!

    Cheers
    Ross

    This thread was so helpful, as I have been wanting to make some of these same changes to my theme. Alchymyth, you made it so easy, especially for someone who doesn’t know anything about this stuff. Thanks a ton.

    I wonder if I could add my own questions on customizing my twenty eleven child theme —

    1) Is there a way to remove the search form from the header completely, leaving only the search form in the sidebar? I’m afraid I messed around with the code before I knew what a child theme was and sort of bungled it, and now it’s all wrong. 🙂 Have a child theme now, but want to get rid of that top search bar completely…

    2) I would like to add the sidebar exactly as it is on my homepage to all singular entries, so that if you click on an entry title, when that entry comes up you can see the sidebar as well. Is there a simple way to do that?

    3) Instead of the generic links that say “previous” and “next” in the top right of the singular entries, I would like them to say the actual title of the previous and next entries.

    I don’t have any idea on whether those are easy fixes or complicated ones, so I apologize in advance if I’m asking for an uncouth amount of information. Thanks for any help you can give!

    nikkibeard.com

    Michael

    (@alchymyth)

    Forum Moderator

    1)
    possibly the easiest way is to add something like this to style.css of the child theme:
    #branding #searchform { display:none; }

    2)
    refer to: http://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-on-single-posts-and-pages

    3)
    copy single.php into the child theme and edit this section there:

    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?></span>
    						<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span>

    for instance to:

    <span class="nav-previous"><?php previous_post_link( '%link' ); ?></span>
    						<span class="nav-next"><?php next_post_link( '%link' ); ?></span>

    or keeping the arrows, to:

    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> %title', 'twentyeleven' ) ); ?></span>
    						<span class="nav-next"><?php next_post_link( '%link', __( '%title <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span>

    http://codex.wordpress.org/Function_Reference/next_post_link

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Customising Twenty Eleven theme’ is closed to new replies.