How to Add Custom Code to a Single WordPress Page

Introduction:

WordPress is renowned for its flexibility and ease of use. In this article, I will discuss how you can effortlessly add custom code snippets to your WordPress pages using the free version of the WP Coder plugin, available at wordpress.org/plugins/wp-coder/.

What is the WP Coder Plugin?

WP Coder enables the embedding of HTML, JS, CSS, and PHP codes directly into your WordPress pages. This plugin simplifies managing style issues, adding web forms, or introducing interactive features.

Step 1: Installing WP Coder

The first step involves installing the WP Coder plugin. Navigate to your WordPress dashboard, head to 'Plugins', and select 'Add New'. In the search bar, type 'WP Coder' and locate the plugin in the search results. Once found, click 'Install Now' followed by 'Activate'.

Step 2: Create a New Snippet

To create a new snippet, click on the 'Add new' button on the WP Coder plugin page. You'll encounter fields for entering your custom code. WP Coder supports HTML, CSS, JavaScript, and PHP, enabling you to enhance various aspects of your site.

To source web element code, I often use codepen.io. For example, to create a floating button, I use this CodePen example.

Copy the HTML and CSS code, and then paste it into the respective HTML and CSS blocks in the plugin. You can also modify the code to meet your specific needs, such as changing colors or inserting links.

For functionalities like displaying certain buttons only to logged-in users, I utilize the PHP block.

if(is_user_logged_in()) {
    $buttons = '
    <li><a href="/dashboard" tooltip="Dashboard"><i class="fa-solid fa-gauge"></i></a></li>
     <li><a href="/settings" tooltip="Settings"><i class="fa-solid fa-gears"></i></a></li>
    <li><a href="/account" tooltip="Account"><i class="fa-solid fa-user"></i></a></li>
      <li><a href="/logout" tooltip="Log Out"><i class="fa-solid fa-right-from-bracket"></i></a></li>';

} else {
    $buttons = '
    <li><a href="/login" tooltip="Login"><i class="fa-solid fa-right-to-bracket"></i></a></li>
      <li><a href="/portfolio" tooltip="Portfolio"><i class="fa-solid fa-briefcase"></i></a></li>
      <li><a href="/gallery" tooltip="Gallery"><i class="fa-solid fa-images"></i></a></li>';
}

Finally, place the modified code into the HTML block.

<div class="flBtn flBtn-position-br flBtn-size-medium">
  <input type="checkbox">
  <a href="#" data-role="main">
   <i class="fa-solid fa-hand-pointer"></i>     
  </a>
  <ul class="flBtn-first">
    <li><a href="#" tooltip="Home">
      <i class="fa-solid fa-house"></i>
      </a></li>
    <li><a href="#" tooltip="Blog">
      <i class="fa-solid fa-newspaper"></i>
      </a></li>
    <li><a href="#" tooltip="Products">
     <i class="fa-solid fa-mobile-screen"></i>
      </a></li>
    <li><a href="#" tooltip="Reviews">
      <i class="fa-regular fa-comment-dots"></i>
      </a></li>
    {{$buttons}}
  </ul>
  <ul class="flBtn-second">
    <li><a href="#" tooltip="Facebook"><i class="fa-brands fa-facebook-f"></i></a></li>
    <li><a href="#" tooltip="Instagram"><i class="fa-brands fa-instagram"></i></a></li>
    <li><a href="#" tooltip="Twitter"><i class="fa-brands fa-x-twitter"></i></a></li>
    <li><a href="#" tooltip="Contact"><i class="fa-regular fa-envelope"></i></a></li>
  </ul>
</div>

Step 3: Inserting Your Code

After creating your snippet, insert the shortcode, such as [wp_code id="7"], into the page content where you want the custom code to appear. On the front-end, this results in floating buttons that vary between logged-in and non-logged-in users.

A significant feature of this plugin is the Test mode, where the snippet is displayed only to the site administrator, not to other users.

Conclusion:

Adding custom code snippets to your WordPress site can significantly enhance both its functionality and aesthetic appeal. WP Coder simplifies this process, making it accessible even to those with minimal coding experience.

Remember, while adding custom code can be powerful, it's crucial to always back up your site before implementing changes and ensure that your code is clean and secure to avoid any potential issues.

P.S. In future articles, I plan to describe various snippets that can be created using the WP Coder plugin.