Dealing with multiple React dom entry points in WordPress Theme Development

After getting so excited with the new WordPress script package which includes the ability of not having to manually setup Webpack and Babel for rapid Gutenberg Block creation, I ran into an issue when I started building a WordPress theme. I have multiple files which I wanted to include different individual React Components in different areas. For example, I wanted a React component in my main blog file page which would consume the WordPress REST API and load all of my posts on the page. But then I wanted another React component to consume the REST API to display a single post on a single post template. If I tried to use the default index.js file, I could not load multiple React Components all in the index.js. I need multiple entry points so I can attach my multiple Blog Posts component to a template with a dom element of app and then a different Single Post React Component to a different template file with a dom element of singlePostApp.

What is the number one rule in development? “DON’T HACK CORE”. Since Webpack comes bundled in WordPress core, I could technically edit (hack) the webpack.config.js file in core but it would get overwritten on the first WordPress update. So again Kudos to the WordPress team for thinking ahead. We can extend the webpack.config file.  They thought ahead and realized that some people would need to customize, edit, or change the webpack.config file and that is what we are going to do in this post.

Here is the documentation from WordPress on extending Webpack:

https://developer.wordpress.org/block-editor/packages/packages-scripts/#provide-your-own-webpack-config

So here is my src folder structure which resides in my themes root file.

Theme src folder structure

 

I have my two main entry point js files.

I then created a new webpack.config.js file in the themes root directory. Here is where I extended the WordPress core Webpack file. I tell my new extended Webpack file to use my two different entry point js files.

const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");

const path = require( 'path' );

module.exports = {

  ...defaultConfig,

  entry: {

    ...defaultConfig.entry,

    index: path.resolve( process.cwd(), 'src', 'index.js' ),

    SinglePostApp: path.resolve( process.cwd(), 'src', 'SinglePostApp.js' )

  }

};

After running the build command and there are no errors in the terminal, there will be multiple build files.

Theme build folder structure

Here are my main two entry js files. Notice one is attached to a file with a dom element of app. It imports one of my React Components called PostList. My second one is attached to a dom element of singlePostApp which imports a different React Component called SinglePostApp.

index.js

React Entry File

SinglePostApp.js

React Entry File

Now after extending the Webpack config file, I can add different React Components all throughout my theme. I just need to update my custom webpack.config,js file in my theme’s root folder with the new entry point files. Again, time to start creating some cool React Components for my WordPress theme!

 

JavaScript, React JS, WordPress,

WordPress React Ready with Webpack and Babel bundled in core

Thank you WordPress Team! Webpack and Babel now come packaged in WordPress, time to start building some custom Gutenberg Blocks without spending time, a lot of time setting up your local build setup. Being a PHP developer first, dealing with all of the new JavaScript and the React framework, I spent many hours trying to just set up my local WordPress instance just to start building.

Now with the newest version of WordPress 5.2.1, Webpack and Babel come baked into WordPress core ready to compile your ESNext JavaScript code.

Let us take a look and build a very basic block using these new features.

In my plugins folder, I am going to create a new directory using the terminal in my VSCode editor.

mkdir my-esnext-block

then lets cd into the new directory

cd my-esnext-block

now let’s create a package.json file in this directory run this command in your terminal:

npm init

 

npm-init code

The next step is to install the packages required. You can install packages using the npm command npm install. If you pass the –save-dev parameter, npm will write the package as a dev dependency in the package.json file. The –save-exact parameter instructs npm to save an exact version of a dependency, not a range of valid versions. See npm install documentation for more details.
So using the terminal, and you are still in your new plugin directory run:

npm install --save-dev --save-exact @wordpress/scripts

After installing, a node_modules directory is created with the modules and their dependencies which will include everything you need to start coding using React JS and ESNext JS.

Also, if you look at the package.json file it will include a new section:

"devDependencies": {
  "@wordpress/scripts": "3.1.0"
}

The @wordpress/scripts package handles the dependencies and default configuration for Webpack and Babel. The scripts package expects the source file to compile to be found at src/index.js, and will save the compiled output to build/index.js.

With that in mind, let’s set up a basic block. Create a new folder called src and a new file called index.js with the following content:

