Wordpress Programming tips and tricks from a Wordpress Development company in London

Dec 11

Create a WordPress plugin that uses a React App

By louie171 | Javascript, React, Wordpress | 3 Comments

In this post I’ll describe how to create a simple Hello World plugin that gets its content from React.

The WordPress plugin will use a shortcode to generate its content from a React App ( the React App is built / bootstrapped using the Create React App cmd line tool ).

Prerequisite: I will presume you have Node already installed

Create a WP plugin
Create a React App within the plugin (using create React app)
Tweak the React app to make it easy to load in the WordPress plugin ( Shortcode), by disabling code splitting (for the asset files JS and CSS)

Create WP plugin

This will be a very basic plugin one php file, which I’ll pop in a folder in WP plugins dir e.g. [YOUR PATH]/wp-content/plugins/hello_world_react and inside that hello.php.

&lt;?php
/**
 * Plugin Name: Hello World React Plugin
 */

function helloworld_shortcode() {

	return '&lt;div id="hello-world-react" >&lt;/div>';
}

add_shortcode('hello-world-react', 'helloworld_shortcode');

function helloworld_load_assets() {
	
	$react_app_js  = plugin_dir_url( __FILE__ ) . 'helloworldreactapp/build/static/js/all_in_one_file.js';
    $react_app_css = plugin_dir_url( __FILE__ ) . 'helloworldreactapp/build/static/css/all_in_one_file.css';	
      
    // time stops stylesheet/js caching while in development, might want to remove later  
    $version = time();	
    wp_enqueue_script( 'hello-world-react', $react_app_js, array(), $version, true );         
    wp_enqueue_style( 'hello-world-react', $react_app_css, array(), $version );
}

add_action( 'wp_enqueue_scripts', 'helloworld_load_assets' );

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<?php

/**

* Plugin Name: Hello World React Plugin

*/

function helloworld_shortcode() {

return '<div id="hello-world-react" ></div>';

}

add_shortcode('hello-world-react', 'helloworld_shortcode');

function helloworld_load_assets() {

$react_app_js = plugin_dir_url( __FILE__ ) . 'helloworldreactapp/build/static/js/all_in_one_file.js';

$react_app_css = plugin_dir_url( __FILE__ ) . 'helloworldreactapp/build/static/css/all_in_one_file.css';

// time stops stylesheet/js caching while in development, might want to remove later

$version = time();

wp_enqueue_script( 'hello-world-react', $react_app_js, array(), $version, true );

wp_enqueue_style( 'hello-world-react', $react_app_css, array(), $version );

}

add_action( 'wp_enqueue_scripts', 'helloworld_load_assets' );

Create React App

In plugin dir (from cmd line) run:

npx create-react-app helloworldreactapp

1	npx create-react-app helloworldreactapp

e.g. cd to [YOUR PATH]/wp-content/plugins/hello_world_react and run above cmd.

In src/index.js change root to hello-world-react like below:

ReactDOM.render(
  &lt;React.StrictMode>
    &lt;App />
  &lt;/React.StrictMode>,
  document.getElementById('hello-world-react')
);

1

2

3

4

5

6

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('hello-world-react')

);

Tweak React app

We’ll make the app spit out one js file and one css file, so its easy to include in the WP plugin.

The next bit is more or less a copy / paste I found here (thanks Mark!) :

https://mtm.dev/disable-code-splitting-create-react-app

in React app first create folder (called scripts) and add an empty js file called build-non-split.js , then paste in the stuff below:

 const rewire = require('rewire')
const defaults = rewire('react-scripts/scripts/build.js') // If you ejected, use this instead: const defaults = rewire('./build.js')
let config = defaults.__get__('config')

config.optimization.splitChunks = {
cacheGroups: {
default: false
}
}

config.optimization.runtimeChunk = false

// Renames main.00455bcf.js to main.js
config.output.filename = 'static/js/all_in_one_file.js'

// Renames main.b100e6da.css to main.css
config.plugins[5].options.filename = 'static/css/somecss.css'
config.plugins[5].options.moduleFilename = () =&gt; 'static/css/all_in_one_file.css'

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

const rewire = require('rewire')

const defaults = rewire('react-scripts/scripts/build.js') // If you ejected, use this instead: const defaults = rewire('./build.js')

