Custom Sidebar Pro is manipulating the HTML.

Custom Sidebar Pro is manipulating the HTML. When Custom Sidebar Pro is active it manipulates HTML outputs of widgets and causes design problems.

  • Adam Czajczyk

    Hello john

    I hope you're well today and thank you for your question!

    The Custom Sidebars plugin does actually affect HTML markup and in fact it has to.

    The problem here is that while "pure mechanics" of printing out sidebars and their widgets is always the same (as it's native to WP), the markup that you got on your site depends on the theme that you're currently using and - in many cases - also on plugins (e.g. if a widget comes from some plugin).

    This might affect CSS styling indeed.

    In order to not "manipulate HTML" at all, the plugin would have to "intercept" the page's HTML markup and the parse it and adjust its own output according to it. Furthermore, this would have to happen pretty much (or "almost") "on the fly" while rendering the page. While technically possible that would be quite unreliable (especially in case of some complex and/or "builder type" themes) and quite "heavy" (affecting performance significantly).

    The plugin has to use some basic markup then and this can cause styling issue. That said, there are two ways to deal with it (sometimes it's worth to use them both at once):

    1. If you go to the "Appearance -> Widgets" page and click on "Edit" link for the selected custom sidebar, you can then check the "Advanced -> Edit custom wrapper code" check-box and that will give you an option to set markup for "Before Title", "After title", "Before Widget" and "After Widget".

    This can be used to adjust this markup to match the default one of your theme.

    2. That alone should help but if it doesn't solve the issue entirely (which is possible due to the fact that sometimes default theme's markup is too complex), then the custom style should be created and applied after custom sidebars has been configured: basically you would want to make sure that your custom sidebars and their widgets are all in place, then create your CSS on front-end (using browser tools) and once it works there, add it to the "Advanced CSS' in customizer.

    Have you tried both these ways already?

    If you need additional help with this, I assume that the style that you want to use is the one you shared during the chat so can you point me to some post/page on your site (with Custom Sidebars enabled!) where I can see those altered custom sidebars and check the CSS?

    Kind regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.