Tired of users losing their way on long WordPress pages? A sleek “Back to Top” button can enhance user experience, reduce bounce rates, and keep visitors engaged. With Simple Custom Code – CSS, JS, and HTML, you can add this feature effortlessly – even if you have zero coding knowledge! Thanks to its built-in AI-powered ChatGPT integration, this WordPress plugin generates custom code snippets based on simple descriptions, making it perfect for beginners, bloggers, and small business owners alike.
No need to hire a developer or edit theme files. The free version, available at simplecustomcode.com/download-free, offers unlimited CSS, JavaScript, and HTML snippets with performance-optimized, file-based storage. It’s secure, beginner-friendly, and loads only active snippets for a lightning-fast site. Let’s dive into creating a trendy, round “Back to Top” button using the plugin’s AI magic.
Why Simple Custom Code Plugin is Perfect for Non-Coders on WordPress
In the realm of WordPress customization, Simple Custom Code – CSS, JS, and HTML shines by empowering users without coding expertise. Unlike traditional methods that rely on database-heavy solutions or risky theme edits, this plugin stores snippets in efficient files, ensuring speed and security. Features like one-click activation, flexible placement (head, footer, or specific pages), and real-time error detection make it accessible to all.
The game-changer? Its AI-powered code generation. Describe your idea in plain English – like “a circular button that appears on scroll” – and the ChatGPT integration crafts the code for you. With your own OpenAI API token (easy to set up), you can generate custom CSS for stunning designs, JavaScript for interactivity, or HTML for structure, all while adhering to WordPress best practices. Trusted by thousands, it’s your gateway to professional customizations – start free today!
Get the free version now and unleash your creativity.
Step-by-Step: Creating Your AI-Generated Back-to-Top Button
1. Install the Plugin
Go to your WordPress dashboard > Plugins > Add New, or download directly from simplecustomcode.com/download-free. Upload and activate it – no complex setup required.
2. Activate OpenAI Integration
Use the power of OpenAI to improve your productivity. Enter your API key, select an AI model, and start generating code using the power of AI.
- Create an account on the OpenAI website.
- Make a payment of at least $5 on the OpenAI platform.
- Generate an OpenAI API key.
- Paste it below and Save changes.
3. Access the AI Code Generator
Navigate to Simple Custom Code > Add HTML Code (as seen in the interface). Select the desired snippet type (e.g., CSS, JS, or HTML), then press Generate with AI button and input this refined prompt:
“Create a ‘Back to Top’ button for a website. The button should be circular, 40px in diameter, and appear smoothly when the user scrolls down at least 15% of the page height. It should have a teal background (color code: #2DD4BF), transitioning to deep indigo (#4B0082) on hover with a smooth animation. Ensure the button is fixed to the bottom-right corner of the screen, with a 20px margin from the edges. Include an upward arrow icon inside the button for clarity. The button should be accessible, with appropriate ARIA attributes and keyboard support. Provide the HTML, CSS, and JavaScript code to be included in the <body> of the website, ensuring smooth scrolling behavior when clicked.”
4. Generate and Customize
Click “Generate” (as shown in the screenshot). The plugin will produce ready-to-use code. Use the editor’s syntax highlighting and autocomplete to tweak if needed. Set the Code Position to be End of the page, Loading Locations (e.g., Frontend), and Priority (e.g., 10) via the right-hand settings panel.
5. Activate and Test
Toggle the snippet to “Active” and publish. Preview your site – the button will appear after scrolling halfway, guiding users back up with style. Check the interface’s “Details” section to confirm settings like “Frontend (Site)” and “Automatically.”
This setup improves UX and boosts SEO by enhancing site usability – all without coding skills!
6. Final generated code that you can copy/paste into a new HTML code
<!-- Back to Top Button -->
<button id="back-to-top" class="back-to-top" aria-label="Back to top">
<!-- Upward arrow icon -->
<span aria-hidden="true">↑</span>
</button>
<!-- Back to Top Button Styles -->
<style>
/* Smooth scroll behavior for the page */
html {
scroll-behavior: smooth;
}
/* Back to Top button styling */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #2DD4BF; /* Teal color */
color: #fff;
border: none;
cursor: pointer;
font-size: 1.5rem;
display: none; /* Hidden by default */
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, opacity 0.3s ease;
opacity: 0;
z-index: 1000;
}
/* Visible state (smooth fade-in) */
.back-to-top.show {
display: flex;
opacity: 1;
}
/* Hover and focus styles for accessibility */
.back-to-top:hover,
.back-to-top:focus {
background-color: #4B0082; /* Deep indigo */
outline: none;
}
/* Focus ring for keyboard users */
.back-to-top:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
/* Responsive positioning */
@media (max-width: 600px) {
.back-to-top {
bottom: 15px;
right: 15px;
}
}
</style>
<!-- Back to Top Button Script -->
<script>
// Get the button element
const backToTopButton = document.getElementById('back-to-top');
// Show or hide the button when scrolling
window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
const halfPage = document.documentElement.scrollHeight / 2;
if (scrollPosition > halfPage) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});
// Smooth scroll to top when clicked
backToTopButton.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Allow keyboard activation (Enter or Space)
backToTopButton.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
});
</script>
Level Up with Simple Custom Code Pro: Unlock Advanced Features
The free version empowers beginners with AI-generated snippets and unlimited additions, but Simple Custom Code Pro elevates your WordPress site with pro-level tools. Enjoy automatic code minification, SCSS/Less compilation, cache modes for fewer HTTP requests, and conditional loading for specific URLs – all designed to optimize performance.