Adding and Removing Widget Classes

Hi,
I need to add and remove some widget classes on a website I am working on. Can anyone advise where is the location of these codes? I have an image but I'm unable to upload it.

  • Nahid

    Hey there Eugene !
    Hope you are having a great day!

    Thank you for your query. Unfortunately, in order to help you better with this request, we'll need a bit more information from your end regarding this. Are you referring to CSS "class" selectors for widgets? If so, could you specify which class are you trying to add/remove from which widget? The reason why I'm asking is that the code of all widgets does not reside at the same location. Some of them are located in core WordPress files and some are added from the theme or plugins.

    As it is not recommended changing core WordPress code including theme and plugin code, as they might introduce additional issues and most likely would get overwritten on future updates, we could try helping with custom code that could dynamically remove/add the class(es) for you.

    In this scenario, looking at the mentioned image would be very helpful. It might not be uploadable due to size limitations, could you possibly upload it to a cloud storage platform like Dropbox and attach the link in your next response?

    We'll be looking forward to hearing back from you. Thanks!

    Kind regards,
    Nahid

  • Eugene

    HI,

    I'm trying to create a three column footer in this website

    http://www.whizzbedding.com/demo

    The original theme developer did not allow for this so I had to remove the classes from the flexible footer widget.

    The source code is uploaded for your reference.

    Are you able to advise where I can find the location for that?

    In case, the photo is not uploaded, I've also placed this in the dropbox

    https://drive.google.com/file/d/1NMIxEUU0AaxupeLnmIir8OF85ahp1IJ6/view?usp=sharing

    Thanks for your help Nahid

  • Nahid

    Hey Eugene !
    Hope you are doing well today!

    Thank you for the explanation. I took a look at the image that you shared. You should be able to find a part of the wrapper code in your active theme's footer.php file. I cannot assure that because I do not have direct access to your file system. The other classes (e.g. widget-text, widget-odd, widget_custom_html) are located in core WordPress files which cannot be removed without modifying the core files, which is highly discouraged.

    In order to add custom CSS classes and IDs to your widgets, you can take a look at this article which explains the simplest way of doing it without writing any custom PHP/JS code.

    In order to display the footer widgets in three columns, you can add the following custom CSS code:

    .flex-footer .widget-area {
        display: flex;
    }
    
    .flex-footer .widget-area > section {
        width: 33.333%;
    }
    
    @media only screen and (max-width: 1024px) {
        .widget-area {
            flex-direction: column;
        }
        .flex-footer .widget-area > section {
            width: 100%;
        }
    }

    You can add the Custom CSS in your WordPress Dashboard->Appearance->Customize->Additional CSS. Alternatively, you can also add it in your theme's (most preferably, child theme's) stylesheet or a custom CSS plugin.

    Hope this helps. Let us know if you need any further assistance regarding this. Thanks!

    Kind regards,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.