Since this tutorial mainly covers the wordpress scripts block package, we will just use the block code from the wordpress github repo for examples of gutenberg blocks located here:  https://github.com/WordPress/gutenberg-examples

const { __, setLocaleData } = wp.i18n;
const { registerBlockType } = wp.blocks;

const blockStyle = {
  backgroundColor: "#900",
  color: "#fff",
  padding: "20px"
};

registerBlockType("gutenberg-examples/example-01-basic-esnext", {
  title: __("Example: HDD Basic (esnext)", "gutenberg-examples"),
  icon: "universal-access-alt",
  category: "layout",
  edit() {
    return <div style={blockStyle}>Hello World, step 1 (from the editor).</div>;
  },
  save() {
    return (
      <div style={blockStyle}>Hello World, step 1 (from the frontend).</div>
    );
  }
});

now lets register our block
we will create our plugins main php file index.php and place the following code in this new file:

<?php
/**
 * Plugin Name: Gutenberg HDD Examples Basic EsNext
 * Plugin URI: https://github.com/WordPress/gutenberg-examples
 * Description: This is a plugin demonstrating how to register new blocks for the Gutenberg editor.
 * Version: 1.0.2
 * Author: the Gutenberg Team
 *
 * @package gutenberg-examples
 */
defined( 'ABSPATH' ) || exit;
/**
 * Load all translations for our plugin from the MO file.
*/
add_action( 'init', 'gutenberg_examples_01_esnext_load_textdomain' );
function gutenberg_examples_01_esnext_load_textdomain() {
	load_plugin_textdomain( 'gutenberg-examples', false, basename( __DIR__ ) . '/languages' );
}
/**
 * Registers all block assets so that they can be enqueued through Gutenberg in
 * the corresponding context.
 *
 * Passes translations to JavaScript.
 */
function gutenberg_examples_01_esnext_register_block() {
	if ( ! function_exists( 'register_block_type' ) ) {
		// Gutenberg is not active.
		return;
	}
	wp_register_script(
		'gutenberg-examples-01-esnext',
		plugins_url( 'build/index.js', __FILE__ ),
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
	);
	register_block_type( 'gutenberg-examples/example-01-basic-esnext', array(
		'editor_script' => 'gutenberg-examples-01-esnext',
	) );
  if ( function_exists( 'wp_set_script_translations' ) ) {
    /**
     * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
     * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
     * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
     */
    wp_set_script_translations( 'gutenberg-examples-01-esnext', 'gutenberg-examples' );
  }
}
add_action( 'init', 'gutenberg_examples_01_esnext_register_block' );

 

Now we need to use the wordpress scrips package and convert our React code in our index.js file for the build process. In the package json file we need to tell it what to use to build. Add the following to your package.json file in your new plugins folder.

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
},

for development, you can use ‘npm run start’
for production, you can use ‘npm run build’

Final package.json file:

{
  "name": "my-esnext-block",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "3.2.1"
  }
}

Now using the terminal run this command:

npm run build

After using  npm run build command and there are no errors in our terminal we should have a build folder with our index.js file located in there.

so here is what our plugin file folder structure looks like:

Plugin folder structure

We should be able to see our new block in the editor

 

 

And here it is on the front end:

front end block view

Again, Kudos to the WordPress team for getting this build package into core and saving everyone so much time. This new feature  allows us to start building new Gutenberg blocks much quicker without the headache of setting up Webpack. Theme developers can start using it also. Just create a package.json file in the theme root directory, create a src/index.js folder file in the theme root, and start writing your React code.  Be sure you are in theme root when you do all of your terminal commands.

JavaScript, React JS, WordPress,

WordPress Developer Helper Functions For Locating Files

WordPress comes with helper functions to located, files, images, documents within your plugin or theme.
Here is a list of some of the most used functions developer use:

1. get_theme_root() : returns the address of the theme installation directory.
2. plugins_url() : returns the address of the plugins directory.
3. get_template_directory_uri() : retrieves the URI to the current theme’s files.
4. admin_url() : provides the address of the WordPress administrative pages.
5. content_url() : indicates where the wp-content directory can be found.
6. site_url() : returns the address of the website.
7. home_url() : returns the address of the website.
8. includes_url() : provides the location of WordPress include files.
9. wp_upload_dir() : indicates the directory where user-uploaded files are stored.

