DEV Community

Cover image for How to Add Custom Code to a Single WordPress Page
DmtLo
DmtLo

Posted on • Edited on

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.

WP Coder Admin Dashboard

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>';
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

WP Coder Front-End result Floating Buttons

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.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay