{"id":23451,"date":"2021-05-02T15:00:14","date_gmt":"2021-05-02T13:00:14","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=23451"},"modified":"2024-03-28T09:13:04","modified_gmt":"2024-03-28T08:13:04","slug":"how-to-create-sticky-sidebar-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-sticky-sidebar-in-wordpress\/","title":{"rendered":"How to Create a Sticky Sidebar In WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Clear navigation is one of the key elements of a good website. Users must be able to reach the content they want with ease and at all times. In most cases, the main menu is placed in the header, but there are other types of navigation, too, including <a href=\"https:\/\/qodeinteractive.com\/magazine\/web-design-hidden-menus\/\">hidden menus<\/a>, footer navigation, and sidebars.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Navigation is static by default, i.e. it disappears when you scroll. However, in WordPress, you can easily make <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-make-wordpress-sticky-menu\/\">sticky menus<\/a>. They stay permanently visible on the screen, allowing users to effortlessly access various sections of a site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sticky sidebars, in particular, have become quite popular over the last few years. They help make navigation quick and effective, which is just one of the several important reasons why so many people add them to their sites.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we will discuss the pros of adding a WordPress sticky sidebar to a site and also show you how to create one by yourself. The subjects we will delve into include:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#benefits-of-using-sticky-sidebar\">The Benefits of Using a Sticky Sidebar<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-sticky-sidebar-with-plugin\">How to Create a Sticky Sidebar in WordPress With a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-sticky-sidebar-using-qode-sticky-sidebar-widget\">How to Create a Sticky Sidebar in WordPress Using the Qode Sticky Sidebar Widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"benefits-of-using-sticky-sidebar\"><\/a>The Benefits of Using a Sticky Sidebar<\/h2>\n<p>[\/vc_column_text][vc_column_text]A WordPress sticky sidebar is a widget locked into its place in the viewport. When the user scrolls, the sticky sidebar follows them up and down, instead of staying in its original place. One of the main reasons why sticky sidebars have become all the rage is their<strong> unobtrusive appearance<\/strong>. They are placed vertically on either the right or left side of the screen, leaving designers a lot of space to arrange and display other site elements. At the same time, they help <strong>improve the user experience<\/strong>. Sticky sidebars usually contain helpful links ensuring users can navigate sites with greater ease and <strong>access practical information at all times.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since they are locked into place, sticky sidebars represent a great way of ensuring your audience always sees the content you deem valuable and important. For example, if you add a call-to-action to them, your <strong>conversion rates are likely to increase<\/strong>. You can also feature <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-social-media-icons-to-wordpress-sidebar\/\">social media icons in your sidebar<\/a> and allow users quick access to your content on social channels.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that we know the why\u2019s, let\u2019s go step by step over the how\u2019s of adding a sticky sidebar to your WordPress website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-sticky-sidebar-with-plugin\"><\/a>How to Create a Sticky Sidebar in WordPress With a Plugin<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Q2W3-Fixed-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Q2W3 Fixed Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Q2W3-Fixed-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Q2W3-Fixed-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Q2W3-Fixed-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Q2W3-Fixed-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/wordpress.org\/plugins\/q2w3-fixed-widget\/\" target=\"_blank\" rel=\"noopener\">Q2W3 Fixed Widget for WordPress<\/a> is the most popular plugin on the market of its kind. It\u2019s free, regularly updated, and allows you to create a fixed (i.e. sticky) sidebar area in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It comes with a set of options you can customize to your requirements. They are placed under <em><strong>Appearance &gt; Fixed Widget Options<\/strong><\/em>. You can set the top and bottom margin size, make the plugin visible for logged-in users only, or even disable it when the screen width and height are lower than the values you specified in the plugin settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you install and activate it, go to <em>Appearance &gt; Widgets<\/em>. Add the widget you wish to make sticky to the sidebar area. Then, click on that widget, check the <em><strong>Fixed Widget<\/strong><\/em> box, and save changes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"544\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fixed-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Fixed Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fixed-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fixed-Widget-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fixed-Widget-768x431.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Fixed-Widget-620x348.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And it&#8217;s as simple as that. Any widget you mark as &#8220;fixed&#8221; will now follow the user in a sticky sidebar as they scroll through your content.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-sticky-sidebar-using-qode-sticky-sidebar-widget\"><\/a>How to Create a Sticky Sidebar in WordPress Using the Qode Sticky Sidebar Widget<\/h2>\n<p>[\/vc_column_text][vc_column_text]A great number of <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">Qode Interactive themes<\/a> come with an integrated sticky sidebar function. If you&#8217;re using one of these themes, adding a sticky sidebar is even easier.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can check if your theme has the sticky sidebar function by navigating to <em>Appearance &gt; Widgets<\/em>. If you see the <em><strong>Qode Sticky Sidebar widget<\/strong><\/em>, then you can create a sticky sidebar simply by placing that widget into the widget area of your choice.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sticky-Sidebar-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Qode Sticky Sidebar Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sticky-Sidebar-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sticky-Sidebar-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sticky-Sidebar-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sticky-Sidebar-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Click on the arrow in the right corner to open a dropdown menu and then select <em>Sidebar<\/em> as the area to which you wish to add the widget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"657\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar.jpg\" class=\"attachment-full size-full\" alt=\"Qode Widget Sidebar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar-300x203.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar-768x521.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar-620x420.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Make sure to <strong>place the<em> Qode Sticky Sidebar<\/em> widget above all others in the sidebar area<\/strong>. Alternatively, if there are widgets you would like to display in the sidebar but not make them sticky, place them above the <em>Sticky Sidebar<\/em> widget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"590\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar-Added.jpg\" class=\"attachment-full size-full\" alt=\"Qode Widget Sidebar Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar-Added-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar-Added-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Widget-Sidebar-Added-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After (or before) that, you can go to any page or post and choose the sidebar layout.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"358\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sidebar.jpg\" class=\"attachment-full size-full\" alt=\"Qode Sidebar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sidebar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sidebar-300x111.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sidebar-768x284.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qode-Sidebar-620x229.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Save your changes and the sticky sidebar will now appear on your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Closing Words<\/h2>\n<p>[\/vc_column_text][vc_column_text]Adding a WordPress sticky sidebar contributes to creating a better user experience. It is an easy and practical way of ensuring your audience can quickly access the sections and elements of your site you consider useful and important.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can make a sticky sidebar on your own either by using a plugin or a widget that the majority of Qode Interactive themes pack. You won\u2019t need any coding knowledge for either method, but we leave it up to you to decide whether you wish to add an extra plugin to your site or use a feature that most of our themes include by default.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to create a sticky sidebar in WordPress with or without a plugin and improve the user experience on your site the easy way<\/p>\n","protected":false},"author":4,"featured_media":23463,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-23451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=23451"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23451\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/23463"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=23451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=23451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=23451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}