Blog, WordPress,

Simple WordPress HTTP API Tutorial

This article is to show beginners how to consume a Web Service and display results on your WordPress website. I say beginner, I mean a beginner in using Web Services or  a beginner in WordPress development. I also assume you have an idea of what web services are, what a Endpoint is, what is JSON, and what are RESTFUL services, You are someone just looking for advice on how to accomplish this in a WordPress website. Some knowledge of WordPress, some basic PHP and some basic knowledge of WordPress theme development and/or WordPress plugin development are suggested. If you are a brand new WordPress user that has never written any code this might not be the article for you. A person that has written some PHP code and has knowledge of the WordPress file structure should be able to understand this article.   To start, we need to take a look at the documentation for WordPress HTTP API.

WordPress HTTP API

The functions below are the ones you will use to retrieve an URL. Please be aware that these functions will return a WordPress WP_Error class on failure.

* wp_remote_get() – Retrieves a URL using the GET HTTP method.
* wp_remote_post() – Retrieves a URL using the POST HTTP method.
* wp_remote_head() – Retrieves a URL using the HEAD HTTP method.
* wp_remote_request() – Retrieves a URL using either the default GET or a custom HTTP method (should be caps) that you specify.

The other helper functions deal with retrieving different parts of the response and do the testing for WP_Error for you, these make usage of the API very simple and are the preferred method for processing response objects.

* wp_remote_retrieve_body() – Retrieves just the body from the response.
* wp_remote_retrieve_header() – Gives you a single HTTP header based on name from the response.
* wp_remote_retrieve_headers() – Returns all of the HTTP headers in an array for processing.
* wp_remote_retrieve_response_code() – Gives you the number for the HTTP response. This should be 200, but could be 4xx or even 3xx on failure.
* wp_remote_retrieve_response_message() – Returns the response message based on the response code.
So in this tutorial we will be using the wp_remote_get function to make the request to the web service API. After successfully connecting and getting back our JSON data, we will then use the wp_remote_retrieve_body function to grab just the body of the request and then parse the data. Normally, in basic PHP we would be using cURL but WordPress already has everything baked into the Core so we will be using those functions.

Lets get started. First what I am going to do is to create a new template in my present theme. So jump into your present theme’s folder and create a new file, I am calling mine rest.php. So now in my theme’s main folder I have a new file called rest.php. Now I am going to create the code so my new template will show up in my theme on the front end.  I am also going to name my new template Rest. So open up your new file called rest.php and place this in your new file.

<?php
/**
 * Template Name: Rest 
 *
 */
get_header(); 
?>
    <div id="content" class="full-width" style="padding-left: 100px;">
		<h3>WP_Http</h3>
		<?php

		/* our new code will go */

		?>        
	</div>
<?php 
get_footer(); 
?>

Now remember, my theme will be different than your theme. What I did was just copy one of my themes other template files and stripped everything out of the main content area, I left my get_header, get_footer and the main content div. OK, so now I have my new template file so I will be able to see the results on the front end.  Now, I will login into the admin side of my WP website, create a new page, and then choose the new ‘Rest’ template we just created.  Be sure and Save. Go to the front end, and you should see a new page that looks like your theme with just a heading of WP_Http (That is if you copied my code above. If you did not, then your page should be empty).

OK, now we are ready to get down to coding. So far we created a new template for our theme, created a new webpage and assigned this new template to the page. Displayed the new webpage in the front end that will be displaying our work.

We first need to code the Request part. I will be using the Github API.  For information on Github: Github

For more information on their APIs: Github API

We will be making a call using the Github API to get the names of my repositories I have on Github.

In order to do this example, you will need an account at Github. If you are one of those developers who keeps avoiding GIT and putting your code into repositories, maybe this tutorial will give you the push to start. OK, so after reading the Github API documentation, I will be using this Endpoint:

https://api.github.com/users/username/repos

Now time to start coding the request part:

$username = 'redsoxfan2499';
$url = 'https://api.github.com/users/'.$username.'/repos';
$request = wp_remote_get( $url );

