DEV Community: SeanAUS120

Creating Custom REST API Endpoints in WordPress

SeanAUS120 — Mon, 09 Sep 2024 10:08:16 +0000

Creating Custom REST API Endpoints in WordPress

WordPress comes with a powerful REST API that allows you to interact with your site programmatically. However, sometimes you might need to extend this functionality by creating custom API endpoints tailored to your needs.

In this post, I’ll walk you through how to create a custom REST API endpoint in WordPress using PHP. I was recently mucking around with this on World First Aid Day as I needed to get some remote content added from a non-Wordpress source.

Check this out:

Step 1: Register the Custom Endpoint

To add a custom REST API endpoint, you need to hook into the rest_api_init action and use the register_rest_route function. Here’s how:

function register_custom_api_endpoint() {
    register_rest_route('custom/v1', '/data/', array(
        'methods' => 'GET',
        'callback' => 'custom_api_endpoint_callback',
    ));
}
add_action('rest_api_init', 'register_custom_api_endpoint');

This code registers a new route (/wp-json/custom/v1/data/) which will respond to GET requests.

Step 2: Create the Callback Function

The callback function handles what data should be returned when the endpoint is hit. Here’s an example that returns a simple JSON object:

function custom_api_endpoint_callback() {
    $response = array(
        'status' => 'success',
        'message' => 'Custom API data retrieved!',
    );

    return rest_ensure_response($response);
}

In this case, the API returns a success status and a custom message. You can expand this function to pull data from the WordPress database or any other source.

Step 3: Test the Custom Endpoint

Now that you’ve registered the endpoint and created a callback, you can test your new custom API by visiting:

https://yourwebsite.com/wp-json/custom/v1/data/

You should see a JSON response similar to this:

{
    "status": "success",
    "message": "Custom API data retrieved!"
}

Step 4: Adding Parameters to the Endpoint

To make your API more dynamic, you can accept parameters from the URL. Let’s modify the endpoint to handle query parameters like this:

function custom_api_endpoint_callback( $data ) {
    $name = ( isset( $data['name'] ) ) ? $data['name'] : 'Guest';

    $response = array(
        'status' => 'success',
        'message' => 'Hello, ' . $name . '!',
    );

    return rest_ensure_response( $response );
}

Now you can visit the endpoint like this:

https://yourwebsite.com/wp-json/custom/v1/data/?name=John

The response will be:

{

    "status": "success",

    "message": "Hello, John!"

}

Conclusion

By creating custom REST API endpoints in WordPress, you can easily extend your site’s functionality and create custom solutions that interact with external systems. It’s a powerful feature for developers looking to build flexible integrations.

For a demo of this, check out World First Aid Day, a global initiative aimed at raising awareness on life-saving skills.

In use at:

Using built-in Subscript & Superscript in Wordpress

SeanAUS120 — Tue, 16 Jan 2024 18:07:18 +0000

Are you aware that WordPress seamlessly accommodates subscript and superscript characters? This gem of a feature is somewhat of a hidden treasure, subtly nestled within the Editing Help section of the WordPress codex. Despite the WordPress editor not flaunting dedicated buttons for subscript and superscript, you have the freedom to incorporate these elements effortlessly using the sub or sup tags. For instance, if you want to showcase H2O with proper scientific notation, here's how you do it:

Using the Block Editor (Gutenberg):

Select the text you want to format.
Click on the "More rich text controls" toolbar button (it looks like a down arrow).
Choose either "Subscript" or "Superscript" from the dropdown menu.

Using the Classic Editor:

Select the text you want to format.
Use the subscript (< sub >) or superscript (< sup >) buttons in the toolbar. If these buttons are not visible, you might need to click the "Toolbar Toggle" button to see more formatting options.

Using HTML:

You can also apply these formats manually by editing the HTML of your post or page.
Wrap the text you want to format in (< sub >) tags for subscript and (< sup >) tags for superscript.

Keep in mind that the availability of these features may depend on your WordPress theme and the plugins you have installed. Some themes or page builders might offer additional options for subscript and superscript formatting. Certainly! If you're looking to include subscript and superscript text in your WordPress content directly through HTML, here's a simple code snippet you can use. This snippet demonstrates how to wrap your text with "sub" and "sup" tags, which you can insert into the HTML editor of your WordPress post or page.

This is a regular sentence with a subscript element.

And here's another one with a superscript touch.

How to add it to the Visual Editor

In the vast array of TinyMCE buttons, many are not activated by default to avoid overloading the WordPress editor with seldom-used options. However, if you frequently find yourself needing to insert characters that sit above or below the standard line of text, it might be worth considering the addition of the Subscript and Superscript buttons for easier access in the visual editor.

