<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: DmtLo</title>
    <description>The latest articles on DEV Community by DmtLo (@dmtlo).</description>
    <link>https://dev.to/dmtlo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F723276%2Fbdd99302-e4ad-4ab3-bd25-e36c65aafa98.jpg</url>
      <title>DEV Community: DmtLo</title>
      <link>https://dev.to/dmtlo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/dmtlo"/>
    <language>en</language>
    <item>
      <title>Almost 20% of WordPress.org plugins are stuck at “0+ installs”</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Mon, 25 Aug 2025 13:19:36 +0000</pubDate>
      <link>https://dev.to/dmtlo/almost-20-of-wordpressorg-plugins-are-stuck-at-0-installs-45lp</link>
      <guid>https://dev.to/dmtlo/almost-20-of-wordpressorg-plugins-are-stuck-at-0-installs-45lp</guid>
      <description>&lt;p&gt;While digging into WordPress.org plugin statistics, I found something surprising:&lt;/p&gt;

&lt;p&gt;👉 &lt;strong&gt;Nearly 19% of all plugins never get past the “0+ installs” mark.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That’s more than &lt;strong&gt;10,500 plugins basically invisible to users&lt;/strong&gt; — almost 1 out of 5 in the entire repository.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why does this happen?
&lt;/h2&gt;

&lt;p&gt;Looking at the data and reading community feedback, a few clear patterns emerge:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🗓 &lt;strong&gt;Abandoned at launch&lt;/strong&gt; — ~39% of “0 installs” plugins have identical &lt;em&gt;published&lt;/em&gt; and &lt;em&gt;last updated&lt;/em&gt; dates. Uploaded once and never touched again.
&lt;/li&gt;
&lt;li&gt;🛠 &lt;strong&gt;Built-for-myself projects&lt;/strong&gt; — many are coded for a single website and uploaded “just in case,” but never reach broader adoption.
&lt;/li&gt;
&lt;li&gt;🔍 &lt;strong&gt;Discovery issues&lt;/strong&gt; — the WordPress.org search algorithm heavily favors plugins with large install counts. New ones rarely show up.
&lt;/li&gt;
&lt;li&gt;📢 &lt;strong&gt;No marketing&lt;/strong&gt; — without blog posts, social sharing, or active promotion, users never even discover them.
&lt;/li&gt;
&lt;li&gt;🗂 &lt;strong&gt;Tag chaos&lt;/strong&gt; — the repository has ~57,000 unique tags, which makes plugin discovery messy and inconsistent.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As one plugin developer on Reddit put it:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;“WordPress is now a business area. If you don’t invest in marketing and teams that amplify your voice, your plugin bites dust.”&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Update activity
&lt;/h2&gt;

&lt;p&gt;To dig deeper, I analyzed update frequency for the &lt;strong&gt;10,581 plugins stuck at 0 installs&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
Here’s what I found:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Count&lt;/th&gt;
&lt;th&gt;% of total&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;No updates &amp;gt; 2 years&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;5,224&lt;/td&gt;
&lt;td&gt;49.4%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;No updates 1–2 years&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;912&lt;/td&gt;
&lt;td&gt;8.6%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;No updates 90d–1y&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;2,503&lt;/td&gt;
&lt;td&gt;23.6%&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;📊 &lt;strong&gt;Almost half of the “0 installs” plugins haven’t been touched in over two years.&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Only about 1 in 5 show recent updates (&amp;lt;90 days).&lt;/p&gt;




&lt;h2&gt;
  
  
  Community insights
&lt;/h2&gt;

&lt;p&gt;Some thoughts from plugin authors and users (via Reddit discussion):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;“The repo search is beyond bad. Even if your plugin is better, people won’t find it.”&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;“Developers aren’t marketers. Without visibility, good plugins stay invisible.”&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;&lt;em&gt;“Some plugins are niche — useful to one site, but irrelevant to most users.”&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Is this a problem?
&lt;/h2&gt;

&lt;p&gt;Some argue it’s just the nature of an open repository: anyone can upload code, most will never be used.&lt;/p&gt;

