Wordpress Widgets

Question 1

How do you register a widget?

Answer 1

add_action( ‘widgets_init’, function() {
register_widget( ‘Class_Name’ );
});

Question 2

What class do you need to inherit from to make a valid widget?

Answer 2

WP_Widget

Question 3

What methods do you have to implement in your class in order to make a valid widget?

Answer 3

public function __construct()
public function form( $instance )
public function update( $new_instance, $old_instance )
public function widget( $args, $instance )

Question 4

What do you need to do in the constructor of the widget class?

Answer 4

You have to make a call to the parent concstructor.

parent::__construct(
‘my_widget_id’, // A string id, you make it up here
‘My Widget Name’, // A human readable name
array (
‘classname’ => ‘my_widget_class’, // css class
‘description’ => ‘a long string’ // Just a desc.
)
);

Question 5

It’s best practice to first enqueue your WHAT, before the javascript?

Answer 5

The CSS files.

Question 6

How do you register CSS styles in an OOP manner?

Answer 6

Call add_action for the appropriate hooks, and pass it an array containing the context and method to call to get the stylesheet locations.

Question 7

What is the weird thing about the wp_enqueue_scripts hook?

Answer 7

It’s used for both scripts and styles. It’s a hook that allows you to enqueue things that are meant to go in the header (useful for OOP).

You would typically use add action to register the hook, and when the hook is fired, it calls the method you registered, and in that method, you enqueue the required files.

add_action(‘wp_enqueue_scripts’, array($this, ‘method_name’));

public function method_name() {
wp_enqueue_style(‘front-to-back-admin’, plugins_url( ‘front-to-back/css/admin.css’) );
}

Question 8

What function can you use to specify the URL of the plugin directory (for writing paths to css etc)?

Answer 8

plugins_url()

i.e. “plugins_url(‘/css/admin.css)’’

Pass it the path to the file, and it will generate the full URL.

Question 9

Why would you use the function plugins_url() over plugin_dir_path()?

Answer 9

plugins_url provides the URL which is important when doing things like enqueueing scripts. If you provided the file system path (plugin_dir_path()), it would not load in the HTML.

Question 10

What are the hooks that we use to register all our widget scripts?

Answer 10

admin_enqueue_scripts

wp_enqueue_scripts

Question 11

What are the hooks we use to register all our widget styles?

Answer 11

wp_enqueue_scripts

admin_print_styles // This one is questionable - should probably use admin_enqueue_scripts for adding css

Question 12

As part of the interface for WP_Widget, the function “form” takes a parameter called $instance. This is a URL string - what WP function can we use to parse it?

Answer 12

wp_parse_args

Question 13

Why should you use CSS classes when wrapping widget markup, as opposed to ID’s?

Answer 13

Because a user can have multiple instances of a widget on the same page, and ID’s have to be unique.

Question 14

When creating views, you may have to specify an id / name for an input element. How do you get around the fact the widget may be placed several times within the page, therefore using the same ID more than once (a violation of the HTML standard)?

Answer 14

You use the functions

$this->get_field_id(‘name_of_id’);

This uses the context of calling class (i.e. inside your “form” method, you might “include” an external view/php file. In that file is the HTML markup for the form. Inside that markup, you call $this->get_field_id(‘name_of_id’).

The name_of_id is defined as an argument in the “form” method.

        $instance = wp_parse_args(
            (array)$instance,
            array(
                'name' => ''
            )
        );

Question 15

If we have defined the “name” variable in the “form” method of the plugin class, how do we reference the values of the input fields?

        $instance = wp_parse_args(
            (array)$instance,
            array(
                'name' => ''
            )
        );

Answer 15

You can reference them directly.

$instance[‘name’]

Question 16

What is the purpose of the form method in the widget class?

Answer 16

It is used to display the markup for the form in the admin area (i.e. all the inputs / labels etc).

Question 17

What is the purpose of the update method in the widget class?

Answer 17

It is responsible for serializing the data that the user has entered into the form in the admin area.

Question 18

The update method takes two parameters, what are they?

Answer 18

$newinstance, and $oldinstance.

$newinstance contains the data the user just entered, the $oldinstance parameter is the current data.

You should return “$oldinstance” updated for the new data.

Question 19

Why might you use _e() instead of __() in your templates?

Answer 19

It makes it simpler to output text, _e echoes out the contents, whereas __() requires you to echo it out. Therefore _e is just simpler, although, otherwise identical.

Question 20

What functions are useful for data sanitization of incoming data to the database?

Answer 20

stripslashes()

strip_tags()

Question 21

What function is useful for sanitization of output data from the database?

Answer 21

esc_attr();

Question 22

When you output data from the database into an existing input box (i.e. prefilling a name field) - you use esc_attr() to santize the text. What do you do to sanitize a textarea element?

Answer 22

esc_textarea()

Question 23

When you are writing ajax code for your widgets admin area - sometimes fields or text are reset when hitting save, or adding the widget for the first time, why is this?

Answer 23

There is an AJAX event that is firing on Ajax Success (which is triggered when you add a new widget or hit save). The secret is to update all the text fields when that event fires - and you can do that by hooking into it’s event.

Question 24

When dealing with select boxes, how do you retrieve the current selection so that it doesn’t refresh between loads?

Answer 24

Use the wordpress function selected. You would do this inside the “option” tag. The output will be the attribute name and it’s current value, so no need to put

Question 25

You may use the “extract” function in order to get data from an arguments array - what parameter should you pass it to make sure you don’t overwrite existing variables?

Answer 25

extract($args, EXTR_SKIP);

Question 26

What function can be used to get the “checked” status of a check box for displaying in HTML?

Answer 26

checked (1, $instance[‘nameoffield’], true);