create a Wordpress wpjobmanager add-on: embeddable-job-widget
Tags: webdev, wordpress, beginners, php
Published: 2023-03-22 15:02:11


i want to add some extra functionality to my WordPress site over and above: i want to add some specific features to my website that runs the wpjobmanager-plugin. that said: i want to create a Wordpress wpjobmanager add-on for a embeddable-job-widget
**note**: i have read various articles on WPBeginner ( https://www.wpbeginner.com )  and WordPress ( https://wordpress.org ).

**what is aimed**: i want to show a form on my site that users can use to generate an embeddable job widget showing job listings from our site.
With the **Embeddable Job Widget plugin**, i want to show a form on the site that users can generate some embed code with. 
This embed code can show listings from our site wherever they use the code.

Here are the **steps **i think that are necessary can follow:


first i create a new WordPress plugin: 


**Step 1**: this is the first step: creating a new WordPress plugin for the add-on. 
We can do this by creating a new folder in the WordPress plugins directory and adding a new PHP file with the plugin header information.


**Step 2**: Then we have to register a new shortcode: Next, register a new shortcode for the embeddable job widget. we can use the add_shortcode function to register a shortcode with the name we want to use for the widget.


For example, we can use the following code to register a shortcode named [job_widget]:


`
function job_widget_shortcode( $atts ) {
    // Code to generate the job widget output
}

add_shortcode( 'job_widget', 'job_widget_shortcode' );

`


**Step 3**: Generate the job widget output: 

Now, we need to write the code to generate the job widget output. we can use the WP Job Manager plugin functions to fetch the job 
listings and display them into our widget.

For example, we can use the get_job_listings function to fetch the job listings and display them in a table:

`
function job_widget_shortcode( $atts ) {
    // Get the job listings
    $jobs = get_job_listings();

    // Generate the job widget output
    $output = '<table>';
    foreach ( $jobs as $job ) {
        $output .= '<tr><td>' . $job->post_title . '</td></tr>';
    }
    $output .= '</table>';

    return $output;
}

add_shortcode( 'job_widget', 'job_widget_shortcode' );

`
**Step 4**: Customize the widget output: 

now we can can also add custom CSS styles or JavaScript to the widget output to make it look and behave the way we want. 
We can use the wp_enqueue_style and wp_enqueue_script functions to add our custom styles and scripts to the WordPress page.

For example, we can use the following code to add a custom CSS file to our widget output:


`
function job_widget_shortcode( $atts ) {
    // Get the job listings
    $jobs = get_job_listings();

    // Generate the job widget output
    $output = '<table>';
    foreach ( $jobs as $job ) {
        $output .= '<tr><td>' . $job->post_title . '</td></tr>';
    }
    $output .= '</table>';

    // Add custom CSS styles to the widget output
    wp_enqueue_style( 'job_widget_styles', plugin_dir_url( __FILE__ ) . 'job-widget.css' );

    return $output;
}
add_shortcode( 'job_widget', 'job_widget_shortcode' );
`

well what do you say – is this a appropiate way to add more functionality and to get a embeddable widget?

look forward to hear from you
regards