&lt;p&gt;Others see it as a deeper issue:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Poor discoverability
&lt;/li&gt;
&lt;li&gt;Broken search
&lt;/li&gt;
&lt;li&gt;Inconsistent tagging
&lt;/li&gt;
&lt;li&gt;Lack of support for small developers
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Either way, it highlights a tension in the ecosystem: &lt;strong&gt;visibility is everything&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  What could help?
&lt;/h2&gt;

&lt;p&gt;Ideas often mentioned by the community:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🔎 Advanced filters (by industry, builder compatibility, plugin type).
&lt;/li&gt;
&lt;li&gt;🗂 Unified categories instead of 57k scattered tags.
&lt;/li&gt;
&lt;li&gt;🆕 “Sort by most recent” option in WP Admin when browsing plugins.
&lt;/li&gt;
&lt;li&gt;🤖 AI-driven categorization to make discovery easier.
&lt;/li&gt;
&lt;li&gt;🤝 “You may also like” recommendations inside the repo.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;Nearly &lt;strong&gt;1 in 5 WordPress plugins never see the light of day&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
The reasons are complex: lack of marketing, poor search, abandoned projects, and tough competition.&lt;/p&gt;

&lt;p&gt;But maybe the real lesson is this:&lt;br&gt;&lt;br&gt;
👉 Building a plugin is only half the journey. The other half is making sure people actually &lt;strong&gt;find and trust it&lt;/strong&gt;.&lt;/p&gt;




&lt;p&gt;💬 &lt;strong&gt;What do you think?&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Should WordPress.org improve plugin discovery?
&lt;/li&gt;
&lt;li&gt;Or is this just the natural cost of having an open repo?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;📊 Data source: &lt;a href="https://wpmonitor.dev/plugins/" rel="noopener noreferrer"&gt;WP Monitor – Plugin Statistics&lt;/a&gt;&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to Track Plugins on WordPress.org?</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Thu, 02 Jan 2025 09:46:25 +0000</pubDate>
      <link>https://dev.to/dmtlo/how-to-track-plugins-on-wordpressorg-1c8k</link>
      <guid>https://dev.to/dmtlo/how-to-track-plugins-on-wordpressorg-1c8k</guid>
      <description>&lt;p&gt;Hey, community 👋 &lt;/p&gt;

&lt;p&gt;As a long-time WordPress plugin developer, I’ve encountered various challenges over the years. One common issue many developers, including myself, is tracking the growth and popularity of our plugins on WordPress.org.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problems Developers Face&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;No convenient way to monitor plugin growth&lt;br&gt;
While WordPress.org provides some analytics, like the number of active installations and downloads, there’s no centralized tool for comprehensive tracking. This often forces us to spend excessive time on manual analysis.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Difficulty in evaluating marketing campaigns&lt;br&gt;
It’s crucial to understand how promotional efforts impact plugin popularity. Without robust analytics, gauging the effectiveness of strategies becomes a guessing game.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;How WPMonitor.dev Solves These Problems&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;On October 16, 2024, I launched &lt;a href="https://wpmonitor.dev/" rel="noopener noreferrer"&gt;WPMonitor.dev&lt;/a&gt;, a tool designed to address these issues. Here’s how it works:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Tracking Plugin Rankings on WordPress.org&lt;br&gt;
WPMonitor.dev allows you to monitor your plugin’s rankings in the WordPress.org repository. It helps you analyze whether your plugin is growing in popularity and spot trends over time.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Data-Driven Strategic Decisions&lt;br&gt;
With clear analytics at your fingertips, you can adjust your plugin’s marketing strategy as needed. For example, if your plugin’s visibility drops, you can review its description, keywords, or other factors to regain traction.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Revenue Integration&lt;br&gt;
WPMonitor.dev lets you track earnings from CodeCanyon or your own stores created with Easy Digital Downloads. This way, you have all the critical metrics in one place—especially useful if you offer premium versions of your plugins.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This tool simplifies life for developers who want to focus not just on building great products but also on effectively promoting them. If you’re looking for a way to stay on top of your plugin analytics, I highly recommend trying WPMonitor.dev.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features of WPMonitor.dev&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I built WPMonitor.dev with developers in mind, prioritizing simplicity and functionality. Here are its standout features:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;No account required&lt;br&gt;
There’s no need to sign up or create an account. All the data you input is securely stored in your browser’s local storage, ensuring maximum privacy and ease of use.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Powered by the official WordPress API&lt;br&gt;
WPMonitor.dev integrates with the official WordPress.org API, guaranteeing accurate and up-to-date data. You can trust that the analytics reflect real-world performance.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;3.Keyword Tracking&lt;br&gt;
The tool helps you analyze keywords that make your plugin discoverable in the WordPress.org repository. This allows you to optimize your plugin’s description and title to improve visibility.&lt;/p&gt;