if(is_wp_error($request)) {
	return false;
}

this code will be placed into my template page as such:

<main id="main" class="site-main" role="main">
	<?php if ( have_posts() ) : ?>
        
        	<?php /* Start the Loop */ ?>
        	<?php while ( have_posts() ) : the_post(); ?>
        
        	<?php
        		/** get page content **/
        		the_content();
        	?>
        
        	<?php endwhile; ?>
        
        	<?php endif; ?>
							
		<h3>WP_Http</h3>
		<p>This page is used for my WP HTTP API Tutorial.
			Check it out:   
		<a href="https://hyperdrivedesigns.com/simple-wp-http-api-tutorial/">WP HTTP API Tutorial</a>
		</p>
		<?php
			$username = 'redsoxfan2499';
			$url = 'https://api.github.com/users/'.$username.'/repos';
            $request = wp_remote_get( $url );
								
            if(is_wp_error($request)) 
            {
			    return false;
			}

			$body = wp_remote_retrieve_body($request);

			$data = json_decode($body);
								
			if(!empty($data)) {

				echo '<ul>';
				foreach( $data as $repo ) { 

					echo '<li>';
					echo $repo->name;
					echo '</li>';
				}
				echo '</ul>';
			}				
		?>
</main><!-- #main -->

$url is the Endpoint.
$username will be your username.

$request = wp_remote_get( $url );

$request: here we will use the WP HTTP API function wp_remote_get() and pass in our endpoint URL.

if(is_wp_error($request)) 
{
    return false;
}

Here we just do an error check, to make sure we have not hit an errors so far.

$body = wp_remote_retrieve_body($request);

$body: here we again use the WP HTTP API and use the wp_remote_retrieve_body function which produces only the body of the web services call response.

$data = json_decode($body);

$data: here we just use the php function json_decode so we can use the data in our php code. Time to check and see if we are successfully.

place the code below in your file after this line:

$data = json_decode($body);

This will basically dump out our json array, if we were successfully in connection to the API.

echo '<pre>';
print_r($data);
echo '</pre>';

I use the pre tags so it will print out the JSON array into a more readable formatted result.

you can just use this if you want:

print_r($data);

This section of code is just for testing. If you followed along you should see your array of information.

Now, either delete those lines of code or comment them out.

Now time to Parse our data.

if(!empty($data)) 
{
    echo '<ul>';
        foreach( $data as $repo ) 
        {
            echo '<li>';
              echo $repo->name;
            echo '</li>';
         }
    echo '</ul>';
}   

First we check and make sure that our $data array is not empty. If not then we start our list declaration.  Then using a foreach loop we loop through all instances of repositories that are in the array and print out the name of each repo, When complete, we close our list and exit.

Let’s break down our foreach loop. How did we come up with those names. Well $data is our array of data, and if you ran the print_r code you see how the data is arranged. The proper name is repositories. If we start to look down our array we can see that the proper name is name.

print-r-array

So we create the foreach loop as such:

foreach( $data as $repo ) 
{
     echo '<li>';
          echo $repo->name;
      echo '</li>';
}

So if we did everything correctly we now have a list of our Bitbucket repositories names. To see in real-time, check out the page here:

Demo Page

FINAL CODE:

<?php
/**
 * Template Name: Rest 
 *
 * This is the template that displays information from a web service.
 *
 * @package foundationwp
 */

get_header(); 
?>
	<div class="container">
        <div class="row">
        	<div id="primary" class="col-lg-12 col-md-12">
        		<main id="main" class="site-main" role="main">
							<?php if ( have_posts() ) : ?>
        
        			<?php /* Start the Loop */ ?>
        			<?php while ( have_posts() ) : the_post(); ?>
        
        				<?php
        				/** get page content **/
        				the_content();
        				?>
        
        			<?php endwhile; ?>
        
        		<?php endif; ?>
							
							<h3>WP_Http</h3>
							<p>
								This page is used for my WP HTTP API Tutorial.
								Check it out:   
								<a href="https://hyperdrivedesigns.com/simple-wp-http-api-tutorial/">
								WP HTTP API Tutorial
								</a>
							</p>
							<?php
								$username = 'redsoxfan2499';
								$url = 'https://api.github.com/users/'.$username.'/repos';
								$request = wp_remote_get( $url );
								if(is_wp_error($request)) {
									return false;
								}

								$body = wp_remote_retrieve_body($request);

								$data = json_decode($body);
								
								if(!empty($data)) {

									echo '<ul>';
									foreach( $data as $repo ) { 

										echo '<li>';
											echo $repo->name;
										echo '</li>';
									}
									echo '</ul>';
								}				
								?>
							<br/><br/>
							</main><!-- #main -->
        	</div><!-- #primary -->
				</div><!-- end row -->
    </div> <!-- .container -->
