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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay