Create a Random Article Button for your WordPress Website

Published by Saurabh Singh on

Post Views: 493

I have a website “https://talesofss.com/”, hereafter referred to as “my website”.

I want to create a random word generator, so that when a user comes to my website they can click on the button to create a random word, and then that random word would be searched in the website. This would lead to the relevant blogs being shown in the search. For this, the random word generator would have to be a keyword from my website.

How should I go about it?

  1. Create a Python program – Stupid method
  2. Create a WordPress plugin – An even more stupid method
  3. Edit the WordPress theme – Something that works with the least effort

1. Generate Random Article using Python - Web Scraping, NLP

Create a Python program for web scrapping, NLP, store the keyword and random word generator

You can access the Python code for web scraping and using NLP to generate random keywords here

Note: Jio has blocked GitHub raw links. So the nltk.download('stopwords') and nltk.download('punkt') commands used to download the datasets/tokenizers may not work.

stopwords: This dataset provides a list of common words (like “and”, “the”, “is”, etc.) for various languages. In the program, we use the English stopwords to filter out these common words from the extracted keywords.

punkt: This is a pre-trained tokenizer model for English. It’s used by the word_tokenize function to split the text into individual words (tokens)

The file size for the punkt tokenizer is approximately 13 MB and for the stopwords dataset it often less than 1 MB.

So instead of changing DNS, using VPN or proxy, simply download it from your mobile data.

1. Python Web Crawler - Web Scrapping and NLP

To scrape the entire website, you’ll need to implement a web crawler that starts from the homepage and then follows links to other pages within the same domain.

Here’s a step-by-step approach to achieve this:

  1. Start with the homepage: Fetch the content of the homepage.
  2. Extract all internal links: Identify all links that lead to other pages within the same domain.
  3. Visit each link: For each extracted link, fetch the content of that page.
  4. Repeat the process: Continue the process for each new page, ensuring not to revisit already scraped pages.

But the the program was scrapping the whole website and not just the titles of the posts, you’ll need to modify the web scraping function to specifically target the HTML tags that contain the titles.

Typically, titles of pages or posts are contained within <h1>, <h2>, <h3>, etc., tags, or sometimes within <title> tags

  • Remember to exclude URLs containing /tag/ by adding a condition in the scrape_website_titles function
  • Use the urlparse function from the urllib.parse module to extract the domain of the current URL. If the domain contains “talesofss.com”, the function will proceed to extract the titles from the <h1>, <h2>, and <h3> tags. Otherwise, it will skip the title extraction for that URL.

This ensures that titles are only extracted from URLs that belong to your website.

Also, you would want to start with a fresh database each time you run the program, otherwise, every time you run the program, the keywords extracted from the titles are added to the SQLite database. The database itself is not recreated from scratch, so the keywords from previous runs will still be present in the database.

  • To ensure a completely fresh start every time you run the program, you can drop the table and recreate it at the beginning of each run.
  • By using the set data structure, you ensure that only unique keywords and titles are passed to the database functions.
  • And by using the INSERT OR IGNORE command in SQLite along with the UNIQUE constraint, you ensure that the database will ignore any duplicates that might still be attempted to be inserted. This combination ensures that no duplicates are stored in the database.
  • Finally, create a function get_random_title() that fetches a random title from the titles table in the SQLite database

2. Integrate Python Program with Website

After creating this Python program, the question of the hour is how do I integrate this with my website? I want to open the home page and create a button where the user will click on “random article” Once the user clicks on random article, the code runs and it selects 1 random title. Then the title is searched on the website.

Since the website is built on WordPress, here’s a step-by-step guide to implement this:

Integrating custom Python scripts into a WordPress website is a bit more involved than with frameworks like Flask or Django. WordPress is primarily PHP-based, so you’ll need to find a way to execute your Python script from within PHP. Here’s a step-by-step guide to help you:

  1. Host Your Python Script on a Server:

    • One of the cleanest ways to do this is by setting up a Flask or Django microservice that runs your Python script. This service can be hosted on the same server as your WordPress site or a different one.
    • This microservice will expose an endpoint (e.g., /random-article) that, when hit, will run the Python script and return the random title.

  2. Call the Python Microservice from WordPress:

    • You can use WordPress’s built-in wp_remote_get function to make a GET request to your Python microservice.
    • Once you get the response (i.e., the random title), you can then use it as needed within WordPress.

  3. Integrate with WordPress:

    • Create a custom page template or modify an existing one in your WordPress theme.
    • Add a button labeled “Random Article”.
    • Use JavaScript/jQuery to handle the button click event. When clicked, make an AJAX request to a custom WordPress AJAX action.
    • In your theme’s functions.php file, set up the custom AJAX action to call the Python microservice using wp_remote_get and then search for the article in WordPress using WP_Query or direct SQL queries.

