![]() The faster method is to use the official jQuery UI library (/themeroller) to create your own custom accordion stylesheet, download the files, then upload them to cPanel. It is time-consuming to hard code an entire stylesheet. The last section of code to add is for styling and this is the complicated part. Put the correct file path in here or WordPress will not be able to locate the script. Your theme may have the JS folder in a different location. In the above code, where “assets/js/accordion.js” is located, that is the file path to the JavaScript file uploaded previously. 'assets/js/accordion.js',Īdd_action('wp_enqueue_scripts', 'my_scripts_method') Wp_enqueue_script('jQuery-ui-accordion') This is done in your theme’s functions.php file.Īdd this code to your functions.php file… // enqueue script Instead, you need to use the ‘wp_enqueue_scripts’ function. As WordPress runs on PHP, JavaScript cannot be loaded using the tag in the header.php file. On most other platforms, this is done in the header file. This part is to tell WordPress to load the JavaScript file. Open the JS folder for your theme, click “upload file” and drop in your “accordion.js” file.Įdit the functions.php to load the JavaScript ![]() If your theme does not have one, create one. The folder for all JavaScript files is JS. That would follow the file path: WP Content > Themes > Your Theme > Assets > JS. Others may use a subfolder like an “assets” folder within the Theme Folder. ![]() Some themes will have the folder at the root of the theme files File path: WP Content > Themes > Your Theme > JS. This is where to put any JavaScript files. Go to your cPanel, open the theme you want to run the script on, then look for the folder called “JS”. How to add custom JavaScript files to WP themes … within your text editor, jQuery will be triggered. Open your page or post in edit mode and use the “text” editor. You can still collapse text within the text editor. You cannot run JavaScript queries, and you can’t install WordPress plugins either. Add an accordion section with HTML only (required on free plans) The image URL is shown in your media library.Ģ. To include images in expanded content sections, click the three vertical dots, select “Edit as HTML” and add your image source code using the following HTML string Now, WordPress has “lazy load” enabled by default. It used to be that hiding the images within an accordion menu could help bump up site speed. The advantage of using the new blocks for accordion-style content is that the JavaScript queries required to enable it only run when the block is loaded. If you are running an older version of WordPress, you will need to add the plugin the standard way.Īlternatively, update your WordPress version to the latest available. The ability to add plugins from the WP block editor dashboard was added in WordPress version 5.6. If you wanted to find out “how much is delivery?”, what would you rather have…Ī) Single title bars with specific questions in heading tags? They can scroll the titles on an FAQs page, then when they find a question they want to be answered, they can click to only view that specific content section. On long pages, the accordion element is preferable as it prevents screens from being filled with questions that the user has no interest in reading about. Content boxes displayed with toggle elements do not automatically close. With the toggle function, all collapsible content areas can be loaded and remain open.When the next accordion element is clicked, the previous text section closes automatically. With an accordion element, when one section is clicked, only that section of content is loaded.The difference between toggle and accordion text is this… The accordion and toggle features are two methods that work to collapse text in WordPress. ![]() The difference between toggle and accordion on WordPress On self-hosted sites, themes can be coded to use WordPress hooks to load a jQuery UI Accordion. free plans can make content collapsible by adding HTML within the text editor. Use “Accordion” plugins or shortcode plugins with the “accordion” or “toggle” function to collapse text in WordPress. How to collapse/expand content in WordPress It will even work on free plans too, just without any styling. If your theme does not support collapsible content, you can add it manually with plugins or by editing your theme files. Some WP themes come with custom shortcodes to inject accordion menus anywhere on your site. Once you see how easy it is to collapse text in WordPress, you can worry less about cluttering your site with chunks of content that affect readability.Ĭollapsible content can be added with a toggle or by creating accordion menus.
0 Comments
Leave a Reply. |