&lt;p&gt;If you’re a plugin developer, WPMonitor.dev is here to make your analytics journey smoother.&lt;/p&gt;

&lt;p&gt;P.S. Also, you can use &lt;a href="https://wp-rankings.com/" rel="noopener noreferrer"&gt;wp-rankings.com&lt;/a&gt; - it’s a very good tool too.&lt;/p&gt;

&lt;p&gt;P.P.S &lt;a href="https://www.producthunt.com/products/wp-monitor/reviews/new" rel="noopener noreferrer"&gt;Leave a review for WPMonitor.dev on Product Hunt!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Share your experience in the comments - I wonder what tools you use for analytics of plugins.&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>webdev</category>
      <category>plugins</category>
    </item>
    <item>
      <title>Introducing WPMonitor: Your Real-Time Tracking Companion for WordPress Plugins and Themes</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Sun, 06 Oct 2024 14:04:48 +0000</pubDate>
      <link>https://dev.to/dmtlo/introducing-wpmonitor-your-real-time-tracking-companion-for-wordpress-plugins-and-themes-2b89</link>
      <guid>https://dev.to/dmtlo/introducing-wpmonitor-your-real-time-tracking-companion-for-wordpress-plugins-and-themes-2b89</guid>
      <description>&lt;p&gt;Hey, Dev community! 👋&lt;/p&gt;

&lt;p&gt;I am thrilled to introduce &lt;strong&gt;WPMonitor&lt;/strong&gt; (&lt;a href="https://wpmonitor.dev/" rel="noopener noreferrer"&gt;wpmonitor.dev&lt;/a&gt;), a project I have created to simplify the tracking and analysis of WordPress plugins and themes. As a WordPress plugins and themes developer, keeping track of my projects used to be a hassle. I wanted a tool that could offer straightforward analytics without the need to navigate through multiple pages on wordpress.org.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;WPMonitor&lt;/strong&gt; was crafted with simplicity and efficiency in mind, providing real-time insights and easy setup. Moreover, ensuring the security of data was a top priority during the development process.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Importance of Tracking 📈
&lt;/h2&gt;

&lt;p&gt;Understanding user engagement, optimizing keywords, and growing my projects rely heavily on tracking the downloads of WordPress plugins and themes. &lt;/p&gt;

&lt;h3&gt;
  
  
  What I needed?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Instant Insights&lt;/strong&gt;: Real-time updates to see current performance statistics at a glance.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Data Privacy&lt;/strong&gt;: I had no desire to leave information about my plugins on third-party servers. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keyword Position&lt;/strong&gt;: Track the position of each plugin or theme based on specific keywords in the WordPress.org directory.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To address these issues, &lt;strong&gt;WPMonitor&lt;/strong&gt; was designed to be user-friendly, fast, and privacy-focused. Settings are stored locally in your browser using LocalStorage, eliminating the need for accounts, server-side storage, or any complications.&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Features at a Glance 🎯
&lt;/h2&gt;

&lt;p&gt;Here is a brief overview of what &lt;strong&gt;WPMonitor&lt;/strong&gt; has to offer:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;No Account Required&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Get started with tracking plugins and themes immediately – no registration or sign-up needed. Simply visit the site, add your plugins and themes, and you're good to go.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Easy Plugin and Theme Management&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Enter your plugin or theme details on the Settings page. Everything is saved locally in your browser. In case you clear your browser data or switch devices, you need to enter the plugins and themes data again.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Seamless Integration with WordPress API&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;All data is retrieved directly from the official WordPress API, guaranteeing real-time statistics. This allows you to monitor your rankings, downloads, and keyword performance without any delays.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Data Privacy with Local Storage&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Rest assured that your data remains within your browser. WPMonitor do not store your plugin or theme information on any server. Should you wish to reset your settings, simply delete the LocalStorage data in your browser, and your preferences will be erased.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Keyword Monitoring&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Track whether your plugin or theme is visible on the first page of WordPress search results for specific keywords. This feature aids in assessing your visibility and enhancing your SEO efforts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Technical Details 🛠️📑
&lt;/h2&gt;