The WordPress codex provides guidance on enabling these hidden MCE buttons, showcasing how to customize the button list through filtering. You can effortlessly create a functionality plugin using the PHP snippet below:

/\*\*
 \* Add Subscript and Superscript buttons to the TinyMCE editor in WordPress.
 \*
 \* @param array $buttons Existing buttons on the second row of the editor.
 \* @return array Updated button array including subscript and superscript.
 \*/
function my\_mce\_buttons\_2($buttons) {
    // Add subscript button
    $buttons\[\] = 'sub';

    // Add superscript button
    $buttons\[\] = 'sup';

    return $buttons;
}

// Hook into the second row of the TinyMCE editor to add buttons
add\_filter('mce\_buttons\_2', 'my\_mce\_buttons\_2');

Applying a filter to mce\_buttons\_2 will position the buttons on the second row of the visual editor. If you prefer them on a third row, use mce\_buttons\_3 instead.

For more complex technical writing that extends beyond basic subscript and superscript usage, additional tools may be necessary. For instance, the open-source LaTeX typesetting system is ideal for posting intricate scientific and mathematical equations. WordPress's Jetpack offers a LaTeX module, and you can also find a variety of LaTeX plugins in the WordPress Plugin Directory.

This post was shared at:

https://brisbaneagency.com/wordpress-subscript/ https://viewportsizer.com/wordpress-subscript/ https://brisbaneagency.hashnode.dev/how-to-add-subscript-and-superscript-texts-in-wordpress https://brisbaneagency.substack.com/p/how-to-add-subscript-and-superscript https://brisbane.a2hosted.com/wordpress-subscript/ https://dev.to/seanaus120/using-built-in-subscript-superscript-in-wordpress-21of https://medium.com/@brisbanedigital/how-to-add-subscript-and-superscript-texts-in-wordpress-40c4f1889679

Removing auto-complete in Gravity Forms without a plugin

SeanAUS120 — Mon, 12 Jun 2023 21:25:57 +0000

We are working on a site for the career coaches at A Path That Fits. They have a number of office locations around the USA including Berkeley, Los Angeles, Brooklyn & San Francisco. To handle the different pages and locations with different coaches at each place we use Gravity Forms to manage signups on the site.

GF is a great plugin but we recently noticed it has issues with autocomplete on some browsers, so we wanted to disable it completely to make it easier for users.

The way autocomplete works in different browsers varies. While the general operation of autocomplete is governed by HTML5 standards, there is considerable opportunity for interpretation. Although the user experience is largely the same across all browser makers' slightly varying solutions for activating autocomplete, the technical variations make it impossible to find a universally applicable method of turning off autocomplete.

According to GF docs, the autocomplete attribute can be added to any input, select, or textarea to modify the autocomplete behavior of those fields, according to the specification. Additionally, it says that using the off value should turn off autocomplete for that field. Many browsers support this, but not all of them.

Due to the various ways that browsers behave, our snippet quickly checks the User Agent to find out which browser is loading the form. The suitable autocomplete value is subsequently assigned for that specific browser. In all desktop and mobile browsers we tested, autocomplete was disabled.

Here is our working snippet:

add_filter( 'gform_form_tag', 'gform_form_tag_autocomplete', 11, 2 );
function gform_form_tag_autocomplete( $form_tag, $form ) {
    if ( is_admin() ) return $form_tag;
    if ( GFFormsModel::is_html5_enabled() ) {
        $form_tag = str_replace( '>', ' autocomplete="off">', $form_tag );
    }
    return $form_tag;
}
add_filter( 'gform_field_content', 'gform_form_input_autocomplete', 11, 5 ); 
function gform_form_input_autocomplete( $input, $field, $value, $lead_id, $form_id ) {
    if ( is_admin() ) return $input;
    if ( GFFormsModel::is_html5_enabled() ) {
        $input = preg_replace( '/<(input|textarea)/', '<${1} autocomplete="off" ', $input ); 
    }
    return $input;
}

Get more insights at:
Brisbane Agency

Adding Featured Images to your Wordpress admin columns

SeanAUS120 — Tue, 07 Feb 2023 11:32:53 +0000

A little Wordpress snippet to show the thumbnails in the Wordpress Admin columns. I feel like Wordpress probably could really allow us an interface to customise the heck out of the admin columns as they don't always show the data you want for more complex sites.
We are using this on UCG and Sales Tax USA to track which posts have good CTR on their featured images.

Just add it to your Functions.php and it will appear in your admin.

