ThemeShaper Forums » Thematic

[closed]

Entry-Meta, Entry-Title, etc - Modifying the Layout...

(12 posts)
  • Started 10 years ago by kga
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. kga
    Member

    I'm pretty new to Wordpress and Thematic, but went in fairly deep for my first project on this (all custom template pages for the most part).

    I got through creating all the custom page templates pretty easily and now I'd like to modify the blog pages themselves.

    More specifically, just simple things like the following:

    In the blog page you have

    entry-title
    entry-meta
    entry-content

    I'd just like to modify what is shown for entry-meta for example and move the date above the entry-title div.

    Start small and work my way up I guess. I HAVE gone through the Wiki, but that's not clear or direct enough for someone totally new to this.

    Can someone please tell me where to start reading or provide examples?

    Thanks!

    Posted 10 years ago #
  2. hopefully if you've gone through the wiki you understand the concept of removing and adding functions to hooks and maybe even filtering. I always recommend taking a peek at the extensions folder (in the thematic folder under library) to get a better idea of what does what. when you want to change something i find it most helpful to figure out what makes it the way it is. plus you can copy the copy you want to tweak directly into your functions.php and then tweak away. Most of the changes I make are to functions in the content-extensions.php file, and the functions that control the entry-meta, entry-content and entry-utility are all in that file.

    for instance ( i'm using the newest stable version of thematic so yours may look a touch different) there is the function that defines the postmeta (date and title stuff)

    // Create post meta
    if (function_exists('childtheme_override_postheader_postmeta'))  {
    	function thematic_postheader_postmeta() {
    		return childtheme_override_postheader_postmeta();
    	}
    } else {
    	function thematic_postheader_postmeta() {
    
    	    $postmeta = '<div class="entry-meta">';
    	    $postmeta .= thematic_postmeta_authorlink();
    	    $postmeta .= '<span class="meta-sep meta-sep-entry-date"> | </span>';
    	    $postmeta .= thematic_postmeta_entrydate();
    
    	    $postmeta .= thematic_postmeta_editlink();
    
    	    $postmeta .= "</div><!-- .entry-meta -->\n";
    
    	    return apply_filters('thematic_postheader_postmeta',$postmeta); 
    
    	}
    } // end postheader_postmeta

    so you would paste the function into your own file and move the date above the entrymeta div like you wanted. i think this is a new development (again only if you are using a newer version), b/c i've not used it yet, but from above it looks like you can just name your function childtheme_override_postheader_postmeta() and it will automatically use that w/o needing to add or remove any functions. neato! i will have to make use of that.

    otherwise you'd need to name it something else, and in this case filter in the new value of the variable $postmeta like this:

    function childtheme_postheader_postmeta() {
            $postmeta = thematic_postmeta_entrydate();
    	    $postmeta .= '<div class="entry-meta">';
    	    $postmeta .= thematic_postmeta_authorlink();
    	    $postmeta .= thematic_postmeta_editlink();
    	    $postmeta .= "</div><!-- .entry-meta -->\n";
    
    	    return $postmeta; 
    
    	}
    
    add_filter('thematic_postheader_postmeta','childtheme_postheader_postmeta');
    // end postheader_postmeta

    now your posts will look like

    A New Post
    Published July 11th
    by Kathy | Edit

    the possibilities with this are pretty endless as you can keep repeating the process on all the functions and variables in the content-extensions to get a very customized postheader and postfooter.

    Ian wrote a really great article on customizing the postheader and now i can't find it. Gene do you know which one I am talking about?

    Posted 10 years ago #
  3. Helga is pretty much spot on. You'll just need to dig into thematic/library/extensions/ -- and in this case the content-extensions.php, find the functions you want to mangle, copy them into your child-theme functions.php, then turn them into a filter as Helga demonstrates.

    My two cents is - keep in mind that you'll probably want to create separate filters for your main blog page, and possibly alter it for the category and single pages. You'll be using a combination of filters to change things, and hooks to add or remove things.

    Ian's child-themes, Powerblog and Feature-site come to mind, have good examples of this sort of stuff in their functions.php.

    Here's a filter that creates a post-header that only displays the post title and the date below it, and only applies the filter to the main blog page and category archives, leaving other pages, like single blog post pages, to be styled separately, i've included a little of what I did to customize single pages at the end.

    // Add a custom post header
    function childtheme_postheader() {
        global $post; 
    
        if (is_page() || is_404() || is_single()) {
    
        } else { ?>
    		<h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php printf(__('Permalink to %s', 'thematic'), wp_specialchars(get_the_title(), 1)) ?>" rel="bookmark"><?php the_title() ?></a></h2>
    		<?php if ($post->post_type == 'post') { ?>
    		<div class="entry-meta">
    			<span class="entry-date"><abbr class="published" title="<?php get_the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('F jS, Y') ?></abbr></span>
    		</div><!-- .entry-meta -->
    		<?php } ?>
        <?php }
    }
    add_filter ('thematic_postheader', 'childtheme_postheader');
    
    //Add date to top of single pages
    function singlepage_postheader() {
    	if (is_single()) { ?>
    <div class="entry-meta">
                	<span class="entry-date"><abbr class="published" title="<?php get_the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('F jS, Y') ?></abbr></span>
                </div><!-- .entry-meta -->
    <?php } ?>
    <?php }
    add_action ('thematic_postheader','singlepage_postheader');
    Posted 10 years ago #
  4. kga
    Member

    Sorry for my delayed "thank you" but I greatly appreciate the info from both of you.

    This is what I needed. I just wanted to get an idea of where to start and I'll figure it out from here. I'm still trying to wrap my head around filter/hooks, but I'm getting it.

    Posted 10 years ago #
  5. kga
    Member

    helgaTheViking - when you say "the newr version" are you just referring to .9.6.2?

    Posted 10 years ago #
  6. no i mean 0.9.7.3

    the latest stable development releases are available at chris' website:

    http://developing.thematic4you.com/thematic-development-release/

    Posted 10 years ago #
  7. kga
    Member

    Ok thanks.

    Let's (please) go through something. I want the #blog-title to be right in line with #access. I can make it work with CSS (giving #branding the width of #blog-title, float it left, then float #access right, but I noticed in the them EarlyMorning that they're doing this through functions.

    First off, why?

    I opened up header-extensions.php as you suggested and see that #branding opens and ends before #access. The theme mentioned above put #access inside of #branding, floated it right and created the alignment.

    I guess maybe I'm too new to Wordpress all together, but I'm not getting the remove first (with lingo that I'm not familiar with), then add what you want.

    Here is the header-extension.php code that shows the opening of #branding and where #access closes

    [code]
    // Open #branding
    // In the header div
    function thematic_brandingopen() { ?>
    <div id="branding">
    <?php }
    add_action('thematic_header','thematic_brandingopen',1);

    // Create the blog title
    // In the header div
    function thematic_blogtitle() { ?>
    <div id="blog-title"><span>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></span></div>
    <?php }
    add_action('thematic_header','thematic_blogtitle',3);

    // Create the blog description
    // In the header div
    function thematic_blogdescription() {
    if (is_home() || is_front_page()) { ?>
    <h1 id="blog-description"><?php bloginfo('description') ?></h1>
    <?php } else { ?>
    <div id="blog-description"><?php bloginfo('description') ?></div>
    <?php }
    }
    add_action('thematic_header','thematic_blogdescription',5);

    // Close #branding
    // In the header div
    function thematic_brandingclose() { ?>
    </div><!-- #branding -->
    <?php }
    add_action('thematic_header','thematic_brandingclose',7);

    // Create #access
    // In the header div
    function thematic_access() { ?>
    <div id="access">
    <div class="skip-link">"><?php _e('Skip to content', 'thematic'); ?></div>
    <?php wp_page_menu('sort_column=menu_order') ?>
    </div><!-- #access -->
    <?php }
    add_action('thematic_header','thematic_access',9);

    // End of functions that hook into thematic_header()
    [/code]

    So I first remove what and add what? I guess I need to dig into it more, but I'd love to see (another) direct example using .9.6.2. And speaking of that, I guess I should be using .9.7.3??

    Posted 10 years ago #
  8. kga
    Member

    To add a bit more - the Early Morning theme is doing what I need here:

    <?php

    function remove_thematic_branding() {
    remove_action('thematic_header','thematic_blogdescription',5);
    remove_action('thematic_header','thematic_access',9);
    }
    add_action('init','remove_thematic_branding');

    // Add the Logo and Search Box next to the menu
    function childtheme_access(){ ?>
    <div id="access">
    <div class="skip-link">"><?php _e('Skip to content', 'thematic'); ?></div>
    <div id="menu">
    <?php wp_page_menu('sort_column=menu_order') ?>
    </div>
    </div><!-- #access -->
    <?php
    }
    add_action('thematic_header', 'childtheme_access', 4);

    As I read this it looks like it is removing the #blog-description and #access. But I don't get what this is doing:

    add_action('init','remove_thematic_branding

    Then its bringing #access back in, but I don't see how its suddenly placing #access INSIDE #branding. That totally loses me (as I buzz over this).

    Posted 10 years ago #
  9. lol, kga you are not alone. It'll break your brain, both in simplicity and complexity. Once you "get it" however, you can start doing very cool things, quickly.

    Here, play with this...

    Notice the line: add_action('thematic_header', 'childtheme_access', 4);

    Change the 4 to a 3, or a 2, or an 8...save it each time you change the number, and refresh the page. Notice how the menu moves into different divs? That number denotes where (or when) the childtheme_access is loaded within the header.

    When you start to get this stuff, you no longer have to spend hours fighting your CSS and 10 different div's to get things positioned where you want. You just have to spend 30 hours learning to "get" the whole thematic hooks'n'filter thing. A little pain now, but endless development bliss later.

    Posted 10 years ago #
  10. kga
    Member

    Thanks T - I'll do that and mess around with it.

    I had another site I'm building where I was wanting to put the header logo side by side with branding and kept having issues....but didn't know about this at that time (the z-index was creating major problems.). I'll apply this, mess around with it and see what I can figure out

    Thank you.

    Posted 10 years ago #
  11. another resource to help you wrap your head around this is the sticky post here titled
    Thematic Structure Diagram - widget areas included, it will give you the basic structure of what does what, and where it is.

    Posted 10 years ago #
  12. yeah this:

    http://bluemandala.com/thematic/thematic-structure.html

    i am there all the time.

    to get something side by side w/ branding i'd probably want to move the branding_open function to position 2 in the header and then put the logo in position one. then give both divs a width and display them inline?

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.