Front page sidebar not styling

  • Resolved Erik Harris

    (@eharris)


    5 years, 1 month ago

    I’m using a 2017-based child theme on my wife’s business page, and I’m using Custom Sidebars to put a sidebar on the front page. I’ve got the exact same child theme and Custom Sidebars plug installed on a dev/test page at https://dev.eharrishome.com/ – The “Does This work?” Sidebar block is identical to the “Recent News” Sidebar block on https://www.harriswholehealth.com/

    However, only the dev/test version is being styled! As far as I can tell, I’m doing nothing different (same theme files, same plugin version, same sidebar block type), but the blocks of code being used are entirely different between the two sites. On the dev/test site, the section title (“Does this work?”) is an H2 element, but on the “real” page, it’s not. On the dev/test site, each block is contained in a SECTION element, but on the “real” page, they’re not.

    Does anyone have any insight into why these element tags are missing from my sidebar on Harris Whole Health? They’re present on any other page’s sidebar, but not on the main page sidebar.

    • This topic was modified 5 years, 1 month ago by Erik Harris.

    The page I need help with: [log in to see the link]

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

  • Hello @eharris,

    I hope you’re doing well!

    I’ve checked the staging site and the production site and they are not identical when it comes to content/template set up. Is the same widget type is used on both sites? Based on CSS classes on both sites the widgets used are different.

    On the production site, there are mix-content errors showing up, please try fixing it to see if any of the styles are blocked because of that. You may fix mix-content errors with WordPress Force HTTPS. Otherwise, you may replace all links on your site from HTTP to HTTPS with Search & Replace plugin.

    If the issue still persist, please clone your production site to a staging site as it is and run a test for a conflict with another plugin.

    To run this test, please deactivate all plugins, and see if the styling has been changed and widgets are loading the right Title. Please try with different widgets, perhaps some other widgets that are in the sidebar are breaking the appearance.

    Let us know how it went!

    Kind regards,
    Nastia

    Thread Starter Erik Harris

    (@eharris)

    Nastia – That’s where I’m confused; the HTML blocks being used are definitely not identical (and therefore, neither is the CSS), but as far as I can tell, the setup is identical.

    Both are Custom Sidebar widget containers, and both contain “Recent Posts” blocks. The only obvious difference was that the “Recent Posts” block is first on the live site, and second on the dev site. So I moved it to first on the dev site, and the result is the same. You can see the widget setups side-by-side here: https://www.harriswholehealth.com/WidgetCompare.png – Note that the issue existed before I added the small “Custom HTML” widget. One is called “Home” and the other is called “About” simply because the two sites have differently-named front pages.

    I found the remaining explicit non-https link and changed it to a relative link, so the front page is no longer giving a mixed-content error.

    I haven’t yet gone as far as creating another clone site, but the dev site does have most of the plugins I use on any of my live sites, such that if there are conflicts, they should be more common there. I did try disabling a handful of plugins on Harris Whole Health, and the result was the same. The main page sidebar still doesn’t contain the elements it should.

    Thread Starter Erik Harris

    (@eharris)

    Strange… The image URL above seems to bounce between showing the image and showing a 404 page. Might be related to the image hot-link protection I’ve got in .htaccess… Here’s the same image on imgur, comparing the two widgets in the admin backend: https://imgur.com/a/tbJpD6D

    Hello @eharris ,

    Could you share both child themes with us so we could check the code? I was testing this on the 2017 theme and I can’t replicate this issue.

    kind regards,
    Kasia

    Thread Starter Erik Harris

    (@eharris)

    Kasia,

    I can certainly do that. They should be identical… It’s also worth noting that on https://www.harriswholehealth.com , the front page sidebar is the same as the sidebar used on the other pages (e.g. click on “Sessions”), and on anything BUT the front page, it’s styled correctly. Also, I made this child theme at the end of 2017, and have been sitting on it since then, only finally activating it on my wife’s business page a few days ago (long story; was waiting for her to make some content changes that would’ve made more use of the theme’s features, and she never did, so I just activated it as-is).

    Again, they should be identical (I edited the theme mostly on the dev site, and then copied it over to the live site back at the end of 2017, and haven’t made any significant changes since then), but I zipped them both up and put them here:
    https://www.eharrishome.com/harriswholehealth-2017-devsite.zip
    https://www.eharrishome.com/harriswholehealth-2017-livesite.zip

    Hi @eharris,

    I have checked your live and dev themes but neither of them is calling the sidebar on the homepage, can you tell me if you have any other specific settings or plugins that are needed to show the homepage sidebar?

    The HTML structure of sidebar widgets on your homepage and other pages is quite different so that’s the cause but in order to know where these differences are coming from we would need to test this further on our end with replicated setup.

    Cheers,
    Predrag

    Thread Starter Erik Harris

    (@eharris)

    Hi Predrag ( @wpmudev-support1 ),

    The front page Sidebar implementation was taken from this WPMUDEV web page, which is based on using this plugin. It’s implemented the same on both sites, but it only works on the dev site.

    The one difference I can see is that I haven’t set up multiple front pages on the live site, only on the dev site. Could these edits require multiple front pages? That seems strange. The Twenty Seventeen theme only uses three page content template PHP files, and I’ve edited all of them to add in the custom sidebar.

    Thread Starter Erik Harris

    (@eharris)

    Oh, darn it… I didn’t dig back into the aforementioned WPMUDEV web page until prompted by this support thread, and I found my user error! I forgot to add the custom wrapper code to the live site’s custom sidebar widget. Once I did, it worked fine.

    Thank you, Predrag, Kasia, and Nastia, for helping me resolve this. I was looking in the wrong places, and didn’t give you enough information to resolve the problem, but your questions prompted me to dig further and ultimately discover my error. I apologize for taking up your time with what turned out to be my own mistake, but I truly appreciate your thoughtful responses! Without them, I don’t know that I’d have figured this out.

    • This reply was modified 5 years, 1 month ago by Erik Harris. Reason: tweak wording slightly

    I appreciate your kind words here @eharris and I’m glad that you’ve managed to sort this out. ??

    Take care,
    Dimitris

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Front page sidebar not styling’ is closed to new replies.