{"id":6785,"date":"2025-01-07T10:22:46","date_gmt":"2025-01-07T04:52:46","guid":{"rendered":"https:\/\/holithemes.com\/blog\/?p=6785"},"modified":"2025-02-03T17:01:42","modified_gmt":"2025-02-03T11:31:42","slug":"how-to-add-code-snippets-javascript-css-php-html","status":"publish","type":"post","link":"https:\/\/holithemes.com\/blog\/how-to-add-code-snippets-javascript-css-php-html\/","title":{"rendered":"How to Add Code Snippets \u2013 JavaScript, CSS, PHP, HTML"},"content":{"rendered":"\n<p>Unlock the full potential of your website by seamlessly integrating custom code with our comprehensive instructions.<\/p>\n\n\n\n<p>The&nbsp;<strong>Click-to-Chat<\/strong>&nbsp;plugin includes<strong>&nbsp;Built-in<\/strong>&nbsp;options for CSS customizations, allowing users to easily modify styles directly. For detailed guidance,<\/p>\n\n\n\n<p>Check out this documentation: <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/custom-css\/\">Click to Chat Custom CSS process<\/a><\/p>\n\n\n\n<p>However, if you need to add specific JavaScript, HTML, or PHP code snippets, we recommend using dedicated code snippet plugins. Below are two suggested plugins for this purpose and a step-by-step guide to installing and activating them.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Header Footer Code Manager<\/strong>&nbsp;&#8211; By DraftPress<\/li>\n\n\n\n<li><strong>WPCode \u2013 Insert Headers and Footers + Custom Code Snippets<\/strong>&nbsp;\u2013 WordPress Code Manager \u2013 By WP Code<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Adding Custom Code Using the Header Footer Code Manager Plugin<\/strong><\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Log in to Your WordPress Admin Dashboard<\/strong><\/li>\n\n\n\n<li><strong>Install the Header Footer Code Manager Plugin:<\/strong>\n<ul class=\"wp-block-list\">\n<li>From the left-hand menu, navigate to&nbsp;<strong>Plugins<\/strong>&nbsp;and click&nbsp;<strong>Add New<\/strong>.<\/li>\n\n\n\n<li>In the search bar, type&nbsp;<strong>\u201cHeader Footer Code Manager\u201d<\/strong>&nbsp;and press&nbsp;<strong>Enter<\/strong>.<\/li>\n\n\n\n<li>Click&nbsp;<strong>Install Now<\/strong>&nbsp;next to the plugin in the search results.<\/li>\n\n\n\n<li>Once installation is complete, click&nbsp;<strong>Activate<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"559\" height=\"336\" src=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/HCFM.webp\" alt=\"HCFM Installation\" class=\"wp-image-6790\" srcset=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/HCFM.webp 559w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/HCFM-300x180.webp 300w\" sizes=\"(max-width: 559px) 100vw, 559px\" \/><\/figure>\n\n\n\n<p><strong>3<\/strong>&nbsp;<strong>A<\/strong><strong>ccess&nbsp;<\/strong><strong>the&nbsp;<\/strong><strong>Header&nbsp;<\/strong><strong>Footer&nbsp;<\/strong><strong>Code&nbsp;<\/strong><strong>Manager&nbsp;<\/strong><strong>Plug<\/strong><strong>i<\/strong><strong>n<\/strong><strong>:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After activation, you will see&nbsp;<strong>HFCM<\/strong>&nbsp;listed in the dashboard menu. Click on it to open the plugin settings.<\/li>\n<\/ul>\n\n\n\n<p><strong>4<\/strong>&nbsp;<strong>Add a New Snippet:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click&nbsp;<strong>Add New<\/strong>&nbsp;to create a new code snippet.<\/li>\n\n\n\n<li>Provide a&nbsp;<strong>snippet<\/strong>&nbsp;<strong>Name<\/strong>, select the<strong>&nbsp;Type<\/strong>&nbsp;(e.g., JavaScript, HTML, PHP), and set the&nbsp;<strong>Display<\/strong>&nbsp;options.<\/li>\n\n\n\n<li>Choose the appropriate&nbsp;<strong>location<\/strong>&nbsp;(Header, Footer, etc.) and specify the&nbsp;<strong>Device Display<\/strong>&nbsp;(Desktop, Mobile, or All Devices).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"375\" src=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/01\/Adding-New-Snippet-1024x375.webp\" alt=\"Adding New Snippets\" class=\"wp-image-6792\" srcset=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/01\/Adding-New-Snippet-1024x375.webp 1024w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/01\/Adding-New-Snippet-300x110.webp 300w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/01\/Adding-New-Snippet-768x282.webp 768w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/01\/Adding-New-Snippet-1536x563.webp 1536w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/01\/Adding-New-Snippet.webp 1735w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>5<\/strong>&nbsp;<strong>Insert Your Custom Code:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the&nbsp;<strong>Snippet\/Code Section<\/strong>, add your custom code (JavaScript, HTML, or PHP).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"725\" height=\"219\" src=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Code-HCFM.webp\" alt=\"\" class=\"wp-image-6793\" srcset=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Code-HCFM.webp 725w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Code-HCFM-300x91.webp 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/figure>\n\n\n\n<p><strong>6<\/strong>&nbsp;<strong>Save and Preview:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once you\u2019ve added your code, save the changes. The custom code will now be displayed based on your specified settings (e.g., location and device display).<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">Adding Custom Code Using the WPCode \u2013 Insert Headers and Footers + Custom Code Snippets \u2013 WordPress Code Manager<\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Log in to Your WordPress Admin Dashboard<\/strong><\/li>\n\n\n\n<li><strong>Install the WPCode \u2013 Insert Headers and Footers + Custom Code Snippets \u2013 WordPress Code Manager<\/strong>\n<ul class=\"wp-block-list\">\n<li>From the left-hand menu, navigate to&nbsp;<strong>Plugins<\/strong>&nbsp;and click&nbsp;<strong>Add New<\/strong>.<\/li>\n\n\n\n<li>In the search bar, type&nbsp;<strong>\u201c<\/strong><strong>WPCode \u2013 Insert Headers and Footers + Custom Code Snippets \u2013 WordPress Code Manager<\/strong><strong>\u201d<\/strong>&nbsp;and press&nbsp;<strong>Enter<\/strong>.<\/li>\n\n\n\n<li>Click&nbsp;<strong>Install Now<\/strong>&nbsp;next to the plugin in the search results.<\/li>\n\n\n\n<li>Once installation is complete, click&nbsp;<strong>Activate<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"552\" height=\"330\" src=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/WP-Plugin-1.webp\" alt=\"\" class=\"wp-image-6794\" srcset=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/WP-Plugin-1.webp 552w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/WP-Plugin-1-300x179.webp 300w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>3<\/strong>&nbsp;<strong>Access the Header Footer Code Manager Plugin:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After activation, you will see&nbsp;<strong>Code Snippets<\/strong><strong>&nbsp;<\/strong>in the dashboard menu. Click on it to open the plugin settings.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"1702\" height=\"835\" src=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Adding-New-Snippet-WP-Code.webp\" alt=\"\" class=\"wp-image-6796\" style=\"width:891px;height:auto\" srcset=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Adding-New-Snippet-WP-Code.webp 1702w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Adding-New-Snippet-WP-Code-300x147.webp 300w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Adding-New-Snippet-WP-Code-1024x502.webp 1024w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Adding-New-Snippet-WP-Code-768x377.webp 768w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Adding-New-Snippet-WP-Code-1536x754.webp 1536w\" sizes=\"(max-width: 1702px) 100vw, 1702px\" \/><\/figure>\n\n\n\n<p><strong>4<\/strong>&nbsp;<strong>Choose Where Your Code Will Be Visible on the Front-End<\/strong><\/p>\n\n\n\n<p><strong>Select Display Location:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Decide where you want your custom code to appear on the front-end of your website. This can be in the&nbsp;<strong>Header<\/strong>,&nbsp;<strong>Footer<\/strong>, or in a specific section of a page.<\/li>\n<\/ul>\n\n\n\n<p><strong>Set Device Visibility:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Specify whether the code should be visible on&nbsp;<strong>Desktop<\/strong>,&nbsp;<strong>Mobile<\/strong>, or&nbsp;<strong>All Devices<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>5<\/strong>&nbsp;<strong>Add Your Custom Code (JavaScript, HTML, CSS, PHP, and More)<\/strong><\/p>\n\n\n\n<p><strong>Choose Code Type:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the type of custom code you need, such as&nbsp;<strong>JavaScript<\/strong>,&nbsp;<strong>HTML<\/strong>,&nbsp;<strong>CSS<\/strong>, or&nbsp;<strong>PHP<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Insert Your Code:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Paste your desired custom code into the snippet section and save it. The code will be executed based on your selected display and device settings.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"353\" src=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Alert-Code-1024x353.webp\" alt=\"\" class=\"wp-image-6797\" srcset=\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Alert-Code-1024x353.webp 1024w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Alert-Code-300x104.webp 300w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Alert-Code-768x265.webp 768w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Alert-Code-1536x530.webp 1536w, https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2025\/02\/Alert-Code.webp 1695w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>6<\/strong>&nbsp;<strong>Front-End Visibility Based on Preferences<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The written code will be visible on the front-end of your website according to the preferences you set for&nbsp;<strong>location<\/strong>&nbsp;and&nbsp;<strong>device visibility<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><em>By leveraging these tools, you can efficiently manage custom code snippets, enhance your website\u2019s functionality, and maintain a secure WordPress setup with ease\ud83d\ude0a.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unlock the full potential of your website by seamlessly integrating custom code with our comprehensive instructions. The&nbsp;Click-to-Chat&nbsp;plugin includes&nbsp;Built-in&nbsp;options for CSS customizations, allowing users to easily modify styles directly. For detailed guidance, Check out this documentation: Click to Chat Custom CSS process However, if you need to add specific JavaScript, HTML, or PHP code snippets, we [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[2,7],"tags":[],"class_list":["post-6785","post","type-post","status-publish","format-standard","hentry","category-how-to","category-wordpress"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/posts\/6785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/comments?post=6785"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/posts\/6785\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/media?parent=6785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/categories?post=6785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/blog\/wp-json\/wp\/v2\/tags?post=6785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}