Visual Editor - use variable in link behind button

Question

I am setting up a wordpress page for an artist who also offers Patreon subscriptions for additional content...

Patreon offers a plugin to connect your page using oauth2. It works well but we want to add a custom login button as the way they handle this in terms of UI is kind of horrible.

This button was easy enough to set up in the visual editor and works great! It is essentially just a button with a link behind it: https://example.com/patreon-flow/?patreon-login=yes&patreon-final-redirect=https://example.com

On the end of the link you can set where you will be redirected to after the login... For now we just set it to the start page since that at least works. BUT we would like to use a variable there so the user would get sent back to the page where he clicked it! (It is kind of inconvenient otherwise..)

Is it possible to use a variable there in some way? I have already searched for plugins that could do this in some way. (found nothing which surprised me) And also for other scripted solutions for this but most of them recommend setting a bunch of custom page IDs but i don't know how that would help me as i don't want to manually edit the button for every page... (i just added it like this in the theme)

EDIT: To make the question a tiny bit clearer.. I need the solution to work in the "Site Editor"!

Solution i setteled on based on answer from @WebElaine:

<?php
/**
 * Plugin Name: Patreon Login Button
 * Description: "Fancy" Patreon login button that redirects back to the page where the button was Clicked. Inserted by using shortcode: [Patreon_Login_Button]
 * Version: 1.0.0
 */

// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) {
     exit;
}

// Create a shortcode.
add_shortcode( 'Patreon_Login_Button', 'shortcode_link' );

/**
 * Define what the shortcode does.
 *
 * @return string The output of the shortcode.
 */
function shortcode_link() {
     // Get the current URL.
     global $wp;
     $current_url = home_url( $wp->request );

     // Update this to whatever HTML output you want to display.
     // This example is a link tag with a CSS "button" class, but
     // you can make it anything you need.
     return '<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-background wp-element-button" href="' . esc_url( $WP_HOME ) . '/patreon-flow/?patreon-login=yes&amp;patreon-final-redirect=' . esc_url( $current_url ) . '" style="background-color:#f96854">Log in with patreon</a></div>';
}

WebElaine · Accepted Answer · 2025-04-09 13:01:01Z

Not directly. Anything in the Editor is interpreted literally - you don't use variables there.

It sounds like you're using the Classic Editor - not blocks. If that's the case, you could create a simple plugin that sets up a shortcode. That way, you can put the shortcode in the Editor, and it will run code that can then grab the current URL and put it in the link.

Create a folder inside /wp-content/plugins/ - i.e. /wp-content/plugins/shortcode-link/
Create a file in the new folder - i.e. /wp-content/plugins/shortcode-link/shortcode-link.php
The new file will define the plugin and then the shortcode:

<?php
/**
 * Plugin Name: Shortcode Link
 * Version: 1.0.0
 */

// Exit if accessed directly.
if ( !defined( 'ABSPATH' ) ) {
     exit;
}

// Create a shortcode.
add_shortcode( 'shortcode_link', 'shortcode_link' );

/**
 * Define what the shortcode does.
 *
 * @return string The output of the shortcode.
 */
function shortcode_link() {
     // Get the current URL.
     global $wp;
     $current_url = home_url( $wp->request );

     // Update this to whatever HTML output you want to display.
     // This example is a link tag with a CSS "button" class, but
     // you can make it anything you need.
     return '<a class="button" href="https://example.com/patreon-flow/?patreon-login=yes&patreon-final-redirect=' . esc_url( $current_url ) . '">Support us on Patreon</a>';
}

(Now activate the plugin, and you can paste [shortcode_link] in the Editor and it'll automatically output the code you set up. If you ever change that code it'll auto-update across every page you've already added it.)

If you're using blocks instead, you can use shortcodes, but it's even better to create a custom block that does the same thing. You'd probably want a ServerSideRender which would make it easy to grab the current URL in PHP, just like you would do with the shortcode, except then it'd appear in a block instead of just the shortcode which doesn't display its final output in the Editor.

thanks for the reply! If i understand the code above correctly (i most likely don't..) it will essentially replace every mention of "[shortcode_link]" with what i set in the last return? Could i then not set this return to: return $current_url to have it replace this text? I am not using the classic editor btw... — Daniel_MFG
– Daniel_MFG, Commented Apr 9 at 13:52
i had to tinker a bit in my editor but i kinda got it to work... The thing is that wordpress sadly doesn't support shortcode in the navbar. So i had to add a second bar below the nav-bar that i hide to logged in users. Not the absolute prettiest solution but it works... What i DO have to say tho is that this plugin does work beautifully once i got it working! I might make a second version for the logout button as well but i am not sure yet if there is going to be any need for it... My final code for this (added a small bit to get the base website url as well): (next comment) — Daniel_MFG
– Daniel_MFG, Commented Apr 9 at 18:04

Stack Exchange Network

Visual Editor - use variable in link behind button

1 Answer 1

Your Answer

Hot Network Questions

Visual Editor - use variable in link behind button

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions