Call   0208 3131682   Mon-Fri 9am-6pm
Category

Wordpress

Create a WordPress plugin that uses a React App

By | 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.

Create React App

In plugin dir (from cmd line) run:

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:

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:

In the root dir of the react app run:

npm install rewire

in package.json

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.

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

By | 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).

 

 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.

Buddypress – How to add group types

By | 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:

 

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.

Why link your website to your CRM

By | 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

 

Hubspot WordPress form integration

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.

Hubspot captured lead from WordPress website

 

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.

Buddypress how to sort Groups page alphabetically by default

By | 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:

and then change the bp_has_groups function to:

 

Changes in index groups template

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

 

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.

How to override the comments form in a child theme

By | 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)

 

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.

 

 

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.