Dave Warfel

Escape Creative

<p>Widget Areas for LearnDash simply gives you more places to add custom content in LearnDash. By utilizing built-in LearnDash action hooks, we assign widget areas (also known as “sidebars”) to various locations throughout your LearnDash pages.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/WoR177xks_k?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>Available LearnDash Widget Areas</h3>
<ul>
<li>Focus Mode: Sidebar: Above Navigation</li>
<li>Focus Mode: Sidebar: Below Navigation</li>
<li>Focus Mode: Content: Start</li>
<li>Focus Mode: Below Content</li>
<li>Course Page: Content: Start</li>
<li>Course Page: Content: End</li>
<li>Group Page: Content: Start</li>
<li>Group Page: Content: End</li>
</ul>
<p>Requires the “LearnDash 3.0” Active Template. Tested with LearnDash 4.23.</p>
<h3>How to Use</h3>
<p>Upon activating the plugin, new widget areas will appear on the <strong>Appearance > Widgets</strong> screen in your WordPress admin area. You can also access them via the Customizer (<strong>Appearance > Customize > Widgets</strong>).</p>
<p>Simply add the blocks/widgets you’d like to insert into the corresponding widget areas. Be sure to click the “Save” button at the bottom.</p>
<p>Navigate to a page that contains that widget area, refresh, and your new widgets will be there.</p>
<h3>Types of Content to Add</h3>
<p>WordPress comes with a set of default widgets, several of which might be useful. If you’re using the new block editor, all blocks will also be available to you.</p>
<ul>
<li>Add a simple <strong>Paragraph</strong> block with some basic text</li>
<li>Add an <strong>Image</strong> or <strong>Video/Embed</strong> block for more visual content</li>
<li>Add a <strong>Navigation Menu</strong> widget to insert a custom menu you’ve created</li>
<li>Add your own <strong>Custom HTML</strong> widget to embed an <code><iframe></code> or write your own code</li>
</ul>
<p><strong>TIP:</strong> You can use the <strong>LearnDash Student</strong> and <strong>LearnDash Visitor</strong> blocks to display a block’s contents only to enrolled students or unenrolled visitors.</p>
<h4>LearnDash Widgets</h4>
<p>LearnDash comes prepackaged with a few widgets, but there’s probably only one that makes sense in these widget areas.</p>
<ul>
<li>Add a <strong>Course Progress Bar</strong> to the top or bottom of your Focus Mode sidebar</li>
</ul>
<p>Feel free to experiment with the other <a href="https://learndash.com/support/kb/core/design/widgets/" rel="nofollow ugc">LearnDash widgets</a>.</p>
<h4>Elementor Templates</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/5x3Uzcs2Oz4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>If you’re using Elementor Pro, you can create a custom section and embed it anywhere on your site, including in your new LearnDash widget areas. There are two ways to do this:</p>
<ol>
<li>
<p>When you go to insert a block/widget, select the <strong>Elementor Library</strong> widget. Choose a template from the dropdown menu. Click “Save.”</p>
</li>
<li>
<p>Navigate to <strong>Templates > Saved Templates</strong>. Copy the shortcode next to the template you want to insert. Now you’ll insert a <strong>Shortcode</strong> block into the widget area, and paste the shortcode.</p>
</li>
</ol>
<p>For more information, see the article in <a href="https://elementor.com/help/how-to-use-shortcodes/" rel="nofollow ugc">Elementor’s knowledge base</a>.</p>
<h3>Widget Area CSS Class Names</h3>
<p>If you need to target the widget areas to apply custom styles using CSS, you can use the following class names.</p>
<p>All widget areas have the <code>.ldx-widget-area</code> class.</p>
<ul>
<li>Focus Mode: Sidebar: Above Navigation – <code>.ldx-widget-area.fm-nav-before</code></li>
<li>Focus Mode: Sidebar: After Navigation – <code>.ldx-widget-area.fm-nav-after</code></li>
<li>Focus Mode: Content: Start – <code>.ldx-widget-area.fm-content-start</code></li>
<li>Focus Mode: Below Content – <code>.ldx-widget-area.fm-content-bottom</code></li>
<li>Course Page: Content: Start – <code>.ldx-widget-area.course-content-start</code></li>
<li>Course Page: Content: End – <code>.ldx-widget-area.course-content-end</code></li>
<li>Group Page: Content: Start – <code>.ldx-widget-area.group-content-start</code></li>
<li>Group Page: Content: End – <code>.ldx-widget-area.group-content-end</code></li>
</ul>
<p>Example Usage:</p>
<pre><code>.ldx-widget-area.fm-nav-before {
    margin: 1em;
}
</code></pre>
<p>This would add 1em of spacing around the widget area that appears above the navigation in the Focus Mode sidebar.</p>
<p>In addition, all widgets placed inside of a widget area have a class of <code>.ldx-widget</code>.</p>
<h3>Show/Hide Widgets on Certain Devices</h3>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/X-5I_JqB3NU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>While not a direct feature of this plugin, you can show/hide widgets on different devices using another free plugin.</p>
<ol>
<li>Install & activate the <a href="https://wordpress.org/plugins/widget-options/" rel="ugc">Widget Options</a> plugin</li>
<li>Navigate to the widget that you’d like to adjust the visibility on</li>
<li>Scroll to the bottom and click on the tab with the mobile phone</li>
<li>Choose to either show or hide on the checked devices</li>
<li>Check the appropriate devices</li>
<li>Click “Save”</li>
</ol>
<h3>Show/Hide Widgets on Specific Course/Lesson/Topic Pages</h3>
<p>Another feature of the free Widget Options plugin (mentioned above) is to only show widgets on specific course, lesson, topic or quiz pages.</p>
<ol>
<li>Install & activate the <a href="https://wordpress.org/plugins/widget-options/" rel="ugc">Widget Options</a> plugin</li>
<li>Navigate to the widget that you’d like to adjust the visibility on</li>
<li>Scroll to the bottom and click on the settings cog icon</li>
<li>Click on the <strong>Logic</strong> tab</li>
<li>In the text box, you can use the <code>is_single()</code> conditional tag to only display that widget on a specific page</li>
<li>Use the ID of the course, lesson, topic or quiz</li>
</ol>
<p><a href="https://ldx.design/find-learndash-course-id/" rel="nofollow ugc">👉 How to find the ID of LearnDash content</a></p>
<p>Example:</p>
<p>This would only display the widget on the page with an ID of <code>7</code>:</p>
<pre><code>is_single( '7' )
</code></pre>
<p>If you wanted to display a widget on multiple pages (with IDs of 1, 2 and 3), your code would look like this:</p>
<pre><code>is_single( array( 1, 2, 3 ) )
</code></pre>
<p>There are many more <a href="https://codex.wordpress.org/Conditional_Tags" rel="nofollow ugc">WordPress conditional tags</a> you can use.</p>
<h3>From within WordPress</h3>
<ol>
<li>Visit “Plugins > Add New”</li>
<li>Search for “Widget Areas for LearnDash”</li>
<li>Click the “Install” button</li>
<li>Click the “Activate” button</li>
<li>Navigate to “Appearance > Widgets” or open the Customizer to start adding blocks/widgets to your new widget areas</li>
</ol>


