CODEWITHSUNDEEP
wordpresswidgetwordpress-theming
Subsurf
Subsurf

Reputation: 1316

WordPress widgets: how to change the automatically created "style" attribute of the surrounding HTML

I have copied the twentythirteen Wordpress theme to dive into Wordpress development. I want to change the look of my footer, so I used the Firefox inspector to play around with it. The widgets in my footer sidebar have the following HTML around them:

<aside style="position: absolute; left: 0px; top: 0px;" id="text-5" class="widget widget_text masonry-brick">
    <div class="textwidget">
        <p>My text content</p>
    </div>
</aside>

I want to get rid of the "position: absolute" CSS directive but I could not find the spot where the style attribute is added to the widget's HTML code. The widget definition in the functions.php of the used theme does not include a style attribute at all:

function twentythirteen_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">', // no style attribute...
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
// ...

Now I wonder where this "magic" happens so I can stop it. I disabled all relevant plugins but that did not change anything. I also browsed the theme's files but I didn't see anything, did I just miss it? I thought I might be able to change the surrounding HTML on the widget settings page in the admin panel but I could not find such option.

Upvotes: 0

Views: 840

Answers (2)

Eran.E
Eran.E

Reputation: 940

Generally, you can set bigger priority (!important) to an element from your stylesheet or overwrite inline style with later inline style commands, such as javascript that runs after.

but, in this case, the inline style coming from 'jquery-masonry' jquery plugin, so changing the inline style here is not a good idea. if you want to remove it, you need to disable 'jquery-masonry'. you can use wp_dequeue_script:

function wpdocs_dequeue_script() {
   wp_dequeue_script( 'jquery-masonry' );
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script');

put it in your function.php file (since you are using 'twentythirteen' theme as a parent, you need to create a child theme if you didn't already) and after that you can use the class / id of the element to change the style from your style.css file.

Upvotes: 1

Thomas Z.
Thomas Z.

Reputation: 566

Wordpress is working in themes and plugins with hooks. Hooks are elements that filters events. Example: When entering a website via browser the init action will be triggered.

add_action('init', 'your_function');

The code that was posted by you is maybe a wrong entry in developing wordpress. Because it is a style of the theme and I think you cann't edit it with such an hook.

Maybe this is located in the css folder under your theme.

A good practise to enter Wordpress development is maybe creating your first plugin.

Upvotes: 2

Related Questions