&lt;p&gt;For those curious about the technology behind WPMonitor, here is a glimpse of the tools utilized:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend&lt;/strong&gt;: Leveraging Svelte for a swift and efficient development process.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Data Handling&lt;/strong&gt;: Utilizing WordPress.org's official REST API.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;State Management&lt;/strong&gt;: LocalStorage API for preserving user data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deployment&lt;/strong&gt;: Hosted on Vercel.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Whether you are a seasoned WordPress developer or simply interested in monitoring your plugins and themes, feel free to explore &lt;strong&gt;WPMonitor&lt;/strong&gt; and share your thoughts with me. Your feedback is highly valued as I am constantly striving to enhance this tool based on user experiences.&lt;/p&gt;

&lt;h2&gt;
  
  
  I’d Love Your Feedback ✨📣
&lt;/h2&gt;

&lt;p&gt;Since this is a project built by a WordPress developer for WordPress developers, I’m always open to ideas and feedback. I created this tool to meet my own needs, but I’d love to hear how it works for you and what could make it even better.&lt;/p&gt;

&lt;p&gt;Feel free to drop a comment below. ⬇️&lt;/p&gt;

&lt;p&gt;Thanks for reading, and happy coding! 🚀&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>developer</category>
    </item>
    <item>
      <title>Responsive Column List of Reviews</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Fri, 05 Jul 2024 07:12:01 +0000</pubDate>
      <link>https://dev.to/dmtlo/responsive-column-list-of-reviews-448a</link>
      <guid>https://dev.to/dmtlo/responsive-column-list-of-reviews-448a</guid>
      <description>&lt;p&gt;Sleek and adaptable column list to display reviews. Perfect for any website, this item showcases a design that automatically adjusts to different screen sizes, ensuring an optimal viewing experience on desktops, tablets, and mobile devices. Featuring clean HTML and CSS code, this example helps you organize user reviews in a visually appealing and accessible manner. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Check out this Pen I made!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/dmtlo/embed/poXzaoa?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>webdev</category>
      <category>css</category>
      <category>html</category>
    </item>
    <item>
      <title>Responsive Comparison Table</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Wed, 12 Jun 2024 13:53:43 +0000</pubDate>
      <link>https://dev.to/dmtlo/responsive-comparison-table-5fen</link>
      <guid>https://dev.to/dmtlo/responsive-comparison-table-5fen</guid>
      <description>&lt;p&gt;Fully responsive and visually appealing comparison table, perfect for showcasing the Pro and Free features of the product or service.  &lt;/p&gt;

&lt;p&gt;Check out this Pen I made!&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/dmtlo/embed/zYQEgJj?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>css</category>
      <category>html</category>
      <category>webdev</category>
    </item>
    <item>
      <title>World Population Online Counter</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Mon, 01 Jan 2024 13:57:02 +0000</pubDate>
      <link>https://dev.to/dmtlo/world-population-online-counter-1e00</link>
      <guid>https://dev.to/dmtlo/world-population-online-counter-1e00</guid>
      <description>&lt;p&gt;A world population online counter that counts: the total number of people at the moment, the number of births and deaths. The counter is based on UN forecast data. &lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/dmtlo/embed/MWxamve?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;a href="https://wordpress.org/plugins/wp-coder/"&gt;Easily embed Pen in your WordPress site using WPCoder!&lt;/a&gt;&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Floating Button Pure CSS</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Wed, 06 Dec 2023 08:55:47 +0000</pubDate>
      <link>https://dev.to/dmtlo/floating-button-pure-css-57fe</link>
      <guid>https://dev.to/dmtlo/floating-button-pure-css-57fe</guid>
      <description>&lt;p&gt;Informative floating button with sub buttons with tips. It can be used as an alternative to the site navigation menu&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/dmtlo/embed/eYYWGER?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>html</category>
      <category>css</category>
    </item>
    <item>
      <title>How to Create Countdowns for Each Logged-In User in WordPress</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Wed, 22 Nov 2023 15:49:58 +0000</pubDate>
      <link>https://dev.to/dmtlo/how-to-create-countdowns-for-each-logged-in-user-in-wordpress-417d</link>
      <guid>https://dev.to/dmtlo/how-to-create-countdowns-for-each-logged-in-user-in-wordpress-417d</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Creating a personalized countdown timer for each user on your WordPress site can be a powerful tool, especially for scenarios like limited-time offers or deadlines. This guide will walk you through setting up a shortcode-based countdown timer that starts ticking from each user's registration date and continues regardless of their login status or device.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Installing WP Coder
