Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Starting With WPCOM and Site Information

Let’s get started using WPCOM! In this lesson, you’ll learn how to set up WPCOM and how to get information about the site.

Related Links

2.2 Starting With WPCOM and Site Information

Hello everyone, I am Reggie Dawson. Welcome to get started with wpcom.js course for tutsplus. Now that we have our token, the next thing we need to do is configure a small project that we will use to look at some of the methods we have available to us from wpcom.js. The first thing you need to do is create a project folder. Inside this folder we will use NPM Edit to create a package.json file. Go ahead and name the file wpcom-demo, everything else can be left at the defaults. Once you have that, run npm install wpcom --save. The save option will add wpcom to your package.json file. After that, we're going to install browserify beefy globally. Browserify will allow us to use includes in our JavaScript file and import any dependencies. Beefy works with browsify and starts the web server at the same time bundling the files with browserify. Now this is is not necessary but just makes our life easier when importing libraries that are node modules. After that is done create a file named index.HTML in your Project folder This is just the standard head for our HTML file. Then we add a body tag with two divs. The first div will hold a button with an id of display and a label of Display Posts. The following div has an id of results Then after the divs we add our script references for jQuery and index.js. We are using jQuery to make it easier to handle appending HTML elements to our page. After that we can go ahead and create index.js. Now to understand WPCOM.js better, we will look at the different methods available to us. The first method we will look at is the WPCOM method that we will use to create an instance of WPCOM. This is also where we will pass our token when using a method that requires authentication. To start with, we are just going to display a post and this doesn't require authentication. There's also WPCOMReq which allows you to make ACTP style request against the WordPress API. Now in the index.js file we add a variable where we required WPCOM. This is why we are using browse or [INAUDIBLE] which allows to use node JS style requires statements. The following parenthesis is where we will supply our token. But we don't need to do that just yet. Then we add a click handler for our button. Then we add our display post function. That will be initiated by our button's click handler. Then we add a variable for our wpcom instance. We are also adding the next method that we will look at, site. Site allow this access to methods that affect all areas of our Word Press installation. Indeed there's a lot of overlap in the functionality of site. For example, when using site, we can access users, posts. We're on media list. You can also add post to media through site even though you can do the same thing with the post to media methods. I found out that many times the methods available from site are more convenient to use. But beware in some cases, there are some limitations to site functionality. Now you will also notice that we added the blog ID as an argument for site. We got this ID when we generated our access token. We could also use the domain that we have on WordPress.com. Then we use the post list method from site. This method returns a list of all the posts from our site. This method does not require authentication which is why we have provided an access token in our instance. Then in our success method we first create an array. After that we're going to push the title, featured image and post content to this array. Now i have few post in my word press but we will just display the most recent post. The newest post will always be the first post returned if you grab the post this way. Then we will log the return data. I did this so we can look at the data and see how it is structured. After we log the data then we append our post to the results div. Then in the catch method we just login the errors. After that save you work and navigate to your project in the command line. In the command line run beefy index.js, this will launch a web server while using browser [INAUDIBLE] to make sure WPCOM that we've acquired is available. Once you do that navigate to 127.0.0.1:9966. What you may recognize is that the address that we use in app as the JavaScript origin. Without this, we will get an error when we try to access our wordpress.com site. Now when you navigate to this address, you should see your button. But before you click it, open up the developers tools. Now when we click the button, you should see the title, featured image, and content. Now if you just started a wordpress.com site, make sure to create a post with a featured image. Now, if you look at the developers tools, we can see how we got the data that we wanted. First, we drill down to the post array, which you might I case holds five pose then I chose the first item. Inside I drilled down the content, featured image, and title. By looking at the data this way you can find out all of the information that is returned from WordPress and how you can use it. In the next video we will learn how to use some of the post methods and why you will want to use them.

Back to the top