Connect a CSS file to a custom wordpress widget

1 Views

So i searched quite a while and just did not find out, how to do this, possibly because of the language barrier or not enough PHP knowledge: 

public function widget( $args, $instance ) {


    ?>
    <div style="padding: 0 0 14% 0">
    <div class="mainbar" style="border:2px solid #e0e0e0;border-radius:2px; background:#f3f3f3;">
    <div style="background:#e0e0e0; padding: 2% 3%">
    <h3>

    <?php 

    if ( ! empty( $instance['title'] ) ) {
        echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
    }
    /*echo __( 'Hello, World!', 'text_domain' );*/


    ?>
    </h3>
    </div>

        <div style="padding: 4% 3%">
            <p>
                <?php

                if ( ! empty( $instance['mainTxt'] ) ) {
                    echo apply_filters( 'widget_title', $instance['mainTxt'] );
                }
                ?>
            </p>
        </div>

    </div>

    </div>

    <?php 

    echo $args['after_widget'];
}

I succesfully made a custom widget for my selfmade wordpress theme and played around with the styling.
That worked quite okay, but i’d like to use a css file just for that widget type.

Read More

So how can i use a css file for that? Thanks in advance (and sorry for spelling, i’m not a native speaker).

Post Views: 1

Related posts

2 comments

  1. So, you can’t add a style sheet that only applies to your widget. You’ll end up loading it for the whole site or just the admin dashboard.

    For a much more elegant solution than inline styling, go for one of these two methods:

    function extra_css () {
   echo '<style>.element { width: 100%; } </style>';
}

    Then add the action:

    add_action( 'wp_head', 'extra_css' );

    Another way to do it is enqueue a whole stylesheet

    function add_css_file() {
   wp_enqueue_style('css', 'path/to/your/style');
}

    The add the action:

    add_action('wp_enqueue_scripts', 'add_css_file');

  2. Add a class to the wrapping div and use that in your stylesheet.

    .custom-widget {
  padding: 0 0 14% 0
}
.mainbar {
  border: 2px solid #e0e0e0;
  border-radius: 2px;
  background: #f3f3f3;
}
.mainbar > div {
  background: #e0e0e0;
  padding: 2% 3%
}
    public function widget( $args, $instance ) { ?>
<div class="custom-widget">
  <div class="mainbar">
    <div>
      <h3>

    <?php 

    if ( ! empty( $instance['title'] ) ) {
        echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
    }
    /*echo __( 'Hello, World!', 'text_domain' );*/


    ?>
    </h3>
    </div>

    <div style="padding: 4% 3%">
      <p>
        <?php if ( ! empty( $instance[ 'mainTxt'] ) ) { echo apply_filters( 'widget_title', $instance[ 'mainTxt'] ); } ?>
      </p>
    </div>

  </div>

</div>

<?php echo $args[ 'after_widget']; }

Comments are closed.