• Resolved Marcihess

    (@marcihess)


    I’m working on https://www.driftlessprairies.org It seems this topic should be super simple — click of the “featured image” button, but that’s not working. I have the image in the media catalog and it even shows the image as the featured image under Beekeeping/Interesting Facts in the edit pages, but when I refresh and view the page, the image doesn’t show up. Can you help me figure out why mine isn’t showing up? Thanks a bunch for your help!

Viewing 15 replies - 16 through 30 (of 38 total)
  • Ah, I figured it out!

    There is a function that is setting non-default headers to 990 x 180, and we need to override it. Stand by while I post some instructions for you. ??

    Alright, I did a multi-file search for the number 180 and found a function in /inc/custom-header.php where the 180px height is being set for custom headers. That’s what was changing the height when featured images were used as custom headers.

    In order to override the 180px height, you’re going to need to set up a child theme, so your tweaks won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:

    https://codex.www.ads-software.com/Child_Themes
    https://op111.net/53/
    https://vimeo.com/49770088

    Once your child theme is set up, create an empty, plain-text file and name it functions.php. Copy this code into the file:

    <?php
    function childtheme_header_image_height() {
    return 400; /* height in px */
    }
    add_filter( 'coraline_header_image_height', 'childtheme_header_image_height' );
    ?>

    This will override the 180px default height for featured images as custom headers.

    After you do that, you’ll need to regenerate your images by using a plugin like this:
    https://www.ads-software.com/plugins/regenerate-thumbnails/

    You should also be able to take !important out of this CSS:

    #branding img {
    width: 990px;
    height: 400px !important;
    }

    That should do the trick. Let me know how it goes!

    Thread Starter Marcihess

    (@marcihess)

    I’ve never created a child theme but am up to the challenge. The instructions are not for non-tech folks like me. So…with a few other googles, I have the child created and I’ve added the style.css folder and the functions.php file but…I can’t “activate” it. Here’s the message I get in my themes folder:

    Broken Themes
    The following themes are installed but incomplete. Themes must have a stylesheet and a template.
    Name Description
    Coraline-child The parent theme is missing. Please install the “Coraline” parent theme.

    What have I not done or done wrong? I haven’t done anything about the regeneration issue as I figured I need to get this fixed first.

    Congratulations on tackling this challenge. ??

    Looking at the error message, I’m guessing that you haven’t quite got the top part of the child theme coded correctly.

    Let’s say you’ve named your child theme folder coraline-child – then your Child theme will have something like this at the top:

    /*
     Theme Name:     Coraline Child
     Description:    Coraline Child Theme
     Template:       coraline
     Version:        1.0.0
    */
    
    @import url("../coraline/style.css");

    Let me know if that makes sense. Be sure the child theme’s folder name and the template name both have no capital letters in it.

    If you still have trouble, could you paste the content of your child folder’s style.css here between code tags so I can have a look?

    Thread Starter Marcihess

    (@marcihess)

    Yea-who!!!! Got it all together and activated the child. I installed the Regenerate Thumbnails plug in as well. Should I try another feature pic now?

    Thread Starter Marcihess

    (@marcihess)

    I hadn’t checked the actual site before sending the above e-mail. There’s something more that needs to be done as it’s now just text with no formatting. I guess I screwed up the css. https://www.driftlessprairies.org Oh boy — one thing leads to another! Thanks for the help!!

    Looks like there are a few problems here:

    1) There’s a capital letter in your child theme folder. You named it Coraline-child but it should be coraline-child

    2) Your path to the child theme style file is not right:

    https://driftlessprairies.org/wp-content/themes/Coraline-child/Style.css/style.css?ver=3.8.1

    This line in your child theme:

    @import url("coraline/style.css");

    Should look like what I posted above:

    @import url("../coraline/style.css");

    Note the two dots and slash before coraline.

    You’ll need to reselect and activate your child theme after making the above fixes.

    Thread Starter Marcihess

    (@marcihess)

    The site is still with no format so I’ve still not done something correctly. So sorry about the Caps — I didn’t think of the file name, only the contents. And again sorry about the ../ omission — wasn’t think of code as much as I was thinking of English and thinking the .. meant something before it!

    My path to the child theme??? Still not sure I have that right and shouldn’t “coraline-child” in the middle there be without a cap as I have it below? Here’s the style.css page. Did I put the child theme style file path in the right place? I’m only guessing that it goes in the “theme URI” place? So sorry — it’s the plight of not knowing code. I am working on learning enough so this isn’t so difficult for all of us.

    /*
    Theme Name: coraline-child
    Theme URI: https://driftlessprairies.org/wp-content/themes/coraline-child/Style.css/style.css?ver=3.8.1
    Description: coraline child template
    Author: driftlessprairies
    Author URI: http: //driftlessprairies.org/
    Template: coraline
    Version: 1.0.0
    */

    @import url((“../coraline/style.css”);

    /* =Theme customization starts here

    Once I made these changes there was no option to “reactivate” as it shows active already.

    You’re so close! Now you have an extra opening bracket here:

    @import url(("../coraline/style.css");

    Should be

    @import url("../coraline/style.css");

    You’re also missing a closing comment tag here:

    /* =Theme customization starts here

    should be

    /* =Theme customization starts here */

    Is the style.css file in the main folder of your child theme(as opposed to being inside a sub-folder)? Looking at the site now, I can see:

    <link rel='stylesheet' id='coraline-css' href='https://driftlessprairies.org/wp-content/themes/coraline-child/Style.css/style.css?ver=3.8.1' type='text/css' media='all' />

    which suggests that you are trying to use a file called style.css inside a folder called Style.css inside your coraline-child theme.

    Hi esmi, the parent theme’s stylesheet is right where you’d expect. ??

    https://driftlessprairies.org/wp-content/themes/coraline/style.css

    Thread Starter Marcihess

    (@marcihess)

    I correct the theme customization omission.

    So…when I created the style.css at my hosting site I wasn’t able to put a file inside of the child directory; I could only create a folder. I just did a chat with the hosting site and they say I need to use File Zilla?? Is this right?

    Why would a theme have a feature image option that seems so user friendly if this is what it takes to use it? And the WP Codex leaves out a lot of info that needs to be there for someone like me!!

    That’s right, you need to use an FTP program to upload or download files to your host. It can be Filezilla or another program. Once you get the hang of it, FTP is quite simple to use, but I realize this is a lot of new stuff to be learning at once!

    https://codex.www.ads-software.com/FTP_Clients

    Why would a theme have a feature image option that seems so user friendly if this is what it takes to use it?

    I can understand that you’re frustrated. Featured images don’t normally need a child theme to be used. The reason it does in this case is that you’re trying to override a default height set in the theme.

Viewing 15 replies - 16 through 30 (of 38 total)
  • The topic ‘Featured image’ is closed to new replies.