<?php get_footer(); ?>
Blog, PHP, Web Development, WordPress,

Using PHP Tags In WordPress Screencast

Check out the new screen-cast titled Using PHP Tags in WordPress Screencast. Here I do a brief overview of the PHP WordPress Template Tags that are used in building WordPress themes. This screencast was created for Learnable. Learnable, is SitePoint’s sister website for learning web design/web development.

Watch Screencast

Blog, PHP, Web Design, Web Development, WordPress,

Google Calendar Link Plugin Released

Finally! Google Calendar Link Plugin Released!

Another Small Simple WordPress Plugin: Google Calendar Link Plugin is now ready for download. To see the plugin in action and to get more information just go under the WordPress Plugins menu and Click on Google Calendar Link Plugin. In order to download the plugin, just register at our website and then go to the Plugins Download Page. From this page you can download any of our Small Simple WordPress Plugins.

Blog, PHP, Web Development, WordPress,

Pantheon – The Next Generation of WordPress hosting

Anybody in the WordPress design or development world has probably heard of Drupal and when you think of Drupal you think of Pantheon. Well, Stop The Clock! Pantheon now has the platform framework for WordPress. Now, WordPress developers and designers can concentrate on building plugins, creating themes and let Pantheon worry about dealing with all of the complexities of hosting. Coming from a job where I worked on Drupal and WordPress websites, I knew the greatness of Pantheon. So when I heard that Pantheon was going to support WordPress, I was excited! Now, I strictly work on WordPress and have been able to become one of the first WordPress developers to join Pantheon and I would like to tell you about Pantheon from a WordPress developers prospective.

Pantheon provides many different pricing options: Free plan(Developer Sandbox): You can get a Pantheon account, create your WordPress sites and start coding. Now, if you want to have a custom domain you will have to upgrade to a paid plan. Paid plans range from personal, all the way to some major Enterprise plans. So from small to large, Pantheon can handle it.

So after you create an account you can log in to your dashboard and start spinning up your WordPress sites. You can create a Brand New site or import an existing WordPress site.

 

Now after you have your site up and running you will be in your development environment.

 

So your website will begin in development mode, then you will push it to the testing environment and then when your website is ready, Go Live! Pantheon comes with a host of cool features and options. Pantheon supports GIT and SFTP. So if you are a GIT person, you are in luck. If you still have not yet took the leap into GIT, you can still use a FTP client(like FileZilla) that supports SFTP. Just drag and drop your files from your local to your pantheon server. Or, if you have an editor that allows connection to remote sites, you can connect directly to your Pantheon server. Pantheon also keeps you informed of your GIT commit status.

 

As a WordPress developer, I created my WordPress test website which resides in the development environment. I can start coding my custom plugins for my customers. Now, I would like them to take a look at it and do some testing. So I can push my website over to the testing environment. With just a click of a button, Pantheon will clone your development website and database over to the testing environment. Now, I send my customers my testing URL and let them play around with the plugin. While they are doing some testing, I can still continue to work on the plugin(s) in the development environment without effecting the testing website. This is awesome. This works great for WordPress designers also. You can push your code over to testing, let your customers play around with your present work while you still continue to code away on your development site. Say goodbye to your localhost, say goodbye to trying to get Wamp Server or MAMP Pro up and running, say goodbye to dealing with adjusting your PHP settings, let Pantheon deal with all that while you get back to work developing plugins or designing themes. I tested connecting to my Pantheon websites using DreamWeaver and Sublime Text 2 editors without any issues. I am loving not having to deal with my localhost anymore.

