{"id":300,"date":"2013-04-13T09:22:31","date_gmt":"2013-04-13T09:22:31","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=300"},"modified":"2013-04-13T09:22:31","modified_gmt":"2013-04-13T09:22:31","slug":"how-to-add-widgetized-custom-sidebars-wordpress-theme","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/how-to-add-widgetized-custom-sidebars-wordpress-theme\/","title":{"rendered":"How to add widgetized and custom sidebars on WordPress theme"},"content":{"rendered":"<p>WordPress themes are usually come with Widgetized sidebars where you can drag and drop widgets. It&#8217;s okay when we don&#8217;t need more widgetized sidebars to the theme, but we probably think to add more when we think widgetized sidebar solution to your customization problem, for instance you want to add a banner ad to header area or footer area. This requires coding solution in few themes and each theme could have different solution.<br \/>\nThis plugin, <a title=\"Custom Sidebars\" href=\"http:\/\/wordpress.org\/extend\/plugins\/custom-sidebars\/\">Custom Sidebar<\/a> provides easy solution. The <a title=\"Installation: Custom Sidebar\" href=\"http:\/\/wordpress.org\/extend\/plugins\/custom-sidebars\/installation\/\">installation<\/a> is straightforward, we can download from wordpress.org, \u00a0upload it to wp-content\/plugins directory and activate the plugin in the plugin menu panel or Add New and search Custom Sidebar from the plugin menu panel<\/p>\n<p>Now, we want to add new widgetized sidebar (or in this case widgetized area). \u00a0I want to show a Banner Ad with Text Widget dragged and dropped to the new widgetized sidebar\/area.<\/p>\n<p>1. Create new sidebar in the Custom Sidebar panel, type name and description and click Create Sidebar. I make a sidebar name Footer: Banner Ad<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"301\" data-permalink=\"https:\/\/pixert.com\/blog\/how-to-add-widgetized-custom-sidebars-wordpress-theme\/cs-newsidebar\/\" data-orig-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1252%2C858&amp;ssl=1\" data-orig-size=\"1252,858\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"CS New Sidebar\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=300%2C205&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1024%2C701&amp;ssl=1\" class=\"aligncenter size-medium wp-image-301\" alt=\"CS New Sidebar\" src=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar-300x205.jpg?resize=300%2C205\" width=\"300\" height=\"205\" srcset=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?resize=300%2C205&amp;ssl=1 300w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?resize=1024%2C701&amp;ssl=1 1024w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?w=1252&amp;ssl=1 1252w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n2. Go to Widgets panel, see that the newly created sidebar name Footer: Banner Ad \u00a0is at the bottom of Sidebars<br \/>\n3. Drag and drop text widget to the Footer: Banner Ad sidebar, copy and paste your banner ad code<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-textwidget.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"302\" data-permalink=\"https:\/\/pixert.com\/blog\/how-to-add-widgetized-custom-sidebars-wordpress-theme\/cs-textwidget\/\" data-orig-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-textwidget.jpg?fit=1252%2C855&amp;ssl=1\" data-orig-size=\"1252,855\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"CS: Text Widget\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-textwidget.jpg?fit=300%2C204&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-textwidget.jpg?fit=1024%2C699&amp;ssl=1\" class=\"aligncenter size-medium wp-image-302\" alt=\"CS: Text Widget\" src=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-textwidget-300x204.jpg?resize=300%2C204\" width=\"300\" height=\"204\" srcset=\"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-textwidget.jpg?resize=300%2C204&amp;ssl=1 300w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-textwidget.jpg?resize=1024%2C699&amp;ssl=1 1024w, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-textwidget.jpg?w=1252&amp;ssl=1 1252w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n4. Add following code to a theme file, e.g footer.php.<\/p>\n<pre class=\"brush: plain; title: Code Block; notranslate\" title=\"Code Block\">&lt;?php if (function_exists('dynamic_sidebar')) { dynamic_sidebar('Footer: Banner Ad'); } ?&gt; <\/pre>\n","protected":false},"excerpt":{"rendered":"<p>WordPress themes are usually come with Widgetized sidebars where you can drag and drop widgets. It&#8217;s okay when we don&#8217;t need more widgetized sidebars to the theme, but we probably think to add more when we think widgetized sidebar solution to your customization problem, for instance you want to add a banner ad to header [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[54,5],"tags":[55,127,129,128,6],"class_list":["post-300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-snippet","category-wordpress","tag-code-snippet-2","tag-sidebar","tag-text-widget","tag-widgetized-sidebars","tag-wordpress-2"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1252%2C858&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-4Q","jetpack-related-posts":[{"id":598,"url":"https:\/\/pixert.com\/blog\/google-search-with-a-plugin-wp-google-search\/","url_meta":{"origin":300,"position":0},"title":"Google Custom Search with a plugin, WP Google Search","author":"Pixel Insert \/ Pixert","date":"May 18, 2021","format":false,"excerpt":"I use Google Custom Search or also known as Google Programmable Search Engine on my WordPress blog. I used Google Hosted Search at that time, but when I got a notification from Google that I would not get Google AdSense sharing through Google Hosted Search, I have to change the\u2026","rel":"","context":"In &quot;WordPress&quot;","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"WP Google Search","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":216,"url":"https:\/\/pixert.com\/blog\/how-to-show-world-map-as-default-view-pronamic-google-maps-plugin-wordpress\/","url_meta":{"origin":300,"position":1},"title":"How to show World Map as default view using Pronamic Google Maps plugin for WordPress","author":"Pixel Insert \/ Pixert","date":"March 26, 2012","format":false,"excerpt":"Pronamic Google Maps plugin is the best WordPress plugin for Google Maps \"With this plugin a user can easily add location (latitude, longitude) meta data to a page, post or a custom post type. This plugin adds a meta box with an Google Map to the post editor. Users can\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":314,"url":"https:\/\/pixert.com\/blog\/wordpress-add-title-to-img-tag-using-get-the-image-plugin\/","url_meta":{"origin":300,"position":2},"title":"WordPress: Add Title to IMG tag using Get The Image plugin","author":"Pixel Insert \/ Pixert","date":"October 29, 2013","format":false,"excerpt":"Get The Image plugin from Justin Tadlock is awesome, a script that can grab an image by custom field input, WordPress' featured image, post attachment, or extracting it from the post's content. Recently, someone asked about how to add Title to IMG tag. We know ALT attributes in IMG tag,\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/10\/screenshot-1.jpg?fit=1138%2C742&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/10\/screenshot-1.jpg?fit=1138%2C742&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/10\/screenshot-1.jpg?fit=1138%2C742&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/10\/screenshot-1.jpg?fit=1138%2C742&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/10\/screenshot-1.jpg?fit=1138%2C742&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":344,"url":"https:\/\/pixert.com\/blog\/useful-wordpress-plugin-category-order-and-taxonomy-terms-order\/","url_meta":{"origin":300,"position":3},"title":"Useful WordPress Plugin: Category Order and Taxonomy Terms Order","author":"Pixel Insert \/ Pixert","date":"December 30, 2013","format":false,"excerpt":"Category Order and Taxonomy Terms Order is a powerful plugin to re-order categories and all custom taxonomies terms using a drag and drop capability. The best thing about this plugin, we don't need to change theme code just to re-order categories and taxonomies, the plugin will do it for us.\u2026","rel":"","context":"In &quot;WordPress&quot;","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/12\/taxonomyorder.jpg?fit=865%2C932&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/12\/taxonomyorder.jpg?fit=865%2C932&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/12\/taxonomyorder.jpg?fit=865%2C932&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/12\/taxonomyorder.jpg?fit=865%2C932&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":268,"url":"https:\/\/pixert.com\/blog\/wordpress-limit-post\/","url_meta":{"origin":300,"position":4},"title":"WordPress Limit Post","author":"Pixel Insert \/ Pixert","date":"November 30, 2012","format":false,"excerpt":"This function controls the maximum\u00a0amount of characters displayed for an entry on the main page. If the set limit is surpassed, the text on the entry will be chopped\u00a0to that amount of characters, otherwise the content will be showed unchanged. Add following code to functions.php in your theme folder [php]\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/03\/wordpresslogo-300x68.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":261,"url":"https:\/\/pixert.com\/blog\/cropping-post-featured-thumbnails-from-top-instead-of-center-in-wordpress-with-native-cropping-tool\/","url_meta":{"origin":300,"position":5},"title":"Cropping Post Thumbnails from Top instead of Center in WordPress","author":"Pixel Insert \/ Pixert","date":"October 14, 2012","format":false,"excerpt":"WordPress Posts \u00a0Thumbnails or Post Featured Images \u00a0is a theme feature introduced with Version 2.9. Thumbnail is an image that is chosen as the representative image for Posts, Pages or Custom Post Types. The display of this images is up to the theme. This is especially useful for \"magazine-style\" themes\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/10\/feaimagewp-300x173.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/comments?post=300"}],"version-history":[{"count":0,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media\/301"}],"wp:attachment":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media?parent=300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/categories?post=300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/tags?post=300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}