ThemeShaper Forums » Thematic

[closed]

From Parent to Child template

(25 posts)
  • Started 9 years ago by mpanda
  • Latest reply from mpanda
  • This topic is resolved

Tags:

  1. mpanda
    Member

    Hello,

    I'd need to know how to 'save' my customized parent Thematic as a child template.

    I'm using Wp 286 and Thematic 0951

    Any help is much appreciated.

    Thanks,

    Mario

    Posted 9 years ago #
  2. Hi,

    Start by compiling a list of thematic templates and function files that you have edited and post the edits *one* at a time here and we'll work through it edit by edit. :) Also it wouldn't be a bad idea to upgrade WP to the current release and Thematic as well. At the time of this post... ( wp 2.9.2 thm 0.9.6.1)

    -Gene

    Posted 9 years ago #
  3. mpanda
    Member

    Thank you very much Gene, I completely appreciate your willingness to help me through this task.

    Well...just a statement....unfortunately I cannot upgrade wp to latest release to prevent any unexpected db conflict with the stability of some 'core' plugins.

    Said that, my customization basically consists in a full square area without sidebar + the insertion of few flash objects in header.

    To do that I changed several values in: default.css, 2c r fixed.css and header.

    Such a customization had been made 4 months ago and worked fine since the very first try so I warmly hope God will help me to not miss other files or steps or details that I reasonably could not remember now.

    Where you refer to post 'edits' do you mean just single lines or single files?

    Thanks,

    Mario

    Posted 9 years ago #
  4. @Mario: Maybe you can use the compare add-on for e.g. Notepad++ so you can compare a clean copy of a Thematic file (e.g. 0.9.5.1 if your edits were made on that version) to your version and then paste those edits here.

    Posted 9 years ago #
  5. mpanda
    Member

    Thank you Flick, I'll do it by Notepad++.

    Mario

    Posted 9 years ago #
  6. mpanda
    Member

    Well, here's the edit version of 2c-r-fixed.css:
    (code)
    /*
    LAYOUT: One-Column (Right) Fixed
    DESCRIPTION: Two-column 950px fixed layout with one sidebar right of content
    */

    body {
    min-width:1024px;
    }
    #header {
    position:relative;
    }
    #branding {
    width:1024px;
    margin:0 auto;
    }
    #access {
    position:relative;
    overflow:hidden;
    }
    .menu {
    width:1024px;
    margin:0 auto;
    }
    #main {

    width:1024px;
    margin:0 auto;
    overflow:;
    position:relative;
    }
    #container {
    width:980px;

    float:;
    }
    #content {
    margin:0 0 0 10px;
    width:980px;
    overflow:;
    }
    .main-aside {
    width:100px;
    float:right;
    position:relative;
    right:10px;
    }
    #secondary {
    clear:right;
    }
    #footer {
    clear:both;
    }
    #subsidiary {

    width:960px;
    margin:0 auto;
    overflow:hidden;
    }
    #subsidiary .aside {
    width:100px;
    float:left;
    margin:0 20px 0 0;
    }
    #subsidiary #third {
    margin:0;
    }
    #siteinfo {
    clear:both;
    width:940px;
    margin:0 auto;
    }
    (/code)

    Hope the code will display correctly.

    Thanks,

    Mario

    Posted 9 years ago #
  7. The trick is to compare this altered file to the original file and write the new differences to your child theme's style.css. The cascade will work in your favor to override the imported 2c-r-fixed.css.

    The styles should be easy enough for you to find the differences. Go ahead an bring on another of your edits to the parent.

    Also to properly display code you can put code in between backtick ( ` ) characters.

    -Gene

    Posted 9 years ago #
  8. mpanda
    Member

    Here's the only edit to Default.css:

    li.content-column {
    
        float:;
        margin-right:20px;
        width:100%;

    Gene, I'm not sure I got well what I have to do.
    I mean, have I to copy & paste entire contents of either modified 2c-r-fixed.css or default.css into thematicsamplechildtheme/style.css?

    Thank you,

    Mario

    Posted 9 years ago #
  9. You could do either but I'd be best just to copy over the style declarations that you want to override in the 2c-r-fixed.css & default.css

    Posted 9 years ago #
  10. mpanda
    Member

    I'm really sorry Gene but I cannot get what you refer to as I'm not familiar to this task.

    What I see in child style.css are declarations and a couple of them already refer to 2c-r-fixed.css & default.css:

    /* Apply a basic layout */
    @import url('../thematic/library/layouts/2c-r-fixed.css');
    
    /* Apply default theme styles and colors */
    /* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
    @import url('../thematic/library/styles/default.css');

    It seems such a declarations tell WP to import 'original' 2c-r-fixed.css & default.css, so I cannot understand what I have to do with my customized 2c-r-fixed.css & default.css.
    Maybe I don't get what you mean for 'override in' (sorry, my limitation of course)

    I could be too 'green' for this task and I don't want to waste your time and patience at all.

    Thanks

    Posted 9 years ago #
  11. mpanda
    Member

    Here's the edit applied to header.php

    <?php thematic_before(); ?>
    
    <div id="wrapper" class="hfeed">
    
    <?php thematic_aboveheader(); ?>
    
    <div style="float:right; margin-top:95px; margin-right:30px; width: 60px; text-align: center;">
    <object id="popcontrols" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="55" height="30" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"><param name="align" value="middle" /><param name="allowScriptAccess" value="sameDomain" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="src" value="http://www.milanoleathergoods.com/popcontrols.swf" /><param name="name" value="popcontrols" /><embed id="popcontrols" type="application/x-shockwave-flash" width="55" height="30" src="http://www.milanoleathergoods.com/popcontrols.swf" quality="high" bgcolor="#ffffff" allowscriptaccess="sameDomain" name="popcontrols" align="middle"></embed></object>
    <a>re-start music</a>
    </div>
    <div style="float:right; margin-top:85px; margin-right:525px; width: 65px; text-align: center;">
    <img class="size-full wp-image-1662" title="Hello world!" src="http://www.milanoleathergoods.com/it/wp-content/uploads/2009/11/rotating-globe.gif" alt="Tutto il mondo acquista prodotti in pelle su Milano Leather Goods" width="50" height="50" />
    </div>
    
        <div id="header">
            <?php thematic_header() ?>
        </div><!-- #header-->

    Thanks,

    Mario

    Posted 9 years ago #
  12. Hi mpanda,

    No worries ;) From what you've posted I've created a stylesheet only including the differences from the imported styles:

    /*
    Theme Name: Mpanda's Child Theme
    Theme URI:
    Description: Use this theme to start your Thematic Child Theme development.
    Author: Ian Stewart
    Author URI: http://themeshaper.com/
    Template: thematic
    Version: 1.0
    Tags: Thematic
    .
    Thematic is © Ian Stewart http://themeshaper.com/
    .
    */
    
    /* Reset browser defaults */
    @import url('../thematic/library/styles/reset.css');
    
    /* Apply basic typography styles */
    @import url('../thematic/library/styles/typography.css');
    
    /* Apply a basic layout */
    @import url('../thematic/library/layouts/2c-r-fixed.css');
    
    /* Apply basic image styles */
    @import url('../thematic/library/styles/images.css');
    
    /* Apply default theme styles and colors */
    @import url('../thematic/library/styles/default.css');
    
    /* Prepare theme for plugins */
    @import url('../thematic/library/styles/plugins.css');
    
    /*	Child Theme Styles To Override 2c-r-fixed.css	*/
    
    body {
    	min-width:1024px;
    }
    #branding {
    	width:1024px;
    }
    .menu {
    	width:1024px;
    }
    #main {
    	width:1024px;
    }
    #container {
    	width:980px;
    }
    #content {
    	width:980px;
    }
    .main-aside {
    	width:100px;
    }
    #subsidiary {
    	width:960px;
    }
    #subsidiary .aside {
    	width:100px;
    }
    /*	Child Theme Styles To Override default.css	*/
    
    li.content-column {
    	width:100%;
    }

    For more info on the using modular CSS and the cascade:

    http://csswizardry.com/toybox/use-the-cascade/

    http://themeshaper.com/modular-css-wordpress-child-themes/

    - I'll look at your header.php later on tonight

    Posted 9 years ago #
  13. mpanda
    Member

    By comparing either index or page.php I've found this:

    </div><!-- #container -->
    
    <?php get_footer() ?>

    I deleted <?php thematic_sidebar() ?>, the call to sidebar in order to have a full square body.

    At last I compared footer.php and the only change is this google analytics add just before 'body' closing tag:

    <?php thematic_after(); ?>
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("xx-yyyyyyyy-x");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </body>

    That's all Gene.
    I hope to have not miss other changes but I don't think so as basically my changes have been oriented to have a full square area without sidebar.

    Thanks.

    Mario

    Posted 9 years ago #
  14. mpanda
    Member

    @Gene

    For more info on the using modular CSS and the cascade:
    
    http://csswizardry.com/toybox/use-the-cascade/
    
    http://themeshaper.com/modular-css-wordpress-child-themes/
    
    - I'll look at your header.php later on tonight

    Thank you for references, I'll read them to get better what we're doing, :)

    Mario

    Posted 9 years ago #
  15. Here are examples of how you could do some of that in you child's functions.php

    function child_above_header() { ?>
    
    <div style="float:right; margin-top:95px; margin-right:30px; width: 60px; text-align: center;">
    <object id="popcontrols" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="55" height="30" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"><param name="align" value="middle" /><param name="allowScriptAccess" value="sameDomain" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="src" value="http://www.milanoleathergoods.com/popcontrols.swf" /><param name="name" value="popcontrols" /><embed id="popcontrols" type="application/x-shockwave-flash" width="55" height="30" src="http://www.milanoleathergoods.com/popcontrols.swf" quality="high" bgcolor="#ffffff" allowscriptaccess="sameDomain" name="popcontrols" align="middle"></embed></object>
    <a>re-start music</a>
    </div>
    <div style="float:right; margin-top:85px; margin-right:525px; width: 65px; text-align: center;">
    <img class="size-full wp-image-1662" title="Hello world!" src="http://www.milanoleathergoods.com/it/wp-content/uploads/2009/11/rotating-globe.gif" alt="Tutto il mondo acquista prodotti in pelle su Milano Leather Goods" width="50" height="50" />
    </div>
    
    <?php 
    
    }
    
    add_action('thematic_aboveheader','child_above_header');
    
    function child_analytics() { ?>
    
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("xx-yyyyyyyy-x");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    
    <?php
    
    }
    
    add_action('thematic_after','child_analytics');
    Posted 9 years ago #
  16. For more info on using theme hook as I demonstrated above look here:
    http://themeshaper.com/thematic/guide/?page_id=10

    The sidebar bit is trickier a couple ways you could go about it. The simplest and quickest is to use this CSS in your child's style.css.

    .page .main-aside, .blog .main-aside { display:none:}

    or you could look at my first post in this thread for a function to conditionally remove sidebars from parts your site.
    http://forums.themeshaper.com/topic/cant-is_front_page-on-filter-thematic_widgetized_areas
    following my example there you could use the condition:

    if ( !is_home() || !is_front_page() || !is_page()  ) {

    That should have the general effect that you had in removing the sidebar function from the index and page templates.

    Look here for a complete list of conditional tags: http://codex.wordpress.org/Conditional_Tags

    -Gene

    Posted 9 years ago #
  17. mpanda
    Member

    Gene,

    it works!:)
    I've no words...I'm very very thankful to you, I never encountered such a willingness like yours so far in web.

    Just few details before to apply changes to official site.
    Have I to overwrite customized parent's dir with the standard one?
    Can I copy and paste current test child template dir from wp test dir to official one? Have I to make some change?
    Does the latest Thematic version make some changes to db in the event I would keep wp 2.8.6.? There might occur some issue?

    Thank you,

    Mario

    Posted 9 years ago #
  18. For safety's sake make a backup of the thematic directory you altered in case you missed something. Then install thematic 0.9.6.1 Now you can add your new child theme to the themes directory and activate it. All should be well. If not you can always revert back to a fresh install of 0.9.5.1 or the edited version of thematic you backed up at the beginning of this step.

    If you're nervous about your database by all means make a backup but to my knowledge there is nothing that thematic does to the db that is going to cause you any problems.

    -Gene

    Posted 9 years ago #
  19. mpanda
    Member

    Hi Gene,

    I encountered some problems either related to 0.9.5.1 or 0.9.6.2

    1) My bad, I missed to mention pagination changes to 0.9.5.1 parent's page.php so child's function.php has no string to manage it.
    Moreover, 0.9.6.2 parent's page code seems changed than 0.9.5.1 so, just for testing, if I apply the same customization I get this error:
    Parse error: syntax error, unexpected '<' in /home/mpanda/public_html/ITA/wp-content/themes/thematic/page.php on line 38

    This is the customized string `<div class="pagelink"><?php wp_link_pages('before=Guarda tutti i modelli disponibili in questa fascia di prezzo: &after=. &pagelink=Pagina %') ?></div>
    <?php edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>`

    A couple of notes.
    Line 38 is empty so I cannot understand how wp will see such a parse error.
    If I rename 0.9.6.2 page.php to page.php.old and I apply 0.5.9.1 page.php I do not get parse error but I don't know if it's allowed to use old version page.php into latest Thematic version.

    2) My bad, when I tested customized 0.5.9.1 child theme I miss to use child function.php so just child style.css resulted enough to make it apparently working well but when I discovered my bad I used child function.php and I got this: Parse error: syntax error, unexpected '}' in /home/mpanda/public_html/ITA/wp-content/themes/thematicsamplechildtheme/functions.php on line 38

    Such an error will occur also after upgrading to 0.9.6.2 version.

    This is the child function.php:

    <?php
    
    //
    //  Custom Child Theme Functions
    //
    
    // I've included a "commented out" sample function below that'll add a home link to your menu
    // More ideas can be found on "A Guide To Customizing The Thematic Theme Framework"
    // http://themeshaper.com/thematic-for-wordpress/guide-customizing-thematic-theme-framework/
    
    // Adds a home link to your menu
    // http://codex.wordpress.org/Template_Tags/wp_page_menu
    //function childtheme_menu_args($args) {
    //    $args = array(
    //        'show_home' => 'Home',
    //        'sort_column' => 'menu_order',
    //        'menu_class' => 'menu',
    //        'echo' => true
    //    );
    //	return $args;
    //}
    //add_filter('wp_page_menu_args','childtheme_menu_args');
    
    ?>
    function child_above_header() { ?>
    
    <div style="float:right; margin-top:95px; margin-right:30px; width: 60px; text-align: center;">
    <object id="popcontrols" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="55" height="30" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"><param name="align" value="middle" /><param name="allowScriptAccess" value="sameDomain" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="src" value="http://www.milanoleathergoods.com/popcontrols.swf" /><param name="name" value="popcontrols" /><embed id="popcontrols" type="application/x-shockwave-flash" width="55" height="30" src="http://www.milanoleathergoods.com/popcontrols.swf" quality="high" bgcolor="#ffffff" allowscriptaccess="sameDomain" name="popcontrols" align="middle"></embed></object>
    <a>re-start music</a>
    </div>
    <div style="float:right; margin-top:85px; margin-right:525px; width: 65px; text-align: center;">
    <img class="size-full wp-image-1662" title="Hello world!" src="http://www.milanoleathergoods.com/it/wp-content/uploads/2009/11/rotating-globe.gif" alt="Tutto il mondo acquista prodotti in pelle su Milano Leather Goods" width="50" height="50" />
    </div>
    
    <?php 
    
    }
    
    add_action('thematic_aboveheader','child_above_header');
    
    function child_analytics() { ?>
    
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("xxx-ddddd-yy");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    
    <?php
    
    }
    
    add_action('thematic_after','child_analytics');
    
    function remove_thm_canonical($thm_canonical_link) {
            global $page;
    
    	/* remove canonical for paged pages > 1 */
    	if ( is_page() && $page > 1 ) {
    		// remove action for  WP 2.9+ function
    		remove_action( 'wp_head', 'rel_canonical' );
    		// empty Thematic's canonical link
    		$thm_canonical_link = null;
    	}
    	/* if WP 2.9 function exists empty Thematic's
                            canonical link to prevent duplicate link*/
    	if ( function_exists ('rel_canonical') ) {
    		$thm_canonical_link = null;
    	}
            return $thm_canonical_link;
    }
    add_filter( 'thematic_canonical_url', 'remove_thm_canonical' );

    Hope my explanation will result clear enough.

    I'm sorry but often my only free time is overnight where my mind and eyes are very tired and some test mistakes might occur in copy & paste codes or paths or files from a version to another.

    Thanks,

    Mario

    Posted 9 years ago #
  20. Hi Mario,

    In this case a premature PHP closing tag is causing a parse error on line 38 because of the improper occurrence of a curly brace.

    Try removing the ?> on or around your line 24

    This may help. When you get a syntax error such as that, the actual typo or mistake has usually happened prior to the line reporting the error.

    -Gene

    Posted 9 years ago #
  21. mpanda
    Member

    Thank you so much Gene,

    you're right, I've found a couple of 'orphan' '?>' Sorry..:)

    Now either child function.php or parent page work in both Thematic versions.

    In order to continue upgrading frome time to time without thrills the only step I miss is a code to child theme related to customized page.php.

    Have I to paste it into childtheme dir 'as is' or I have to add some more code in function.php?
    I've pasted it 'as is' into childtheme dir and it seems to work well but I'm not sure if it's allowed such a trick.

    Thank you,

    Mario

    Posted 9 years ago #
  22. I'm not quite clear on what you're asking and what you have left to do.

    Posted 9 years ago #
  23. mpanda
    Member

    Sorry for my very basic english.

    I mean, now I have a customized page.php (to manage paged pages) in parent dir.
    Each time I will upgrate Thematic to a new version such a customized page.php will be overwritten, so I wonder how I can save it?

    My first idea is to copy and paste it into child dir (just to put in safe it and to use it at the same time), then to upgrade Thematic in order to have a clean and original page.php file in parent dir.

    Dose it sound 'insane' to you such a trick?

    Posted 9 years ago #
  24. It is perfectly acceptable for you to put your custom page.php into your child theme. It will override the one from thematic. If you encounter issues with your child theme's page.php later on, come on back to the forums and start a new thread.

    I'm glad to have gotten you started on your fist child theme.

    -Gene

    Posted 9 years ago #
  25. mpanda
    Member

    Without your 'vital' support it should have been a mission impossible.

    Thank you very much Gene! :)

    Mario

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.