add_filter('manage_posts_columns', 'posts_columns', 1);
add_action('manage_posts_custom_column', 'posts_custom_columns', 1, 2);
function posts_columns($defaults){
    $defaults['seanaus120_post_thumbs'] = __('Thumbs');
    return $defaults;
}
function posts_custom_columns($column_name, $id){
    if($column_name === 'seanaus120_post_thumbs'){
        echo the_post_thumbnail( 'thumbnail' );
    }
}

Currently in use at:
NYC Posters
Gorilla Printing
Gorilla Printing
Wine N Liquor
Wheatpaste Posters
Wild Posters
UCG
ReWorder
PLA
SignsCity
WildPosters
SalesTaxUSA
WineVybe
Sales Tax API

Display the 'next 5' posts in a shortcode with Wordpress

SeanAUS120 — Tue, 07 Feb 2023 11:27:25 +0000

I like how magazines often show a little section with the next few (or related) posts halfway down the article and wanted to build this for myself to add to some Wordpress sites like Sales Tax USA.

Here's a little snippet you can add to Functions.php to achieve it. Just use [next_five_posts] as a shortcode where you want it to appear:

function next_five_posts_shortcode() {
    global $post;
    $current_post = $post->ID;
    $args = array(
        'posts_per_page' => 5,
        'post__not_in' => array($current_post),
        'offset' => 1
    );
    $next_five_posts = new WP_Query($args);
    if($next_five_posts->have_posts()) {
        $output = '<ul class="extraposts">';
        while($next_five_posts->have_posts()) {
            $next_five_posts->the_post();
            $output .= '<li><a href="'.get_the_permalink().'">'.get_the_title().'</a></li>';
        }
        $output .= '</ul><';
    } else {

    }
    wp_reset_postdata();
    return $output;
}
add_shortcode('next_five_posts', 'next_five_posts_shortcode');

Currently in use at:
Wild Posting
Gorilla Printing
Wine N Liquor
UCG
ReWorder
PLA
SignsCity
PluginRush
SalesTaxUSA
WineVybe
Sales Tax API

Changing the author slug in Wordpress

SeanAUS120 — Mon, 22 Aug 2022 06:59:26 +0000

Often for corporate sites we want to change (or basically hide) the author pages since we don't use them for SEO and we don't necessarily want users to even view them. A lot of times there might be just one person writing the blog articles so it doesn't make sense to search by author. Redirecting using a 301 is pretty self-explanatory, but he's a little snippet we can use to re-write the author-slug (URL) to make it a bit less "bloggy".

add_action('init', 'seanaus120_author_base');
function seanaus120_author_base() {
    global $wp_rewrite;
    $author_slug = 'profile'; // change slug name
    $wp_rewrite->author_base = $author_slug;
}

Currently in use at:
Wild Posting
Gorilla Printing
Wine N Liquor
Wheatpaste Posters
Wheatpaste Posters
Poster Printing
Poster Printing NYC
OOH Marketing
Million Dollar Club
Gift Ideas
Telecommunications
Dark Fibre
Hybrid Fibre-Coaxial
Window Advertising
Window Graphics
Window Wraps
Window Stickers

Move out of stock items to the end of the loop in WooCommerce

SeanAUS120 — Tue, 05 Jul 2022 16:36:00 +0000

Lot's of times your out of stock items are still bringing in SEO traffic so you want to keep them in your shop. If you have a large store, and products go in and out of stock all the time, it can be a UX nightmare for customers to constantly get shown out-of-stock products in their searches.

The fix is to move the out-of-stock products to the end of the loop, with this custom snippet in your functions.php. We're using this exlusively on Wine N Liquor which has over 15,000 products on the store and hourly stock updates.

add_filter( 'woocommerce_get_catalog_ordering_args', 'seanaus120_first_sort_by_stock_amount', 9999 );

function seanaus120_first_sort_by_stock_amount( $args ) {
   $args['orderby'] = 'meta_value';
   $args['order'] = 'ASC';
   $args['meta_key'] = '_stock_status';
   return $args;
}

Currently in use at:
Wild Posting
Gorilla Printing
Wine N Liquor
Wheatpaste Posters
Wheatpaste Posters
Poster Printing
Poster Printing NYC
OOH Marketing
Million Dollar Club
Gift Ideas
Dark Fibre
Hybrid Fibre-Coaxial
Window Advertising
Window Graphics
Window Wraps
Window Stickers

Creating custom login page styling for Wordpress

SeanAUS120 — Fri, 20 May 2022 12:02:33 +0000

We recently launched a new website for Australian telecommunications infrastructure provider UCG (and New Zealand). We wanted a simple way to make a nice looking login page for their staff to enter the website which we can do with a little bit of custom CSS and a hook in the Wordpress functions.php file.

Add this to your theme's functions.php file:

function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/custom-login-styles.css" />';
}
add_action('login_head', 'my_custom_login');

