- This topic has 1 reply, 1 voice, and was last updated 2 months, 2 weeks ago by softechquery.
-
AuthorPosts
-
-
October 3, 2024 at 11:54 am #149softechqueryKeymaster
how to add footer widget in wordpress theme
-
October 3, 2024 at 11:57 am #150softechqueryKeymaster
STEP 1: Register a Sidebar-
If you want to add a sidebar in your WordPress theme then first you need to register it.
So search the function “function theme-slug_widgets_init()” into function.php file.
now copy below code into your function for register the sidebar.function twentyseventeen_widgets_init() { /*................................Copy From Here................................................................*/ register_sidebar( array( 'name' => __( 'Footer 2', ‘theme-slug’ ), 'id' => 'sidebar-1', 'description' => __( 'Add widgets here to appear in your footer.', 'theme-slug' ), 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '', ) ); /*................................Copy To Here................................................................*/ }
add_action( ‘widgets_init’, ‘twentyseventeen_widgets_init’ );
Note:- Here “theme-slug” is your theme name.
This will add footer widget areas to your theme.
If you want to add multiple sidebar in footer then just paste the code double time.But change the ‘name’ and ‘id’.STEP 2: Now call the sidebar.
So after register the sidebar you can call it where you want but for footer we call it into “footer.php” file.
now paste the below code into your “footer.php” file/…………………………..Copy From Here………………………………………………………./
`
`
/…………………………..Copy To Here………………………………………………………./Note:- Widgets always called by its “Id”.
If you want to add multiple sidebar in footer then/…………………………..Copy From Here………………………………………………………./
`
`
/…………………………..Copy To Here………………………………………………………./STEP 3: Now add the CSS
Just paste bellow CSS in your “style.css” file/…………………………..Copy From Here………………………………………………………./
.full-width { width:100%; padding:15px; float:left; } .second-part { width:50%; padding:15px; float:left; } .third-part { width:33.33%; padding:15px; float:left; } .fourth-part { width:25%; padding:15px; float:left; }
/…………………………..Copy To Here………………………………………………………./
That’s it.now you can see your new footer with multiple sidebar.
-
-
AuthorPosts
- You must be logged in to reply to this topic.