&lt;/h2&gt;

&lt;p&gt;Begin by installing the &lt;a href="https://wordpress.org/plugins/wp-coder/"&gt;WP Coder&lt;/a&gt; plugin. Navigate to your WordPress dashboard, select 'Plugins', and then 'Add New'. Search for 'WP Coder', install and activate it. Then, proceed to the plugin's page to create a new snippet.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t6Qq2mIu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cvgnhxzaaahwy3gxlzq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--t6Qq2mIu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cvgnhxzaaahwy3gxlzq.png" alt="WP Coder Snippet" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Create PHP function
&lt;/h2&gt;

&lt;p&gt;In the 'PHP' tab, create a function to fetch the current user's registration date. Use the following code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nf"&gt;is_user_logged_in&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Check if the user login in site&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="nv"&gt;$current_user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;wp_get_current_user&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Get current user object&lt;/span&gt;
    &lt;span class="nv"&gt;$registration_date&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$current_user&lt;/span&gt; &lt;span class="k"&gt;instanceof&lt;/span&gt; &lt;span class="n"&gt;WP_User&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Get the user's  registration date and time in the local format.&lt;/span&gt;
           &lt;span class="c1"&gt;// If you want use the Universal format remove the function get_date_from_gmt()&lt;/span&gt;
        &lt;span class="nv"&gt;$registration_date&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;get_date_from_gmt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$current_user&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;user_registered&lt;/span&gt;&lt;span class="p"&gt;;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="nv"&gt;$dateObject&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;DateTime&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$registration_date&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// Adding intervals&lt;/span&gt;
    &lt;span class="nv"&gt;$dateObject&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;modify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'+2 weeks'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="c1"&gt;// Set the new date in the variable 'countdown_date'&lt;/span&gt;
    &lt;span class="nv"&gt;$countdown_date&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$dateObject&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'Y-m-d H:i'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This code checks if the user is logged in, retrieves their registration date, and calculates the date two weeks from that point.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Create HTML for the Countdown
&lt;/h2&gt;

&lt;p&gt;Next, create the HTML structure for the countdown display:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"countdown-box"&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"countdown-1"&lt;/span&gt; &lt;span class="na"&gt;data-date=&lt;/span&gt;&lt;span class="s"&gt;"{{$countdown_date}}"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"days"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/span&amp;gt;&lt;/span&gt;d : &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"hours"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/span&amp;gt;&lt;/span&gt;h : &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"minutes"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/span&amp;gt;&lt;/span&gt;m : &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"seconds"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/span&amp;gt;&lt;/span&gt;s
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note the use of the 'data-date' attribute to integrate the PHP-generated countdown date.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Create JavaScript for the countdown
&lt;/h2&gt;

&lt;p&gt;Implement JavaScript to manage the countdown functionality:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;DOMContentLoaded&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Get the countdown element&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;countdown&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;countdown-1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// Get the start date that is in attrubute 'data-date'&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;getDate&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;countdown&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getAttribute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;data-date&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// // Set the date we're counting down to&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;countDownDate&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;getDate&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;getTime&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="c1"&gt;// Update the count down every 1 second&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setInterval&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

        &lt;span class="c1"&gt;// Get today's date and time&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;now&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;getTime&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

        &lt;span class="c1"&gt;// Find the distance between now and the countdown date&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;distance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;countDownDate&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;now&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="c1"&gt;// Time calculations for days, hours, minutes and seconds&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;days&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;distance&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;hours&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;distance&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;minutes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;distance&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;seconds&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;distance&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="c1"&gt;// Set the days, hours, minutes  and seconds&lt;/span&gt;
        &lt;span class="nx"&gt;countdown&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.days&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;days&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;countdown&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.hours&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;hours&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;countdown&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.minutes&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;minutes&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;countdown&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.seconds&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;seconds&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;


        &lt;span class="c1"&gt;// If the count down is over, write some text &lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;distance&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;clearInterval&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="nx"&gt;countdown&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;EXPIRED&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This script calculates and updates the time remaining every second until the countdown expires.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Inserting Your Code
