DEV Community

hub
hub

Posted on

WP-addon that puts names and logos from partners to a widget

i want to write an addon that works with the jobify theme from Astoundify.com that puts names and logos from partners to a widget. I want to have an option that allows me to put partner-logos onto my website that runs wp-jobmanager and the jobify-theme. It would be nice if this fits in a widget.

well i have mused some time and finally thought that we can do this like so:

To display partner logos on my website that runs the WP Job Manager and Jobify theme, we can create a custom widget that displays the logos. i have thought about this and i guess that these steps would be necessary:

first we create a custom post type for our partners by adding the following code to your functions.php file:

function create_partner_post_type() {
    register_post_type( 'partner',
        array(
            'labels' => array(
                'name' => __( 'Partners' ),
                'singular_name' => __( 'Partner' )
            ),
            'public' => true,
            'has_archive' => true,
            'menu_icon' => 'dashicons-heart',
        )
    );
}
add_action( 'init', 'create_partner_post_type' );

Enter fullscreen mode Exit fullscreen mode

This code will create a new post type called 'partner' with a heart icon in the WordPress admin menu.

  1. **Add custom fields for the partner logo **and website URL by installing and activating the Advanced Custom Fields plugin (link: ).
    now we have to create a new field group and add a field for the partner logo and another field for the website URL.

  2. at this step we have to **create a custom widget **that displays our partner logos by adding the following code to your functions.php file:


class Partner_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'partner_widget', 
            __( 'Partner Logos', 'text_domain' ), 
            array( 'description' => __( 'Display partner logos', 'text_domain' ), ) 
        );
    }

    public function widget( $args, $instance ) {
        $partners = get_posts( array(
            'post_type' => 'partner',
            'posts_per_page' => -1,
        ) );

        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }

        echo '<div class="partner-logos">';
        foreach ( $partners as $partner ) {
            $logo = get_field( 'partner_logo', $partner->ID );
            $url = get_field( 'partner_url', $partner->ID );
            if ( $logo ) {
                echo '<a href="' . $url . '"><img src="' . $logo['url'] . '" alt="' . $logo['alt'] . '"></a>';
            }
        }
        echo '</div>';

        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Partners', 'text_domain' );
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php 
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
        return $instance;
    }
}

function register_partner_widget() {
    register_widget( 'Partner_Widget' );
}
add_action( 'widgets_init', 'register_partner_widget' );


Enter fullscreen mode Exit fullscreen mode

*how to use this: *
To use this widget, we need to create a custom post type for our partners and add custom fields for the partner logo and website URL using the Advanced Custom Fields plugin. Once we re done that, we can add partners as posts and their logos and website URLs as custom fields.

Then, go to Appearance > Widgets and drag the 'Partner Logos' widget to the desired widget area. we can enter a title for the widget and it will display all partner logos with their website URLs in a widget.

Top comments (0)