Creativix Child Style Issues

  • Resolved skipper0802

    (@skipper0802)


    12 years, 9 months ago

    WP-creativix 2.4
    chrome 19
    Laughing Squid hosting

    We really like the way this theme looks and feels. Here’s the current appearance.

    Our previous mistake we made was making changes to the parent style.php and style.css without constructing a working child theme first.
    WP-Creativix Child: Stylesheet (style.css)

    /*
Theme Name: WP-Creativix Child
Template: wp-creativix
Version: 1.0
Author: Eric Abbott
*/
etc.

    We did, however, want to save our styling changes after-the-fact. We noted this article, and this post, and a few other posts from the 351 posts returned by searching by “creativix child theme”. However, when we created our style.css within the child directory (and installed it), further changes to our child theme file did not take effect. We tried creating a child functions.php file like the above post suggested, but this action broke our site, and displayed an empty white browser.

    We have footer.php, header.php, and style.css file present in the child directory. (Eventually, we intend to “cut out” our specific changes to these *.php files for a specific functions.php file in our child directory. Is this method correct?

    Does the lack of child CSS inclusion have something to do with the path that is called by the template files? That is to say:
    Post

    The problem, most likely, is that the <link> tag for “style.css” in the document head is using get_template_directory_uri(), rather than get_stylesheet_directory_uri(). If this is the case, then the Child Theme will never have its own stylesheet loaded, because get_template_directory_uri() returns the URL for the *template*, i.e. the Parent Theme. Thus, if this is the case, you’ll need to add “header.php” to your Child Theme, so that you can change this reference.

    RESOLVED!!
    We added this line directly under the <head> tag of our child header.php file:
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

    Our last question now while understanding that the child style sheet should load last and override the parent style. When the “inspect element” feature is viewed the last style link is our style.css. Is this correct?

    Thanks,

    Eric & Barb

Viewing 11 replies - 1 through 11 (of 11 total)

  • If the child theme style.css has the correct lines then you do not need the line in the <head> tags

    The child themes folder sits at the same level as the parent, looking at your style.css Case Sensitive ( make theme folders lowercase with no spaces )

    If the folder is WP-creativix then Template: WP-creativix

    parent should be: /wp-content/themes/wp-creativix/
    child could be: /wp-content/themes/creativix-child/

    The child stylesheet would load the parent styles first, then cascade to the child styles:

    /*
Theme Name: WP-Creativix Child
Template: wp-creativix
Version: 1.0
Author: Eric Abbott
*/

/* =Do not add styles before the Stylesheet import
-------------------------------------------------------------- */
@import url('../wp-creativix/style.css');

/* =Add styles changes below this line
-------------------------------------------------------------- */

    Optional: Add the screenshot from the parent
    child theme functions.php if required:

    <?php

/* Add code here that needs to run before the parents functions.php */

/**
 * Tell WordPress to run post_theme_setup()
 * when the 'after_setup_theme' hook is run.
*/

add_action( 'after_setup_theme', 'post_theme_setup' );

if ( !function_exists( 'post_theme_setup' ) ):
function post_theme_setup() {
   /* place for code to execute after parents functions.php */

}
endif;

    HTH

    David

    The problem might be the space, use hyphons ‘-‘ for spaces, as you are not uploading via the admin panel, you currently have:
    /wp-content/themes/wp-creativix child/

    change to:
    /wp-content/themes/creativix-child/

    HTH

    David

    Thread Starter skipper0802

    (@skipper0802)

    Hello D/R,
    Thanks for the prompt response. This issue was driving me nuts. I do think the space in the child folder name was the cause of the issue.

    Last, adding our favicon code line should now go in the post-theme code sequence above? If so, before or after parent functions.php runs? I presume that this new file is named “functions” in our child directory?

    Yes, you’ve helped tremendously.

    Eric & Barb

    Hi,
    Always something we never expect!

    favicon code will go into the header.php (copied parent to child) between the <head></head> tags.

    functions.php is only required if you need to add a function or over-ride a pluggable function

    WordPress will run the child themes functions.php first then the parents, that is why we use the ‘after_setup_theme’ hook (trigger), this will run last.

    HTH

    David

    Thread Starter skipper0802

    (@skipper0802)

    D/R,
    I removed the style link code line from the child header.php file. When I examine the page source from a refreshed browser state, it appears that my child style.css is not loaded. This is incorrect is it not?

    Eric

    Three options:
    1. Use FireFox and FireBug > CSS and view the stylesheets.

    2. Admin > Apperance > Editor > Style.css and have a look!

    3. Another quick test is add a style, change the title or header color, save then ctrl+f5 to see the change, if you see it all is ok

    HTH

    David

    Thread Starter skipper0802

    (@skipper0802)

    Ahh. Thanks David!

    Hey Skipper – have you been able to resolve all of this? I am actually experimenting with the same theme to use on a multidomain setup. Ultimately I’d like to have 3 subdomains all pulling the same content from the main site, and be able to assign a different child-theme to each subdomain. I think I’m having the same issue you had of the child theme looking for and pulling the parent theme stylesheet…

    Thread Starter skipper0802

    (@skipper0802)

    Hiya William,
    After some mucking around with various issues we found that:
    (1) The child theme directory (folder) name cannot have any spaces
    (2) The child theme must be viewed and installed within the manage themes/install themes dashboard
    (3) The child theme at a minimum must contain a style.css file. (Initially we copied the style.php styling content over to our CSS child file as a start.
    (4) Any changes to style in our child style file must be used with the “!important” attribute in order to for the change to override the parent style (as viewed from Chrome/view element tool).
    (5) We added the following link code line to our child header.php file:

    <!-- line added to include/force child css to load? -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>

    in order to (force?) the child CSS to load. We’re not certain why this works but it does. IIRC, without this line our doesn’t appear to load at all. Otherwise, our child CSS loads first in the page source so we’re hoping this is the correct setup. We had the former understanding that CSS files that load last take precedence over the parent CSS.

    I think that all of our lessons-learned from this evolution. (If anyone else knows otherwise please let us know here so we can make it right.)

    Hope this helps William!

    Cheers,
    Eric & Barb

    Thread Starter skipper0802

    (@skipper0802)

    @david,
    I must have done something wrong when I added a child functions.php with the ‘after_setup_theme’ hook (trigger) above with the cart wrapping code lines inclusive. That code here.

    I understand the idea…I must have a code error somewhere.

    Thx,
    Eric & Barb

    Thread Starter skipper0802

    (@skipper0802)

    @ David,
    I’m going to do more attempts with your code above because I know that’s where the final solution will likely be. (As far as appending the parent functions.php file from the child folder.)

    The short-term solution.

    Thanks Friend,
    Eric

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Creativix Child Style Issues’ is closed to new replies.