&lt;/h2&gt;

&lt;p&gt;Finally, after saving your snippet, insert the shortcode [wp_code id="7"] into the desired page content. This will display the countdown timer for each registered user on your site.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion:
&lt;/h2&gt;

&lt;p&gt;Setting up a user-specific countdown timer in WordPress enhances the user experience by adding a sense of urgency and personalization. The process, involving PHP, HTML, and JavaScript, demonstrates the power of integrating multiple coding languages to achieve dynamic web functionalities. As always, ensure your code is error-free and secure, and consider user experience in its implementation.&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How to Add Custom Code to a Single WordPress Page</title>
      <dc:creator>DmtLo</dc:creator>
      <pubDate>Tue, 21 Nov 2023 12:27:48 +0000</pubDate>
      <link>https://dev.to/dmtlo/how-to-add-custom-code-to-a-single-wordpress-page-1ph1</link>
      <guid>https://dev.to/dmtlo/how-to-add-custom-code-to-a-single-wordpress-page-1ph1</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;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 &lt;strong&gt;WP Coder&lt;/strong&gt; plugin, available at &lt;a href="https://wordpress.org/plugins/wp-coder/"&gt;wordpress.org/plugins/wp-coder/&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is the WP Coder Plugin?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Installing WP Coder
&lt;/h2&gt;

&lt;p&gt;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'.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Create a New Snippet
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--skLukLRu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pjimge5ud7u72r08imc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--skLukLRu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pjimge5ud7u72r08imc.jpg" alt="WP Coder Admin Dashboard" width="800" height="597"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To source web element code, I often use codepen.io. For example, to create a floating button, I use &lt;a href="https://codepen.io/dmtlo/pen/eYYWGER"&gt;this CodePen example&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;For functionalities like displaying certain buttons only to logged-in users, I utilize the &lt;strong&gt;PHP block&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if(is_user_logged_in()) {
    $buttons = '
    &amp;lt;li&amp;gt;&amp;lt;a href="/dashboard" tooltip="Dashboard"&amp;gt;&amp;lt;i class="fa-solid fa-gauge"&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
     &amp;lt;li&amp;gt;&amp;lt;a href="/settings" tooltip="Settings"&amp;gt;&amp;lt;i class="fa-solid fa-gears"&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;&amp;lt;a href="/account" tooltip="Account"&amp;gt;&amp;lt;i class="fa-solid fa-user"&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
      &amp;lt;li&amp;gt;&amp;lt;a href="/logout" tooltip="Log Out"&amp;gt;&amp;lt;i class="fa-solid fa-right-from-bracket"&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;';

} else {
    $buttons = '
    &amp;lt;li&amp;gt;&amp;lt;a href="/login" tooltip="Login"&amp;gt;&amp;lt;i class="fa-solid fa-right-to-bracket"&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
      &amp;lt;li&amp;gt;&amp;lt;a href="/portfolio" tooltip="Portfolio"&amp;gt;&amp;lt;i class="fa-solid fa-briefcase"&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
      &amp;lt;li&amp;gt;&amp;lt;a href="/gallery" tooltip="Gallery"&amp;gt;&amp;lt;i class="fa-solid fa-images"&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;';
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally, place the modified code into the HTML block.&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 3: Inserting Your Code
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YFIBnELH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf8f2lud9jewm21bdawi.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YFIBnELH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf8f2lud9jewm21bdawi.jpg" alt="WP Coder Front-End result Floating Buttons" width="745" height="632"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A significant feature of this plugin is the Test mode, where the snippet is displayed only to the site administrator, not to other users.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion:
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;P.S.&lt;/strong&gt; In future articles, I plan to describe various snippets that can be created using the WP Coder plugin.&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>css</category>
      <category>html</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
