{"id":5527,"date":"2026-08-30T23:00:37","date_gmt":"2026-08-30T14:00:37","guid":{"rendered":"https:\/\/donguri3.net\/server-tech\/luxeritas-sidebar-toggle-plugin-2\/"},"modified":"2026-08-30T23:00:38","modified_gmt":"2026-08-30T14:00:38","slug":"luxeritas-sidebar-toggle-plugin","status":"publish","type":"post","link":"https:\/\/donguri3.net\/en\/server-tech\/wordpress-blog-seo\/luxeritas-sidebar-toggle-plugin\/","title":{"rendered":"[WordPress] Creating a Sidebar Display Toggle Plugin for Luxeritas"},"content":{"rendered":"<p>The WordPress theme &#8220;Luxeritas&#8221; is an exceptional theme that operates with incredible lightweight speed. However, when operating under the standard 2-column layout (such as a main area width of 866px), publishing relatively long source code blocks, large charts\/diagrams, images, or screenshots in technical articles can sometimes make the horizontal width feel cramped.<\/p>\n<p>When readers try to grasp the overview of code or check the fine details of images, encountering horizontal scrolling or a compressed screen can contribute to a decrease in content readability and viewing experience.<\/p>\n<h2>Building an Environment to Expand the Main Display Area to 100% with a Single Tap<\/h2>\n<p>To solve this issue, we will build an environment where page visitors can freely toggle the sidebar&#8217;s visibility at their own convenience.<\/p>\n<p>Our goal is to create a mechanism where a subtle, semi-transparent toggle button is fixed at the bottom right of the screen, allowing users to hide the sidebar with a single tap and expand the main area (#main) to 100% of the screen width. The objective is to provide a responsive and smooth interface that can be toggled at any time regardless of the scroll position, without getting in the way of browsing.<\/p>\n<h2>Bloating of functions.php and Complicated Code Descriptions<\/h2>\n<p>Initially, layout-changing features like this are often tested by writing them directly into the child theme&#8217;s functions.php or style.css. However, the approach of directly adding code to a child theme comes with several problems:<\/p>\n<ul>\n<li>Complicated Management: Theme customization code and feature extension code get mixed together, making code maintenance and troubleshooting difficult when looking back later.<\/li>\n<li>Unnecessary Theming Burden: Creating a dedicated original theme from scratch just for this level of layout-changing functionality is over-spec&#8217;d and not worth the production and management costs.<\/li>\n<li>Dealing with Theme-Specific Specifications: In Luxeritas, fixed Flexbox styles are applied to the #main element, and the theme&#8217;s standard JavaScript (luxe.min.js) has specifications to scan and parse specific DOM elements. Writing in the wrong place can cause JavaScript errors such as null.split or lead to broken styles.<\/li>\n<\/ul>\n<h2>Installation Procedure for the Dedicated Plugin &#8220;Luxeritas Sidebar Toggle&#8221;<\/h2>\n<p>To resolve these issues, we packaged the functionality into a single, independent plugin called &#8220;Luxeritas Sidebar Toggle.&#8221; By separating it as a plugin, you can manage the functionality without modifying any child theme files.<\/p>\n<p>This plugin is available as open-source on GitHub, and you can use it immediately just by downloading the built ZIP file and activating it.<\/p>\n<h3>[Installation Procedure]<\/h3>\n<ul>\n<li>Releases Page: <a href=\"https:\/\/github.com\/nando256\/luxeritas-sidebar-toggle\/releases\">https:\/\/github.com\/nando256\/luxeritas-sidebar-toggle\/releases<\/a><\/li>\n<li>Repository: <a href=\"https:\/\/github.com\/nando256\/luxeritas-sidebar-toggle\">https:\/\/github.com\/nando256\/luxeritas-sidebar-toggle<\/a><\/li>\n<\/ul>\n<ol>\n<li>Download the latest ZIP file (luxeritas-sidebar-toggle.zip) from the GitHub repository or Releases page.<\/li>\n<li>Log in to your WordPress dashboard and open &#8220;Plugins&#8221; > &#8220;Add New Plugin.&#8221;<\/li>\n<li>Click &#8220;Upload Plugin&#8221; at the top of the screen, select the downloaded ZIP file, and click &#8220;Install Now.&#8221;<\/li>\n<li>Once the installation is complete, click &#8220;Activate Plugin.&#8221;<\/li>\n<\/ol>\n<p>The internal structure of the plugin is organized as follows, designed to safely load scripts and styles only when Luxeritas (the parent theme) is activated.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nluxeritas-sidebar-toggle\/\n\u251c\u2500\u2500 luxeritas-sidebar-toggle.php # Main plugin file (parent theme check, footer loading)\n\u251c\u2500\u2500 style.css # Styles for 100% main width and bottom-right fixed button\n\u2514\u2500\u2500 sidebar-toggle.js # DOM generation, open\/close state management (localStorage), resize event triggering\n<\/pre>\n<p>The JavaScript avoids directly interfering with the page&#8217;s HTML structure and dynamically generates the button safely under &lt;div id=&#8221;wp-footer&#8221;&gt;. This prevents script errors in Luxeritas itself while achieving stable operation.<\/p>\n<h2>Completion of a Clean, Independent Viewing Environment Resistant to Theme Updates<\/h2>\n<p>Once you activate the plugin, a semi-transparent &#8220;Hide Sidebar&#8221; button will appear just above the PAGE TOP button at the bottom right of the screen.<br \/>\nSimply clicking the button hides the sidebar while simultaneously expanding the main area to 100%, making it comfortable to view long tables, source code, and large images without scrolling.<\/p>\n<p><a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4246\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275.png\" alt=\"Sidebar Visible\" width=\"1003\" height=\"726\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275.png 1003w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275-300x217.png 300w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275-768x556.png 768w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275-530x384.png 530w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275-565x409.png 565w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275-710x514.png 710w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/bdceac222a4ab167f27b64b958cc4275-725x525.png 725w\" sizes=\"(max-width: 1003px) 100vw, 1003px\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><span style=\"font-size: 42px; color: #ff0000;\">\u25bc<\/span><\/p>\n<p><a href=\"https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4245\" src=\"https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90.png\" alt=\"Sidebar Hidden\" width=\"997\" height=\"723\" srcset=\"https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90.png 997w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90-300x218.png 300w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90-768x557.png 768w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90-530x384.png 530w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90-565x410.png 565w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90-710x515.png 710w, https:\/\/donguri3.net\/wp-content\/uploads\/2026\/08\/425c86b3a647e170ad3b351e7c978c90-725x526.png 725w\" sizes=\"(max-width: 997px) 100vw, 997px\" \/><\/a><\/p>\n<p>Furthermore, by separating this feature from the child theme into an independent plugin, the following benefits were gained:<\/p>\n<ul>\n<li>Even if the main theme or child theme is updated, there is no worry about settings or code being overwritten and erased.<\/li>\n<li>If you want to disable the feature, you can return to normal simply by deactivating the plugin in the dashboard.<\/li>\n<li>Because code is not mixed into the child theme&#8217;s functions.php or similar files, the maintainability of WordPress as a whole has been significantly improved.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/amzn.to\/4pYTvhB\" target=\"_blank\" rel=\"noopener\" data-blogcard=\"1\">Seikosangyo EXEA Jimny Sierra Nomad JB64 JB74 JC74 Utility Sidebar EE-231<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>In Luxeritas&#8217;s 2-column display, we implemented a sidebar open\/close toggle feature to enhance the readability of code and images. To avoid code clutter and theme-dependent errors caused by direct writing into the child theme, we developed and packaged it as an independent dedicated plugin called &#8220;Luxeritas Sidebar Toggle.&#8221; By simply uploading the ZIP file distributed on GitHub from the dashboard, you can easily install it and establish a comfortable, highly maintainable viewing environment unaffected by theme updates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The WordPress theme &#8220;Luxeritas&#8221; is an exceptional theme that operates with incredible lightweight  [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":4247,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/donguri3.net\/?p=4159","footnotes":""},"categories":[1166],"tags":[51,52,551,61,179,278],"class_list":["post-5527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-blog-seo","tag-git","tag-https","tag-luxeritas","tag-wordpress","tag-179","tag-278","en-US"],"_links":{"self":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/comments?post=5527"}],"version-history":[{"count":1,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5527\/revisions"}],"predecessor-version":[{"id":5530,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/5527\/revisions\/5530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media\/4247"}],"wp:attachment":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media?parent=5527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/categories?post=5527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/tags?post=5527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}