2. Create a WordPress Plugin to Search Random Article

Implementing a “Random Article” feature like Wikipedia’s “Special:Random” for your website “talesofss.com” can be a great way to engage users and introduce them to different content on your site.

1. Create a Custom WordPress Plugin:

Step 1.1: Navigate to your WordPress plugins directory, usually located at wp-content/plugins/.

Step 1.2: Create a new directory for your plugin, e.g., random-article-generator.

Step 1.3: Inside this directory, create a PHP file, e.g., random-article.php.

Step 1.4: Add the following basic plugin information at the top of the file:

2. Implement the Random Article Redirect

Step 2.1: In the same random-article.php file, add the following code:

3. Create a Shortcode to Place the Button Anywhere:

Step 3.1: Still in the random-article.php file, add the following code: This creates a shortcode [random_article_button] that you can place anywhere on your site to display the “Random Article” button.

4. Trigger the Redirect:

Step 4.1: Add the following code to random-article.php: This checks if the random query parameter is set in the URL and triggers the redirect to a random post.

5. Activate the Plugin:

Step 5.1: Log in to your WordPress admin dashboard.

Step 5.2: Navigate to Plugins > Installed Plugins.

Step 5.3: Find “Random Article Generator” in the list and activate it.

6. Add the Button to Your Homepage:

Step 6.1: Edit the page or post where you want the “Random Article” button to appear.

Step 6.2: Add the shortcode [random_article_button] where you want the button.

Step 6.3: Update or publish the page.

Now, when users visit your site and click the “Random Article” button, they’ll be redirected to a random post on your website.

3. Random Article Button - Edit WordPress Theme - PHP, Java, CSS