Widget Areas for LearnDash

Add unlimited blocks/widgets to several areas of LearnDash Focus Mode, plus course & group pages.

Thomas Lloancy

<p>ConnectSphere transforms your online courses with video, audio, chat, and screen-sharing sessions via WebRTC. It features a modern, secure, and optimized interface for up to 100 participants.</p>
<p><strong>Key features:</strong></p>
<ul>
<li>Video, audio, public and private chat, screen sharing</li>
<li>Raise Hand button — participants can signal the host during live sessions</li>
<li>Live participant counter</li>
<li>Connection quality indicator (signal bars based on RTT and packet loss)</li>
<li>Dark and Light color themes — choose the one that fits your site design</li>
<li>Leave button — cleanly stops camera/mic and releases all WebRTC resources</li>
<li>Creating a room automatically joins it — no extra click needed</li>
<li>Configurable STUN/TURN servers for optimal connectivity behind NAT and firewalls</li>
<li>Fully translatable (i18n-ready, French translation included)</li>
</ul>
<h3>Compatibility</h3>
<ul>
<li>Tested up to WordPress 7.0.</li>
</ul>
<h3>New Features</h3>
<ul>
<li><strong>Participant counter</strong>: The participants panel now shows a live count of people in the room.</li>
<li><strong>Raise Hand</strong>: New button lets participants signal the host. A hand icon (✋) appears on the video bubble and in the participant list for all attendees.</li>
<li><strong>Connection quality indicator</strong>: Three-bar signal indicator in the control bar, powered by WebRTC <code>getStats()</code> (RTT + packet loss).</li>
<li><strong>Light theme</strong>: New color theme option in Settings > ConnectSphere > Room Appearance. Dark (default) or Light — with a live preview in the settings page.</li>
<li><strong>Leave button</strong>: Cleanly stops camera/mic tracks, releases all WebRTC handles, and resets the room state. Previously, leaving was only possible by closing the tab.</li>
<li><strong>Auto-join after create</strong>: Creating a room now immediately joins it. No need to click “Join” separately.</li>
</ul>
<h3>UX & Architecture</h3>
<ul>
<li>Status ticker now spans full width below the control buttons, no longer squeezed to a few pixels.</li>
<li>Join logic extracted into <code>performJoin()</code> to eliminate duplicated code between the Create and Join flows.</li>
<li>Professional Janus server installation service documented in FAQ and admin settings page.</li>
</ul>
<h3>Bug Fixes & i18n</h3>
<ul>
<li>Fixed missing <code>load_plugin_textdomain()</code> — PHP-side translations now load correctly.</li>
<li>Fixed broken ICE retry paths that referenced undeclared <code>videoroomHandle</code> / <code>textroomHandle</code> variables (now correctly using <code>videoroom</code> / <code>textroom</code>).</li>
<li>Fixed notification sound using a site-root absolute path; now uses the correct plugin URL via <code>connectSphere.plugin_url</code>.</li>
<li>Removed dead <code>wp_ajax_connectsphere_join_room</code> registration (endpoint was never called from the front-end).</li>
<li>Fixed PHP fatal error risk: apostrophe inside single-quoted string in capabilities check.</li>
<li>All remaining hard-coded French strings in PHP and JS replaced with English base strings wrapped in i18n functions.</li>
<li>Added missing CSS classes: <code>.unread-badge</code>, <code>.new-message-highlight</code>, <code>.disabled</code>, <code>.hand-raised</code>.</li>
<li><code>plugin_url</code> added to localized JS data; removed unused <code>ajax_url</code> / <code>nonce</code>.</li>
</ul>
<h4>1.5.0</h4>
<p>(2026-04-25)</p>
<h3>User Experience & Admin Ergonomics</h3>
<ul>
<li><strong>Shortcode Quick-Copy</strong>: Added a dedicated “Usage” section in the settings page featuring a one-click copy button for the <code>[connectsphere_room]</code> shortcode.</li>
<li><strong>Copy Feedback</strong>: Integrated a visual “Copied!” confirmation using WordPress native Dashicons for a better user experience.</li>
</ul>
<h3>Internal Logic & i18n</h3>
<ul>
<li><strong>JS Dependency Update</strong>: Added <code>sprintf</code> to the <code>wp-i18n</code> imports in <code>connectsphere.js</code> to support complex dynamic translations.</li>
</ul>
<h4>1.4.0 (2026-04-24)</h4>
<h3>Internationalization (i18n) & Localization</h3>
<ul>
<li><strong>Full Multilingual Support</strong>: Added <code>Domain Path</code> for native translation.</li>
<li><strong>wp-i18n Integration</strong>: Scripts now explicitly depend on <code>wp-i18n</code> for secure string translation.</li>
<li><strong>String Standardization</strong>: All UI messages harmonized to English for global compatibility.</li>
</ul>
<h3>Improved Resilience & Performance</h3>
<ul>
<li><strong>Aggressive Reconnection Logic</strong>: Reduced reconnection timeouts from 15 seconds to <strong>4 seconds</strong> for both <code>videoroom</code> and <code>textroom</code> plugins. This ensures much faster recovery after network drops.</li>
<li><strong>Enhanced Connection Stability</strong>: Refined the Janus initialization flow to handle session drops more proactively.</li>
<li><strong>Version Bump</strong>: Updated to 1.4.0 to force cache refreshing for all assets.</li>
</ul>
<h4>1.3.1 (2026-04-24)</h4>
<h3>Sécurité & Stabilité</h3>
<ul>
<li><strong>Renforcement de la sécurité (Nonce)</strong> : Correction de la faille de vérification des jetons de sécurité dans l’administration. Désormais, les réglages sont protégés par <code>check_admin_referer</code> pour prévenir les attaques CSRF.</li>
<li><strong>Optimisation du chargement des scripts</strong> : Les fichiers JS (Janus, adapter.js) et CSS ne sont plus chargés sur tout le site. Ils sont désormais injectés uniquement sur les pages utilisant le shortcode <code>[connectsphere_room]</code>, améliorant drastiquement les performances du site.</li>
</ul>
<h3>Interface & Responsive</h3>
<ul>
<li><strong>Full Responsive Design</strong> : Refonte complète du CSS pour mobile et tablette. La grille vidéo et la barre de contrôle s’adaptent désormais parfaitement aux petits écrans.</li>
<li><strong>Z-Index Fix</strong> : Ajustement de la profondeur de l’interface pour garantir la visibilité des menus de navigation WordPress au-dessus du salon vidéo.</li>
</ul>
<h4>1.3.0 (2026-04-23)</h4>
<h3>UI Overhaul, Ad-Free & CSS Refactoring</h3>
<ul>
<li><strong>Removed all integrated advertisements</strong>: Banners and marketing popups are now gone for a 100% professional experience.</li>
<li><strong>New Activity Log Ticker</strong>: Replaced intrusive “Toast” notifications with a sleek, terminal-style status bar in the control panel.</li>
<li><strong>Cyber-Terminal Aesthetics</strong>: Implemented scrolling marquee effects for system messages to prevent blocking the video grid.</li>
<li><strong>CSS Refactoring</strong>: Completely reorganized the stylesheet. Cleaned up legacy notification styles and unminified key components for better maintainability.</li>
<li><strong>Layout Stabilization</strong>: Fixed the 100vw horizontal overflow bug and optimized control bar responsiveness using modern Flexbox.</li>
<li><strong>Cleanup</strong>: Removed unused DOM manipulation logic from the JS core to improve performance.</li>
</ul>
<h4>1.2.0</h4>
<h3>Enhanced screen-sharing support with explicit media direction</h3>
<ul>
<li>Replaced generic <code>media: { audio: true, video: true }</code> with precise recvonly settings.</li>
<li>Now explicitly sets <code>audioRecv: true</code> and <code>videoRecv: true</code> while disabling local capture.</li>
<li>Ensures compatibility with system audio during screen sharing.</li>
<li>Follows Janus Gateway’s recommended pattern for subscriber answer creation. </li>
</ul>
<h4>1.1.0</h4>
<ul>
<li>6.9 Ok</li>
<li>A little too much advertisings </li>
</ul>
<h4>1.0.9</h4>
<ul>
<li>Fixed textroom error (error_code: 422) by adding a 500ms delay for the join request and handling specific retries.</li>
<li>Improved connection management with a 30-second keep-alive interval and progressive retry delays (15s, 30s, 60s).</li>
<li>Public messages are now visible to all participants with username, date, time, and content.</li>
<li>Resolved connection errors (DTLS alert, ICE disconnected) with better handle management.</li>
</ul>
<h4>1.0.8</h4>
<ul>
<li>Fixed textroom errors (error_code: 415) for join and message requests by using textroom.data() to send via the WebRTC data channel.</li>
<li>Public messages are now visible to all participants with username, date, time, and content.</li>
<li>Improved connection error handling (DTLS alert, connection loss) with 15-second reconnection delays.</li>
<li>Resolved PeerConnection errors (error_code: 416) by properly detaching handles.</li>
</ul>
<h4>1.0.7</h4>
<ul>
<li>Fixed textroom errors (error_code: 415) for join and message requests by using the correct format (textroom: ‘join’, textroom: ‘message’).</li>
<li>Public messages are now visible to all participants with username, date, time, and content.</li>
<li>Improved connection error handling (DTLS alert, connection loss) with increased reconnection delays to 15 seconds.</li>
<li>Resolved PeerConnection errors (error_code: 416) by properly detaching handles.</li>
</ul>
<h4>1.0.6</h4>
<ul>
<li>Fixed chat issue: public messages are now visible to all participants with username, date, time, and content.</li>
<li>Resolved textroom errors (error_code: 413) by correcting the format of join and message requests.</li>
<li>Improved connection error handling (DTLS alert, connection loss).</li>
</ul>
<h4>1.0.5</h4>
<ul>
<li>Fixed PHP syntax error in connectsphere.php (line 84).</li>
<li>Improved message handling to include username, date, time, and content.</li>
</ul>
<h4>1.0.4</h4>
<ul>
<li>Fixed chat issue: public messages are now visible to all with username, date, time, and content.</li>
<li>Improved message styles for better readability.</li>
<li>Fixed textroom connection errors (error_code: 415).</li>
</ul>
<h4>1.0.3</h4>
<ul>
<li>Fixed chat styling for a dark icy background and improved text readability.</li>
</ul>
<h4>1.0.2</h4>
<ul>
<li>Added specific CSS styles for the settings page (admin.php?page=connectsphere).</li>
<li>Added dynamic resizing of input fields.</li>
<li>Fixed issue with CSS styles not applying on the settings page.</li>
</ul>
<h4>1.0.1</h4>
<ul>
<li>Added STUN/TURN server configuration in settings.</li>
<li>Improved settings interface with an icy blue theme.</li>
<li>Added an animated background with connected spheres.</li>
</ul>
<h4>1.0.0</h4>
<ul>
<li>Initial release with WebRTC, chat, and integrated marketing.</li>
</ul>


ConnectSphere

ConnectSphere transforms your online courses with video, audio, chat, and screen-sharing sessions via WebRTC. With proper configured Janus server.

Widget Areas for LearnDash vs ConnectSphere