we caboodle News

How to build a custom Widget in WordPress

News Categories: Wordpress

This article was published on: 03/24/20 9:31 AM

Building a custom Widget in WordPress is a simple take if you understand the basics of the platform, where all the files are stored in on the server and a little bit about PHP.

Let’s dive right in and locate your Functions.php file within your WordPress theme directory, this is the usual path.

/wp-content/themes/my-theme-name – if it’s a standard WordPress theme then it could be called ‘twentytwenty’

Inside Functions.php paste this code in after ); This is the end of a function and its ready to start a new one, if you paste within a function it will either break the site (just undo and save to fix) or disable that function within the site.

function holthub_widgets_init() {

	register_sidebar( array(
		'name' => 'WIDGET NAME',
		'id' => 'widgetid',
		'before_widget' => '
‘, ‘after_widget’ => ‘

‘, ) ); } add_action( ‘widgets_init’, ‘holthub_widgets_init’ );

In the 'before_widget' => '

‘, you can add a class or change to another tag – ‘before_widget’ => ‘

‘, or changed to a



    depending on what you are adding to the widget.

Paste this into your PHP code (template) to display on the front end.

< ? php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('widgetid') ) : endif; ? >
we caboodle - full service agency team

Ready to Start?

we are driven by the challenge of building a bespoke website for your business, improve SEO performance, fix UX/UI issues and streamline your branding across all social & paid channels.

Are you looking for a new, full service agency? contact us today for a free quotation or advice, and lets build something great, together!





    William Holt

    Meet Will

    I've been designing & developing websites for over 2 decades. my first project was built on Microsoft Frontpage, yes I go that far back!

    Speak to me direct regarding your next project or the benefits of switching your digital agency to Web Caboodle

    will@wecaboodle.com | 07368 229004 | LinkedIn Profile

    Web Design Manchester

    Studio 13
    Woolden Road

    Web Design London

    71-75 Shelton Street
    Covent Garden

    let's connect


    Copyright 2023 Web Caboodle - Web Design and Development Agency | We Website Design Ltd 13127888 Registered in England and Wales | Privacy Policy