`function my_login_logo_url() {
return get_bloginfo( 'url' );
}

// changing the logo link from wordpress.org to your site
function mb_login_url() {  return home_url(); }
add_filter( 'login_headerurl', 'mb_login_url' );


function my_login_logo_url_title() {
return 'Your Page Title';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

function login_error_override()
{
    return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );

OK, so now we have a link to a custom CSS file where we can style up the login page. That file is /custom-login-styles.css so make a blank file with this name and add it to your child theme.

Now we can style it. Here's what we're running for UCG.

body.login {
  background: #252525 url(/logo.svg) no-repeat center center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.login h1 a {
  padding: 20px!important;
  background-size: 60% autoimportant;
  height: auto!important;
  width: auto!important;
}

.login #nav, .login #backtoblog a, .login #nav a { color: #999; }
.login #backtoblog a:hover, .login #nav a:hover { color: #fff!important; }

Now we have a custom branded login page for Wordpress without any plugins.

We are using it on:
Print Miami
Monster Tees
Sales Tax USA
Dark Fibre
HFC
FTTB
SFP

How to change the author permalink in Wordpress

SeanAUS120 — Fri, 11 Feb 2022 13:14:39 +0000

Here's a handy snippet to change the default author permalink that Wordpress spits out. I use this quite often so the author URLs don't become email addresses etc.

add_action('init', 'cng_author_base');
function cng_author_base() {
    global $wp_rewrite;
    $author_slug = 'profile'; // change slug name
    $wp_rewrite->author_base = $author_slug;
}

Currently in use at:
Wheatpaste Poster Printing
Same Day Poster Printing
Large Poster Printing
Large Poster Printing
Poster Printing NYC
Poster Printing NYC
OOH Marketing
11x17 Poster
12x18 Poster
12x28 Poster
12x36 Poster
18x24 Poster
20x16 Poster
22x28 Poster
24x36 Poster
25x39 Poster
48x72 Poster

Using CSS 'first-letter' for cool drop cap styling.

SeanAUS120 — Wed, 05 Jan 2022 07:08:55 +0000

It's as old as print itself but I think the dropcap is still a cool thing to make a blog post layout more interesting.

To make it work you need to target some psuedo classes with CSS. Specifically the first-child and first-letter ones, together. Here's a sample I'm using here.

p:first-child:first-letter {
   float:left;
   font-family:Georgia;
   font-size:80px;
   line-height:0.8;
   padding:2px 8px 0 0;
}

Using this snippet at:
UCG
Print Miami
Wild Posters
Monster Tees

Improve the WooCommerce default import tool with this snippet.

SeanAUS120 — Mon, 06 Sep 2021 08:50:27 +0000

Here's a quick snippet to turbo charge the WooCommerce default import tool. It's set to 50 rows per import maximum, but this snippet will juice that number up to 5000. It shouldn't really max out your server unless you are trying to import photos from another website that is slow.

// Increase the default batch limit of 50 in the CSV product exporter to a more usable 5000
add_filter( 'woocommerce_product_export_batch_limit', function () {
    return 5000;
}, 999 );

Currently in use at
Wild Posters
Monster Tees
Luxury Printing
Windsurfing Fitness
White Elephant Gift Ideas
Broadway Liquor
Rush Flyer Printing

Remove a ton of WooCommerce bloat with some simple filters.

SeanAUS120 — Mon, 06 Sep 2021 08:45:06 +0000

Every time WooCommerce releases an update they seem to add more and more bloat to it. It's still the best ecommerce system around though, but we need to add a few snippets to keep it running fast. I'm currently selling a WooCommerce Tax Rates CSV file and I wanted this site to be blazing fast.

/****DISABLE WC FILTERS****/
add_filter( 'woocommerce_background_image_regeneration', '__return_false' );
add_filter( 'woocommerce_helper_suppress_admin_notices', '__return_true' );
add_filter( 'woocommerce_allow_marketplace_suggestions', '__return_false' );
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
add_filter( 'woocommerce_menu_order_count', 'false' );
add_filter( 'woocommerce_enable_nocache_headers', '__return_false' );
add_filter( 'woocommerce_admin_disabled', '__return_true' );
add_filter( 'woocommerce_include_processing_order_count_in_menu', '__return_false' );

What these are doing are pretty self-explanatory by the name of the filter. Do you think you really want to be loading "marketplace suggestions" and the WooCommerce admin (which is just a fancier way of showing you more marketplace suggestions and ads) on every admin page load? Bleh... of course not.

Currently in use at:
Windsurfing Fitness
White Elephant Gifts
1800 Printing
Printing Brooklyn
Printing New York
Rush Flyer Printing
Luxury Printing
Wild Posters
Monster Tees