Creating a simple button that leads to a random article is a straightforward solution and can be implemented without the need for a staging site. Here’s a general approach to achieve this in WordPress:

  1. Random Article Selection Logic:

    • You’ll need a mechanism to randomly select an article from your WordPress posts. This can be achieved with a simple SQL query that fetches a random post.

  2. Button Creation:

    • You can add a button to your homepage (or any other page) using the WordPress editor. This button’s action will be to redirect the user to the randomly selected article.

  3. Implementation:

    • You can use a WordPress shortcode to embed the functionality directly into a post or page. When the shortcode is processed, it will generate the button and handle the redirection logic.

    1. Shortcode for the Random Article Button - PHP

    Creating a shortcode in WordPress is a straightforward process. Here’s a step-by-step guide to creating a shortcode for the random article button:

    1. Access Your WordPress Files:

    You can edit your WordPress files in two ways:

    • Using the WordPress Dashboard: Navigate to Appearance > Theme Editor. This will allow you to edit your theme’s files directly from the dashboard.

    • Using FTP: Connect to your website using an FTP client like FileZilla. Navigate to the wp-content/themes/your-theme-name/ directory.

    2. Edit the functions.php File:

    Once you’ve accessed your theme’s files, you’ll want to edit the functions.php file. This file contains functions and definitions used by your theme.

    3. Add the Shortcode Function:

    Paste the following code at the end of your functions.php file:

    4. Save the File:

    • If you’re using the WordPress dashboard, click the “Update File” button.

    • If you’re using FTP, save the file on your local machine and then upload it to the server, overwriting the existing functions.php file.

    5. Use the Shortcode:

    Now, you can use the Random Article shortcode in any post, page, or widget to display the “Random Article” button. Simply paste the shortcode where you want the button to appear.

    2. Style the "Random Article" Button - CSS

    To style the “Random Article” button, you’ll need to add some CSS to your theme. Here’s how you can do it:

    1. Modify the Shortcode Function: First, let’s add a specific class to the button in your shortcode function so that we can target it with CSS. Modify the return line in your shortcode function to include a class, say random-article-btn:

    2. Add Custom CSS:

      • Go to your WordPress dashboard.
      • Navigate to Appearance > Customize.
      • In the Customizer, look for the Additional CSS section and click on it.
      • Add the following CSS to style the button:

    3. Publish Changes:

      • After adding the CSS, click the “Publish” button in the Customizer to save your changes.

    4. Check Your Site:

      • Visit the post where you added the shortcode and ensure the “Random Article” button is styled as desired.

    3. Execute PHP Code Dynamically - JavaScript

    If the “Random Article” button has a fixed link, it means the PHP code for generating a random post is not being executed each time the button is clicked. Instead, it’s generating a link once and then using that same link every time.

    To ensure that the button fetches a new random article every time it’s clicked, you need to make sure the PHP code is executed dynamically each time the button is rendered.

    Here’s a step-by-step approach to ensure the button works dynamically:

    1. Shortcode Functionality: Ensure that the shortcode function you added to your theme’s functions.php file is correct. The function should query the database for a random post each time it’s called.

    2. Caching: WordPress sites often use caching plugins to speed up their performance. If you have a caching plugin installed, it might be caching the result of the shortcode, causing the same link to appear every time. You might need to clear the cache or configure the plugin to exclude the page with the random article button from being cached.

    3. Theme Customizer: If you added the shortcode directly to a theme file or widget, ensure that it’s being executed dynamically. If you added it to a static text widget or a similar static area, it might not be re-evaluated on each page load.

    4. JavaScript Approach: As an alternative, you can use JavaScript to fetch a random post each time the button is clicked. This would involve making an AJAX request to the server to get a new random post URL each time the button is clicked, then redirecting to that URL.

    4. Dynamic JavaScript Redirection Method

    The Dynamic JavaScript Redirection method involves two main steps:

    1. Setting up a REST API endpoint in WordPress that returns a random post URL.
    2. Modifying the shortcode to include a button that, when clicked, uses JavaScript to fetch the random post URL from the REST API endpoint and then redirects the user to that URL.

    Here’s a step-by-step guide to implement this method:

    1. Setting up a REST API Endpoint:

    Add the following code to your theme’s functions.php file to register a new REST API endpoint:

    This code creates a new REST API endpoint at /wp-json/myplugin/v1/random-post that returns a random post URL.

    2. Modifying the Shortcode:

    Update your random_post_button_shortcode function in the functions.php file to include the button and the JavaScript code:

    This code adds a button that, when clicked, uses JavaScript to fetch the random post URL from the REST API endpoint and then redirects the user to that URL.

    3. Add the Shortcode to Your Page:

    Now, you can add the Random Article shortcode to any post or page where you want the “Random Article” button to appear.

    4. Style the Button (Optional):

    If you’ve previously added CSS styles for the button, they should still apply. If not, you can add the following CSS to your theme’s customizer or a custom CSS plugin to style the button:

    Note: If the REST API endpoint is consistently returning the same URL, it suggests that the issue might be with the server-side code that generates the random post URL. Let’s troubleshoot this:

    Database Caching: Some hosting providers or WordPress plugins implement database caching. This means that the result of a database query (like fetching a random post) might be cached for a certain period. If you have a caching plugin installed, try disabling it temporarily to see if that affects the behavior.

    Random Article

    Note: In case you are looking for a Product Management course, I would highly recommend joining this cohort-based course – ISB Executive Education – Product Management program

    PS: You can connect with me for review or referral discount (link for referral discount)

    Opinions are my own and not the views of my employer (if any)

    When I am not working/watching movies/reading books/traveling, you can reach me via my Twitter/LinkedIn or you can contact me here

    Categories: Product Management

    Related Posts

    telegram revenue model
    Product Management

    Telegram Redefining the Messaging App’s Revenue Model

    Discover the secrets behind Telegram's unique revenue model. Learn how Telegram balances user privacy with sustainable growth through premium features, a creative marketplace, and robust API services, all while steering clear of traditional ads.

    Customer Retention by Complexity,
    Product Management

    Retention by Complexity: How Brands Keep You Hooked

    Explore how brands like Spotify, Adobe, and Apple master customer retention by making it complex to switch platforms, weaving their offerings into the fabric of daily life and work.

    WEBP Converter for Mac
    Product Management

    WEBP Converter for Mac App – Offline – Free Download

    Online WEBP converters can lead to image copyright, content ownership, and data privacy issues are generally paid after the first 5-10 conversions. So I created this WEBP Converter for Mac App for my personal use.