Pantheon also keeps you informed about your server status, your database size, backups, and PHP error log. Pantheon also comes with a backup service and you can even have a Security setup on your development environment. You can use Custom domains and SSL certificates. Need access to your database, no problem. I just got the connection information, opened up MySQL Workbench, entered all of my credentials and I am in my database. Have a team of developers, Pantheon can handle it. They have a multi-dev environment for teams of developers.

Pantheon offers everything a WordPress developer/designer needs for their WordPress hosting. WordPress design agencies, WordPress development agencies, WordPress Theme companies, any business that uses WordPress can benefit from using Pantheon. Oh, by the way, did I mention Customer Service. Their Customer Service is awesome. You can email the founders and top Officers of Pantheon directly, that should tell you something. These guys care about their product and care about their customers, Bottom Line! So if you are looking for some new WordPress specific hosting, give Pantheon a try. Go on over to getpantheon.com (this is not an affiliate link), create your Free Sandbox account and give it a test drive. If Pantheon supports their WordPress platform like they do their Drupal platform, (which I am pretty confident they will), you will be more than satisfied. So if you are in the market for the next generation of WordPress hosting, ‘Put A Pantheon It!’

Blog, Reviews, WordPress,

Adding Dashicons to Custom Post Types Admin Menu

OK, WordPress Designers and Developers. I finally have figured out how to use the new Dashicons. If you do not know what the Dashicons are, go to the website here. With WordPress getting a nice overhaul in the admin theme, Dashicons are used throughout the new admin theme. So I just got finished making a new plugin which required a custom post type. So I wanted to give the new post type a cool new Dashicon then the default pin. So here are the steps:

1. In the custom post type script where you normally state the menu_icon this is what your syntax will be (see highlighted line # 22):

function create_orl_books()
{
register_post_type( 'orl_books',
  array(
    'labels' => array(
    'name' => 'ORL books',
    'singular_name' => 'ORL Book',
    'add_new' => 'Add New',
    'add_new_item' => 'Add New ORL Book',
    'edit' => 'Edit',
    'edit_item' => 'Edit ORL Book',
    'new_item' => 'New ORL Book',
    'view' => 'View',
    'view_item' => 'View ORL Book',
    'search_items' => 'Search ORL Book',
    'not_found' => 'No ORL Book found',
    'not_found_in_trash' =>
    'No ORL Book found in Trash'
    ),
    'public' => true,
    'menu_position' => 15,
    'menu_icon' => 'dashicons-[book]',    'supports' => array('title', 'editor', 'thumbnail')
    )
  );
}

2. OK. Now we know where to place the code correctly, how do we get the Dashicons? Go to the Dashicons website and find the icon that you would like to use.Click on the icon and go back to the top of the Dashicon home page and click on copy html. There you will see what the CSS class is and get that name and place it in the brackets on the menu-icon line.

3. Save your css page and then refresh your admin webpage and this is what you should see:

Blog, Web Design, Web Development, WordPress,

WordPress Beginners Tutorial – Building a Theme Options Page

WordPress Beginners Tutorial – Building a Theme Options Page

After many hours of searching the web, looking for some great WordPress admin theme options page tutorials, I have found a lot of different methods which became confusing and complicated. So after many hours of learning and understanding how to create an options page, and after including an options page for some of my clients, I decided to create the most BASIC tutorial on this issue. I will try to be as basic and simple as possible so beginners can follow along easily. This tutorial expects the user to have a beginner background in html, php and WordPress. This tutorial will show the very minimal things to code to get a working options page in your WordPress theme. After you start to understand and learn the basics, then you can branch out and find some more advanced tutorials. So here we go. To set this up, say we are creating a brand new WordPress theme called Blitz. If there already is a WordPress theme called Blitz, this tutorial has no relationship to that theme and is purely by coincidence. Of course with our new Blitz theme, we have a folder called Blitz under our themes folder and includes the very basic files that are required for a WordPress Theme. The files we have in our Blitz folder are index.php, header.php, footer.php, style.css and functions.php.

Read More

Blog, Web Development, WordPress,