I've decided to put in a toggle button in code snippets that i want to appear in the header of all learndash pages (lessons/worksheets/etc). This toggle would change the fonts to a dyslexic font. This is what i've got going on in my code snippets; function wpdd_add_dyslexic_font_and_toggle_switch() { // Add Dyslexic Font with @font-face ?> <style> @font-face { font-family: 'OpenDyslexic'; src: url('/wp-content/themes/kadence/assets/fonts/OpenDyslexic-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenDyslexic'; src: url('/wp-content/themes/kadence/assets/fonts/OpenDyslexic-Italic.otf') format('opentype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'OpenDyslexic'; src: url('/wp-content/themes/kadence/assets/fonts/OpenDyslexic-Bold.otf') format('opentype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'OpenDyslexic'; src: url('/wp-content/themes/kadence/assets/fonts/OpenDyslexic-BoldItalic.otf') format('opentype'); font-weight: bold; font-style: italic; } /* Add similar @font-face rules for other styles like OpenDyslexicAlta, OpenDyslexicMono */ </style> <?php // Shortcode for Toggle Switch add_shortcode('dyslexic-font-toggle', function() { ob_start(); ?> <!-- Toggle Switch HTML --> <label class="switch"> <input type="checkbox" id="dyslexic-font-toggle"> <span class="slider round"></span> </label> <?php return ob_get_clean(); }); // JavaScript for Toggle Functionality and Additional CSS ?> <script> document.addEventListener('DOMContentLoaded', function() { const checkbox = document.getElementById('dyslexic-font-toggle'); if (checkbox) { checkbox.addEventListener('change', function() { document.body.classList.toggle('dyslexic-font'); }); } }); </script> <style> body.dyslexic-font { font-family: 'OpenDyslexic', sans-serif; } /* Styling for the Toggle Switch */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } </style> <?php } add_action('wp_head', 'wpdd_add_dyslexic_font_and_toggle_switch'); This code right now is a shortcode, but i also want it to run in all pages without a shortcode as i dont want to put in 200 over shortcodes in all my learndash lessons. The problem is: Everytime i input this shortcode inside of my learndash pages (lessons/worksheets/quizzes), it gives a critical error on that specific page. Im not sure why and ive reached out to learndash support but even they are not have to offer the support and handed me the dev docs. I figured it would help if I manually edit the php files but knowing wordpress, one error and it would break the site. Hence, thats why i use code snippets but it doesnt work for learndash pages and only works in other landing pages