{"id":1896660,"date":"2019-10-18T13:19:47","date_gmt":"2019-10-18T17:19:47","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/best-practices-for-implementing-custom-code-snippets\/"},"modified":"2025-02-25T13:59:04","modified_gmt":"2025-02-25T18:59:04","slug":"best-practices-for-implementing-custom-code-snippets","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/best-practices-for-implementing-custom-code-snippets\/","title":{"rendered":"Using Custom Code Snippets"},"content":{"rendered":"\n

When we refer to “snippets” in this context, we mean small pieces of PHP code. There are three basic ways to add these PHP snippets to your WordPress site:<\/p>\n\n\n\n

    \n
  1. Using a Functionality Plugin:<\/strong>
    This is the best practice to prevent possible conflicts. A functionality plugin<\/a> is a custom plugin you create to add your PHP code. This keeps your snippets separate from your theme, ensuring they won’t be lost if you change themes.<\/li>\n\n\n\n
  2. Adding to a Child Theme\u2019s functions.php<\/code> File:<\/strong>
    If the snippet is specific to your theme, it’s best to use a child theme. First, make sure you have a child theme set up, then add your PHP snippet to the     child theme’s functions.php<\/code> <\/a>file. This way, your custom code stays intact even if the parent theme is updated.<\/li>\n\n\n\n
  3. Using a Plugin like Code Snippets:<\/strong>
    For a simpler approach, you can use a plugin like “    Code Snippets<\/a>.” This plugin allows you to add PHP snippets directly from the WordPress dashboard without needing to edit files.<\/li>\n<\/ol>\n\n\n\n

    Other than knowing where to implement a code snippet, there are additional things to take into consideration when adding custom code for your calendar to your site. Many WordPress tutorials \u2014 including our ours \u2014 provide snippets of code used for demonstration purposes. It’s totally fine to copy and paste those for your own use. But when you do, you’ll want to make sure you check a couple of things.<\/p>\n\n\n\n

    Remove the opening PHP tag<\/h2>\n\n\n\n

    PHP code snippets often start with an opening PHP tag. like this:<\/p>\n\n\n

    \n<?php\n  \/* Some code *\/\n?>\n<\/pre><\/div>\n\n\n
    Chances are that your theme already has that opening PHP tag. So the one included in the snippet is totally unnecessary for use, and can actually break your site.<\/p>\n\n\n\n
    Watch out for garbled code<\/h2>\n\n\n\n
    Many people use GitHub Gists<\/a> or similar sites like Pastebin<\/a>, Cacher.io<\/a>, or GitLab Snippets<\/a>. They’re a convenient way to share code. At the same time, it’s possible that simply copying and pasting the code from one of these services will result in unescaped, or “garbled” code.<\/p>\n\n\n\n
    Here’s what we mean:<\/p>\n\n\n\n
    \/\/ This...\n$this->method_name()\n\n\/\/ ...might paste like this:\n$this-&gt;method_name()<\/code><\/pre>\n\n\n\n
    See that &gt;<\/code> in the code? That’s the unescaped HTML for the “greater than” (><\/code>) sign. It’s subtle, but can also break your site.<\/p>\n\n\n\n
    Another possible formatting issue: quotation marks<\/strong>. There are actually two types of quotation marks in HTML: curly and plain.<\/p>\n\n\n\n
    Curly quote: \u201cThe quick brown fox...\u201d\nCurly single quote: \u2018The quick brown fox...\u2019\nPlain quote: \"The quick brown fox...\"\nPlain single quote: 'The quick brown fox...'<\/code><\/pre>\n\n\n\n
    See the difference? Again, it’s subtle, but curly quotes are unsupported in code. So, watch for those when copying and pasting and ensure that your snippets always use plain quotes.<\/p>\n\n\n\n
    CSS snippets<\/h2>\n\n\n\n
    Everything we’ve looked at so far concerns PHP snippets. But let’s say you’re working with a CSS or JavaScript snippet instead.<\/p>\n\n\n\n
    The style.css<\/code> file<\/h3>\n\n\n\n
    A CSS snippet can go straight into your theme’s style.css<\/code> file if you are using your own custom theme. However, if you are using a theme you downloaded or purchased, then you will want to make a child theme and paste the CSS snippet in the child theme’s style.css<\/code> file instead. This ensures your custom code is preserved when installing theme updates.<\/p>\n\n\n\n
    The WordPress Customizer<\/h3>\n\n\n\n
    Another way to add custom CSS is to paste it in the WordPress Customizer. Since WordPress 4.7, the Customizer includes a “Custom CSS<\/a>” section that allows you to post code there instead of putting it in a theme’s style.css<\/code> file.<\/p>\n\n\n\n
    \n
    \n
    \"\"<\/a>
    The “Custom CSS” tab<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/a>
    The “Custom CSS” panel<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
    Using the WordPress Customizer for CSS snippets is a super safe way to go, especially if you are uncomfortable or unable to access your theme’s files.<\/p>\n\n\n\n
    Full Site Editor<\/h3>\n\n\n\n
    If you have a Full Site Editor theme, here are the steps to add Additional CSS:<\/p>\n\n\n\n
      \n
    1. Go to your WordPress dashboard and select Appearance > Editor<\/li>\n\n\n\n
    2. Select “Styles”<\/li>\n\n\n\n
    3. Select the “Edit Styles” icon next the Styles header<\/li>\n\n\n\n
    4. Select the “More” three vertical dots in the Styles menu in the right sidebar, then select “Additional CSS”<\/li>\n\n\n\n
    5. Enter your Additional CSS<\/li>\n<\/ol>\n\n\n\n
      \n
      \n
      1.<\/h6>\n\n\n\n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      \n
      2.<\/h6>\n\n\n\n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      \n
      3.<\/h6>\n\n\n\n
      \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
      \n
      \n
      4.<\/h6>\n\n\n\n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      \n
      5.<\/h6>\n\n\n\n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      <\/div>\n<\/div>\n\n\n\n
      Adding JavaScript Snippets<\/h2>\n\n\n\n
      Sometimes, you might need to add a JavaScript snippet to your site. This works differently from adding PHP code. JavaScript snippets are typically placed in the header or footer of a WordPress site to ensure they load across all pages. While you can manually add them to your header.php<\/code> or footer.php<\/code> files, any theme updates will overwrite these changes.<\/p>\n\n\n\n
      To avoid this, it’s best to use a plugin like WP Code<\/a>. Once you’ve installed the plugin, you need to go to Snippets > Add<\/strong> Snippet<\/strong>:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Then choose Add Your Custom Code (New Snippet)<\/strong>:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      And then choose the JavaScript Snippet<\/strong> option:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Once you’ve added the snippet, make sure you save it and that it’s active:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Backup, backup, backup!<\/h2>\n\n\n\n
      Seriously, we can’t say this enough. Make sure you have a restorable backup of your site’s files and database before making any changes.<\/strong> This helps prevent a worst-case scenario and offers a lot of peace of mind.<\/p>\n\n\n\n
      Test changes first<\/h2>\n\n\n\n
      We strongly recommend testing any change to your site in a safe staging environment<\/a> before adding new code to your live site. This way, you can always be confident that the code you’re using works, and that it is compatible with your site without jeopardizing your live site.<\/p>\n","protected":false},"excerpt":{"rendered":"
      When we refer to “snippets” in this context, we mean small pieces of PHP code. There are three basic ways to add these PHP snippets to your WordPress site: Other than knowing where to implement a code snippet, there are additional things to take into consideration when adding custom code for your calendar to your…<\/p>\n","protected":false},"author":5,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[59],"tags":[25],"stellar-product-taxonomy":[],"class_list":["post-1896660","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizing-resources","tag-customizations"],"acf":[],"taxonomy_info":{"category":[{"value":59,"label":"PHP & Functions"}],"post_tag":[{"value":25,"label":"Customizations"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Leah","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/leahk\/"},"comment_info":0,"category_info":[{"term_id":59,"name":"PHP & Functions","slug":"customizing-resources","term_group":0,"term_taxonomy_id":59,"taxonomy":"category","description":"","parent":24,"count":101,"filter":"raw","term_order":"0","cat_ID":59,"category_count":101,"category_description":"","cat_name":"PHP & Functions","category_nicename":"customizing-resources","category_parent":24}],"tag_info":[{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1896660"}],"version-history":[{"count":7,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896660\/revisions"}],"predecessor-version":[{"id":1964344,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896660\/revisions\/1964344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1896660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896660"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}