let config = defaults.__get__('config')

config.optimization.splitChunks = {

cacheGroups: {

default: false

}

config.optimization.runtimeChunk = false

// Renames main.00455bcf.js to main.js

config.output.filename = 'static/js/all_in_one_file.js'

// Renames main.b100e6da.css to main.css

config.plugins[5].options.filename = 'static/css/somecss.css'

config.plugins[5].options.moduleFilename = () => 'static/css/all_in_one_file.css'

In the root dir of the react app run:

npm install rewire

in package.json

// Change the line from this:
"build": "react-scripts build",
// To this:
"build": "node ./scripts/build-non-split.js",

1

2

3

4

// Change the line from this:

"build": "react-scripts build",

// To this:

"build": "node ./scripts/build-non-split.js",

delete package-lock.json

run:

npm run-script build

Lets run it !

In wordpress admin plugins, activate the plugin.

Next create a page and add this shortcode:

[hello-world-react]

Next visit the page

And you should see the React App

References

https://mtm.dev/disable-code-splitting-create-react-app

https://mikhailroot.ru/react-app-embedded-into-wordpress-page/

https://dev.to/n1ru4l/configure-the-cra-public-url-post-build-with-node-js-and-express-4n8

https://stackoverflow.com/questions/65126062/use-create-react-app-inside-a-wordpress-plugin

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

Mar 25

0

Hide Buddypress members pages from guests ( also hide BBpress forum posts)

By louie171 | PHP, Website Development, Wordpress | No Comments

The code below is to hide sections of a WordPress website from guests (hide certain pages or groups of pages on a WordPress , so they are only available for logged in users).

In this case we’re hiding all the Buddypress members pages from guests ( so hiding all pages that start with /members such as member profiles and so on). We’re also hiding BBpress forum topics ( but they can still view the forums and forum post / topic names ).

If a guest is trying to view a page (that we’re not allowing them to, they are sent to the homepage).

add_action( 'template_redirect', 'hf_test_if_user_can_view_this_page', 0 );

function hf_test_if_user_can_view_this_page()
{
    $logged_in = is_user_logged_in();

    if($logged_in !== true){    

        if_guest_trying_to_view_private_page_redirect_them();
    }
}



function if_guest_trying_to_view_private_page_redirect_them(){
    
    $urly = $_SERVER['REQUEST_URI'];    

    $trying_to_view_private = false;
    
    if( startsWith($urly, "/members/") || startsWith($urly, "/forums/topic/") ){        
        $trying_to_view_private = true;         
    }
    
    if($trying_to_view_private === true ){
        redirect_to_homey();
    }
    
}

function startsWith($haystack, $needle)
{
     $length = strlen($needle);
     return (substr($haystack, 0, $length) === $needle);
}

function redirect_to_homey() {
    
    wp_redirect(home_url());
    exit();
  
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

add_action( 'template_redirect', 'hf_test_if_user_can_view_this_page', 0 );

function hf_test_if_user_can_view_this_page()

{

$logged_in = is_user_logged_in();

if($logged_in !== true){

if_guest_trying_to_view_private_page_redirect_them();

}

function if_guest_trying_to_view_private_page_redirect_them(){

$urly = $_SERVER['REQUEST_URI'];

$trying_to_view_private = false;

if( startsWith($urly, "/members/") || startsWith($urly, "/forums/topic/") ){

$trying_to_view_private = true;

}

if($trying_to_view_private === true ){

redirect_to_homey();

}

function startsWith($haystack, $needle)

{

$length = strlen($needle);

return (substr($haystack, 0, $length) === $needle);

}

function redirect_to_homey() {

wp_redirect(home_url());

exit();

}

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

Sep 29

0

Buddypress – How to add group types

By louie171 | Buddypress, PHP, Wordpress | No Comments

It can be useful to have group types sometimes for example, maybe a University might want to have 2 group types for staff and students. So they could have staff groups and student groups ( and a directory for each eg staff would list the staff groups and student groups would list the Student Groups ).

This is easy todo in Buddypress:

function my_bp_custom_group_types() {
    
    bp_groups_register_group_type( 'staff', array(
        'labels' => array(
            'name' => 'Staff groups',
            'singular_name' => 'Staff group'
        ),
 
        // New parameters as of BP 2.7.
        'has_directory' => 'staff',
        'show_in_create_screen' => true,
        'show_in_list' => true,
        'description' => 'some description (maybe better to just wp page content instead of this)',
        'create_screen_checked' => true
    ) );
    
    
    
    
    bp_groups_register_group_type( 'student', array(
        'labels' => array(
            'name' => 'Students',
            'singular_name' => 'Students'
        ),
 
        // New parameters as of BP 2.7.
        'has_directory' => 'students',
        'show_in_create_screen' => true,
        'show_in_list' => true,
        'description' => 'some description (maybe better to just wp page content instead of this)',
        'create_screen_checked' => true
    ) );
    
    
    
    
}

add_action( 'bp_groups_register_group_types', 'my_bp_custom_group_types' );

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

function my_bp_custom_group_types() {

bp_groups_register_group_type( 'staff', array(

'labels' => array(

'name' => 'Staff groups',

'singular_name' => 'Staff group'

),

// New parameters as of BP 2.7.

'has_directory' => 'staff',

'show_in_create_screen' => true,

'show_in_list' => true,

'description' => 'some description (maybe better to just wp page content instead of this)',

'create_screen_checked' => true

) );

bp_groups_register_group_type( 'student', array(

'labels' => array(

'name' => 'Students',

'singular_name' => 'Students'

),

// New parameters as of BP 2.7.

'has_directory' => 'students',

'show_in_create_screen' => true,

'show_in_list' => true,

'description' => 'some description (maybe better to just wp page content instead of this)',

'create_screen_checked' => true

) );

}

add_action( 'bp_groups_register_group_types', 'my_bp_custom_group_types' );

you can then have links like this to view the group directory:

/groups/type/staff/

/groups/type/students/Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

Jan 13

0

Why link your website to your CRM

By louie171 | Customer Relationship Management - CRM, Forms, HubSpot, Marketing Automation, Web Design, Wordpress | No Comments

This post runs over why you would connect a CRM (Customer Relationship Management) system ( such as Hubspot) to your website.

Many CRMs now allow you to capture form data on your website and pull this into the CRM, this has the following benefits to you:

store users information in your CRM
be able to follow up in CRM and have all the interactions in CRM so you can see the history of interactions with that person
see what the user has been looking at on your website

The are 2 main ways of taking the users details from your website:

a form (standard or popup)
a chat box

An example form might look something like above ( this is one I’ve generated in Hubspot , but you can customise and generate your own forms in many ways in Hubspot, manually with HTML or with a tool such as Gravity forms for WordPress, or with other tools). Also remember to make sure you are GDPR compliant if your in the EU.

When the user submits the above form, this is what is will look like in Hubspot.

As you can see the data from the form is recorded in the activity section above and a new contact (Beavis) has been generated in the CRM contacts database. Where you can record all your interactions with this contact ( email , phone and so on ). Emails can also be automatically logged into your CRM and you can automate replies to emails with Marketing Automation sequences. This can be very useful when you have a large number of users (for example your supporters contacting your Charity or Not for Profit Organisation).

I’ve been using Hubspot in this article but the same can be done with others such as Salesforce ( and many others ). I haven’t gone into much technical detail in this post, only why and what are the benefits of this.

CRMs are great for following up and interacting with your supporters, customers, leads and so on. I hope I’ve shown you how you can easily ( and automatically ) put form contacts from your website into your chosen CRM, to make this process easy and save you time.

I plan to write another article on the technical aspects of how todo, what I’ve described briefly ( integrate your WordPress website with a CRM like Hubspot) in the coming months, but if you’d like help with doing this then please contact us below.

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

Jul 19

0

Buddypress how to sort Groups page alphabetically by default

By louie171 | Buddypress, PHP, Wordpress | No Comments

In this short blog post I’ll run over how you can sort the Groups index page in Buddypress alphabetically by default (i.e. on first load of page they will be ordered by group name).

Edit or override 2 of the Buddypress templates

You’ll need these in your theme:

wp-content/YOUR_THEMENAME/buddypress/groups/index.php

and

wp-content/YOUR_THEMENAME/buddypress/groups/groups-loop.php

If these templates don’t exist in your theme you’ll need to make copies of the 2 templates from the Buddypress plugin ( find in buddypress/bp-templates/bp-legacy/buddypress ) and pop into your theme directory in a folder called buddypress. You might need to copy from your parent theme if they are used there ( this is because of the buddypress / wordpress template hierachy – you can look that up if you don’t understand this).

Changes in groups-loop buddypress template

Before the bp_has_groups function call you need to add:

if ( bp_ajax_querystring( 'groups' ) ==""){  
    // default to ordering alphabetically 
    $queryString = "type=alphabetical&action=alphabetical&page=1";
    //$queryString ="";
}
else {
    $queryString = bp_ajax_querystring( 'groups' );    
}

1

2

3

4

5

6

7

8

if ( bp_ajax_querystring( 'groups' ) ==""){

// default to ordering alphabetically

$queryString = "type=alphabetical&action=alphabetical&page=1";

//$queryString ="";

}

else {

$queryString = bp_ajax_querystring( 'groups' );

}

and then change the bp_has_groups function to:

<?php if ( bp_has_groups(  $queryString  ) ) : ?>

1	<?php if ( bp_has_groups( $queryString ) ) : ?>

Changes in index groups template

find this section and change to have alphabetical first ( you could also use the selected attribute ):

<select id="groups-order-by">
    <option value="alphabetical"><?php _e( 'Alphabetical', 'buddyboss' ); ?></option>
    <option value="newest"><?php _e( 'Newly Created', 'buddyboss' ); ?></option>
        <option value="active"><?php _e( 'Last Active', 'buddyboss' ); ?></option>
        <option value="popular"><?php _e( 'Most Members', 'buddyboss' ); ?></option>



        <?php do_action( 'bp_groups_directory_order_options' ); ?>
</select>

1

2

3

4

5

6

7

8

9

10

<?php do_action( 'bp_groups_directory_order_options' ); ?>

</select>

And thats it job done. Remember Buddypress can save your select choices in the session, which can be confusing – so clearing the cache will help in this scenario.

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

Feb 20

1

How to override the comments form in a child theme

By louie171 | Custom Wordpress Theme Development, PHP, Programming, Theming, Wordpress | One Comment

This is a quick post on how to provide your own comments template in your child theme ( overriding comments.php in your parent theme). You can just as easily use the same code to override comments.php if you aren’t using a child theme.

Todo this you need to you need to use the filter ‘comments_template’ ( see the wordpress codex on this filter here)

function greenbox_override_comment_template( $comment_template ) {
    
     global $post;
     if ( !( is_singular() && ( have_comments() || 'open' == $post->comment_status ) ) ) {
        return;
     }
     
     
        
        // your full path and name of comments file to use
        return dirname(__FILE__) ."/my-comments.php";
     
}

add_filter( "comments_template", "greenbox_override_comment_template" );

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function greenbox_override_comment_template( $comment_template ) {

global $post;

if ( !( is_singular() && ( have_comments() || 'open' == $post->comment_status ) ) ) {

return;

}

// your full path and name of comments file to use

return dirname(__FILE__) ."/my-comments.php";

}

add_filter( "comments_template", "greenbox_override_comment_template" );

A handy thing you might sometimes want todo is to have a custom comments template, for various custom post types. If you did want todo this you could just add in an if to encase the returned path and filename. e.g.

if($post->post_type == 'my_custom_post_type'){

         return dirname(__FILE__) ."/my_custom_post_type-comments.php";

}

1

2

3

4

5

if($post->post_type == 'my_custom_post_type'){

return dirname(__FILE__) ."/my_custom_post_type-comments.php";

}

Hope someone finds these snippets for how to override comments.php useful.

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

Wordpress

Create a WordPress plugin that uses a React App

Hide Buddypress members pages from guests ( also hide BBpress forum posts)

Buddypress – How to add group types

Why link your website to your CRM

Buddypress how to sort Groups page alphabetically by default

How to override the comments form in a child theme

Archives

Find it here

Fresh from the blog

Recent Comments

Wordpress

Create a WordPress plugin that uses a React App

Hide Buddypress members pages from guests ( also hide BBpress forum posts)

Buddypress – How to add group types

Why link your website to your CRM

Buddypress how to sort Groups page alphabetically by default

How to override the comments form in a child theme

Archives

Tags

Find it here

Tag Cloud

Fresh from the blog

Recent Comments

Tags