Category: Wordpress

So after Creating an AI generated blurb on pageload in WordPress, I had a lovely new blub each time I loaded the page, but this caused the page to load very slowly, as the blub was being generated before the page was shown.

For this we needed JQuery and AJAX. The first step was to write the function that would call the shortcode (in the function.php file):

function handle_delayed_shortcode() {
     echo do_shortcode('[bio]');
     wp_die(); 
}

Next, I registered AJAX actcions for both logged-in and anon users:

add_action('wp_ajax_load_bio', 'handle_delayed_shortcode');
add_action('wp_ajax_nopriv_load_bio', 'handle_delayed_shortcode');

Finally, I replaced the shortcode on my site with the following custom HTML. Basically it waits for the page to finish loading, then calls the shortcode and writes the result to the elayed-shortcode-container div.

<div id="delayed-shortcode-container">Loading...</div>
<script>
jQuery(document).ready(function($) {

    $.ajax({
        url: 'https://el3ktra.net/wp-admin/admin-ajax.php', 
        type: 'POST',
        data: {
            action: 'load_bio'
        },
        success: function(response) {
            $('#delayed-shortcode-container').html(response);
        }
    });
});
</script>

Gotchas

Now one of the first things that I ran into, using the TwentyTwentyFive theme, is that JQuery is not loaded, so I had to add this to the end of my functions.php file:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('jquery');
});

This allowed JQuery to load on my page.

I determined that JQuery wasn’t running by adding an alert to the JQuery code.

So I have never been much of a writer, so when it came time to write my bio for the website I simply fed my resume into El3ktra (my local Ollama server) and asked her to write it for me. Then I thought, wouldn’t it be fun if the website generated a new bio each page load?

The first step was to make a text-only version of my resume for my AI to consume while building my bio, which I stored in the root of my directory.

The next step was adding php code that would talk to my Ollama server and generate a bio as a shortcode function. This can be done by editting the functions.php, found in /var/www/html/wp-content/themes/<your-theme>/

function get_bio() {
    // get the resume text
    $url = "cv.html";
    $resume_txt= file_get_contents($url);

    if ($resume_txt!== false) {

            $data = [
                "model" => "llama3.1:8b",
                "prompt" => "Use Kim's Resume to write a short professional bio in the third person for Kim, less then 200 words, to put on her website.  Here is Kim's resume: " . $resume_txt]
                "stream" => false
            ];

            $ch = curl_init("http://localhost:11434/api/generate");
            curl_setopt($ch, CURLOPT_POST, true);
            curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);

            $response = curl_exec($ch);
            curl_close($ch);
            $r = json_decode($response)->response;
            if (str_contains($r, ':')) {
                    return substr(strstr($r, ':'), 2);
            } else {
                    return $r;
            }

    } else {
        return "Failed to retrieve the resume.";
    }
}
add_shortcode('bio', 'get_bio');

After that, it was a matter of adding shortcode bio and viola, lovely bios generated every load.

Gotchas

The issue that I ran into was that I couldn’t get my AI to not add an introduction for the bio, ie “Here is a bio for Kim: Kim is a programmer etc..." no matter how much I begged her not to in the prompt.

The following code fixes that in a dirty way by checking to see if there is a colon in the answer, and returning everything after that colon. Yes, dirty but effective.

if (str_contains($r, ':')) {
                    return substr(strstr($r, ':'), 2);
            } else {
                    return $r;
            }

Works, but too slow!

I was excited to see generated bios, but these took several seconds to generate the text and meanwhile my page was just sitting there. My next step was to load the shortcode after the page was done loading. On to loading the shortcode after the page!