• Resolved IRONPIG1

    (@ironpig1)


    Hi, I’m totally new to WordPress and webdesign.

    Introduction
    I am currently trying to figure out how to configure and adjust WordPress themes to my liking, thus I thought using the “Twentythirteen” theme would be best suited as it seems to resemble what I have in mind the most.(Form of the site that is)

    So I read up and get why I should use the twentythirteen-child method.
    What I don’t get is the “functions.php and style.css”.

    Some sites say use @import in style.css but wordpress says enqueue via functions.php(which I am trying)

    This is my wordpress directory at the moment:
    G:\InstantWordPress\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\twentythirteen-child
    With functions.php and style.css in them.

    functions.php contents:

    <?php
    add_action( 'wp_enqueue_scripts', 'wpsites_load_parent_styles');
    function wpsites_load_parent_styles() {
        wp_enqueue_style( 'twentythirteen-styles', get_template_directory_uri("./twentythirteen").'/style.css' );
    }

    style.css contents:
    /*
    Theme Name: Twenty Thirteen Child
    Author: Piggy
    Description: Child theme for Twenty Thirteen Test
    Version: 1.0
    Text Domain: twentythirteen
    Template: twentythirteen

    */
    
    .site-header {
    			background: url(https://127.0.0.1:4001/wordpress/wp-content/themes/twentythirteen-child/images/headers/bluebar.png) no-repeat scroll top;
    			background-size: 1600px auto;
    		}

    Problem
    So I created those folders images>headers and added the picture in it, bluebar.png to replace the circles.png(in parent theme directory) as a troubleshooter.
    My site-header remained default, it is as if the parent theme is overshadowing the child and not the other way around as it should.

    I have tried changing my functions.php to include the other CSS in the directory which is ‘rtl.css’ but no luck.

    What should I do for these changes to take place?(Note the changes are in the developer when viewing the site via instant wordpress but I have to deselect them there to make the “bluebar.png” show rather than the “circles.png”)

    Help would be much appreciated!
    Piggy

Viewing 12 replies - 1 through 12 (of 12 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Before you get to your problem, does this work:

    <?php
    add_action( 'wp_enqueue_scripts', 'wpsites_load_parent_styles');
    function wpsites_load_parent_styles() {
        wp_enqueue_style( 'twentythirteen-styles', get_template_directory_uri("./twentythirteen").'/style.css' );
    }

    ?

    Thread Starter IRONPIG1

    (@ironpig1)

    Andrew: “Before you get to your problem, does this work: ?”

    I am honestly not sure, I’ve tried:

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'twentythirteen-style', get_template_directory_uri() . '/style.css' );
    
    }

    With “@import url(“../twentythirteen/style.css”);” in style.css the the header image did indeed change.

    I am currently trying this method found in codex.wordpress:

    function theme_enqueue_styles() {
    
        $parent_style = 'parent-style';
    
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style )
        );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

    Let’s see what happens.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Damn Codex making something that’s supposed to be easy into something complicated.

    Thread Starter IRONPIG1

    (@ironpig1)

    Andrew: “Before you get to your problem, does this work: ?”

    Yes it has to as it is loading the page right? Otherwise activating my twentythirteen-child theme would be a blank page?
    Activating my twentythirteen-child theme brings up the original twentythirteen theme.

    Sorry, my noob brain was clutching a bit there.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes it has to as it is loading the page right? Otherwise activating my twentythirteen-child theme would be a blank page?

    If it wasn’t working then you would not be getting any styles, but you wouldn’t get a completely blank page.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So I created those folders images>headers and added the picture in it

    What are you trying to override with this?

    Thread Starter IRONPIG1

    (@ironpig1)

    So here is an example: href=”https://postimg.org/image/5te9ojeex/”&gt;

    The top arrow is pointing at the box that I had to un-tick for the bottom line I wrote in my style.css (in twentythirteen-child) to become active and as you can see it is displaying the bluebar.

    So how do I go about making my child theme overide it’s parent?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks like you just need to use more specific selectors, e.g.:

    body .site-header {
    
    }

    Thread Starter IRONPIG1

    (@ironpig1)

    You Sir, have made these eye-tearing-staring @ stuff that makes no sense, yet, fun ?? thank you! Finally now I can Edit the sizes and add some buttons to it ?? Just need a softer blue.

    Andrew: “Looks like you just need to use more specific selectors, e.g.:

    body .site-header {
    
    }


    Thank you! <3

    Thread Starter IRONPIG1

    (@ironpig1)

    One more thing,

    Why “body” if the original did not use such a selector? it was just “.site-heare” with nothing infront of it. Just how code works?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s how CSS works. More specific selectors override less specific selectors. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Thread Starter IRONPIG1

    (@ironpig1)

    Thank you, very helpful info!

    So editing wordpress themes it would be a good idea to read some CSS & HTML5 books I guess. I was under the impression it would all be GUI editing (^^,) but this seems quite logical, just quite an unfamiliar basis.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘twentythirteen-child problems functions.php & style.css’ is closed to new replies.