 I'm going to be talking today about integrated dashboards and basically how you can customize your admin dashboards to create a more unique experience for your clients. There is a ton of code in this presentation, so disclaimer. I have a blog post set up with all the examples and everything I'm going to be going through and a lot of links I'm going to be talking about. I also have some papers with the URL on it if you want to check it out later, but you can follow along if you need to. So I'm Tabitha, I'm the Director of Web Development and Design at Leigh Media Group. We are a small web development agency in Rose Hill, Kansas. It is near Wichita, and we work with clients in a lot of different industries. A lot of them are in the Wichita area, but we have them all over the country as well. Some random facts about me. I have been doing web programming for about 20 years as a fun hobby, and about 11 years for a job, so I get paid now. I've been working with WordPress specifically for about nine years, and I have been at Leigh Media Group for about five years. So today I'm going to be talking about why you might want to customize your WordPress dashboard, how you can create and use custom user roles and capabilities to make different things happen, how to modify the admin menu in the admin bar, how to add custom pages and content to your WordPress dashboard, and how to use APIs to integrate third-party data into your dashboard. So I'm going to start off with telling you why you might want to do this. You are able to give your clients more control over their website without giving them access to settings or things that might confuse them or things that might cause them to accidentally break the website because nobody wants that. You can also enhance the overall user experience of the admin dashboard for them, and you can provide data to them in real time without requiring them to log into a second location or requiring them to look at a report to send them because sometimes they just don't. The first thing that you're going to need to look at is the roles, which are what determine what people can access, and there are five roles by default in WordPress. Advertising Editor, Contributor, Author, and Subscriber, and those are great, but creating custom roles allows you to break down access by more unique factors like management level or department. So for example, if you have a larger client that maybe has like an HR department that needs to access one thing and maybe accounting needs to access something else, you can kind of break things down this way. And it also allows you to display or hide custom information from specific users and customize their overall user experience. We use a plugin called Members to create roles. You can do it with code, but in this instance, kind of cheat a little and choose the plugin. It's really lightweight. It's easy to use. This is what it looks like. It lets you break down the roles by all the default capabilities in WordPress. And there's, I think there's like 50 or so. You can also create new capabilities that make it easier for you to determine what people are seeing. And I'm going to get into that a little bit later. So the first thing I'm going to go through is some of the different things you can change in the dashboard, like the menu in the admin bar. And first I have a few examples of what some of this might look like. So this first one is a Chamber of Commerce website and their website has members. So they're able to track how many new members they've gotten each month. They can see who's expired if they want to talk to them about renewing. They can also see their top pages, which is helpful for them when they're talking to members about renewing. They can say, like, hey, your page is number two on our whole website. So maybe you want to renew your account. And then they also have some audience demographics so they can see who's visiting their site by city and what their interests are, things like that. The next one is a fundraising website. And this is kind of a newer one, but users sign up on the website and they can create their own campaigns to raise money. So their dashboard allows them to see how many new users and new teams have signed up each month, how much money has been raised overall. They also have some analytics data. This website hasn't quite launched it, so this looks sad. But once they've started getting traffic, it'll update automatically. And the last one is a bigger membership site that has a ton of data. So this is a good example of how much custom information you can show. So this breaks down things by member. They do events, so this breaks down some of those statistics for them as well. They also have a lot more demographic data, so they can target sponsors and things like that with this information. And they can track the commission their members are earning and things like that. So the first thing I'm going to talk about is the admin menu, which is on the left sidebar when you're logged in. There are some times when you might want to remove some information. So for example, if you give users the edit post capability, maybe you need them to access a certain custom post type and not necessarily post. You can remove that. You can remove the tools menu. You can remove basically anything you want using this function. And this goes into the admin menu hook. And all of this code would go in your functions.php, unless you have a more complicated system. But that's a different topic. And then once you create your function, the first thing you do is tell your code what role or capability. This example is using roles. And it is going to apply to the client role, but not administrators or editors. It's sometimes important to specify that. And then I have specified a lot of options I want to remove. These are all just examples, but so I'm hiding the comments tools, media library, profile, and all of the URLs in here. You go by what the URL is for the admin and in the WordPress codex, there is a list of what those all are. But you can usually figure it out yourself. And then in other instances, you might want to add new custom options using admin new page. And this one has a lot more properties to it. And I'm going to go through those later, but you can use this to add new custom pages, which is coming up in a little bit. Or you can add links to existing options if you want to move them around and make things a little easier to understand. And this goes with the admin menu hook as well, where you can add it to your previous function if you did that. And this one's going to apply to clients and editors. And then I got my two menu options. The first one is for a custom page. And the second one is an example of moving the add post option out to the main menu instead of being under posts. So once you've done that, you can also do some things with the admin bar, which is the black bar at the top that you see when you're logged in. And all of this stuff goes with the admin bar menu function. And you can do the whole thing from just this one. So we hook into admin bar menu. And then remove node and remove menu are what you're going to use to remove things. So in this example, I use remove node to remove a little WordPress logo. That's in the top left. And remove menu to remove one of the options that show up in the new dropdown. And then I'm going to use add node to add a new menu option, which is a custom link. And there's quite a few arguments for this. In this example, I am adding an external link. So I'm specifying ID, the title is as well as a target. So it opens in a new window. You can also add a class, which you can use to add branding to it. I'm not getting into any of that, but the options there. You can also determine who is able to see the admin bar using show admin bar. So for example, if you have a website with members that access everything from the front end, you don't necessarily need them to see that bar. You don't need them to go into the dashboard at all. So it's usually a good idea to hide it. This first function is what determines who is going to see the admin bar. And it hooks into in it. So it runs right away. And in this example, the only users that will see the admin bar are the ones that have the manage options capability. That's typically administrators unless you customize your other roles. And I have show admin bar set to fall, so it won't show for anyone else. The second one is a custom redirect to take them away from the dashboard if they accidentally get there. And this hooks into admin in it, which runs as soon as someone accesses the dashboard. And this is a little trickier because there are some things that run on the front end of WordPress that actually call back to WP admin. So you don't want to redirect those functions. So what I have done here is I have it has access variables set to false. And then I check if they can manage options, it changes to true. Or if it's an Ajax call, which means it's coming from the front end, it's true. And then after all that, if it still falls, they get redirected to a front end dashboard. Let's talk through that one already. The last thing I'm going to talk about in this section is setting up custom welcome pages. So that's what was in my examples. These are all custom pages. And this lets you change what people see when they log in. So we're going to go back to add menu page. And I'm going to talk through a little bit more about how you set that up if you're adding a new page. So again, this is the admin menu hook. And in my function, I've kind of broken out all the properties for this a little more. So the first one is the page title that'll be at the top of your page. The second one is the label that's going to show up in the menu. The third one is the capability in this one. I'm using a custom clients capability and that's who's going to see it. If they don't have that capability, they won't ever see this page. The fourth one is the page slug, which you're going to need to remember later. We're going to get back to that. So I have it set to welcome and the URL is going to look like admin dot PHP page equals welcome. The next property is the function that's going to actually display the content. And then you can specify an icon and the menu position. This is set to one because I want it at the top of the menu. And then I'm going to create the function. This is really simple. It just shows some HTML, but any kind of custom information you want to go in this function. So once you have it set up, you're going to want to redirect users to it using the login redirect hook. And here you can set which roles or capabilities get redirected. This one redirects everyone with the client role. And that's where this is where I have the URL that I talked about later that you'll need to remember, but use admin URL to redirect it. So now I'm going to move on to the analytics part. This is where it gets extra tricky. Adding the analytics to the dashboard lets you display the real-time data without having to send them to a second place. They're already logging into their website. They might as well be able to see it there. And I already showed some examples, but I have a couple more. This is just all data that comes from Google Analytics. And this is data that comes from Facebook. And I'm going to show how to display some of these charts. First, I'm going to talk about Google, though, using the Google Analytics API. Google has a pretty extensive API library that gives you access to basically everything Google does. So you can hook into maps, analytics, drive, basically anything. You can check that out at this URL. To get started, you need to create a project and set up a service account, which is a little time-consuming. Google has a guide that actually walks you through that whole process. I made a short URL for this, but if you check out my blog post, there's a link to the guide that will walk you through it. And once you get through that, you'll have everything set up that you need. And this is the code. This is what it'll look like just to get everything that you need set up. It looks complicated, but the walkthrough will help you create all this. So it's not as scary as it looks. The one thing you will need is the profile ID that you want to pull analytics data from. When you log into your Google dashboard, if you go under View Settings, it'll be right there at the top. That is the ID you need. So to display the default page view chart, which shows all the page views over time, this is what that code will look like. And up at the top, that's where I put my profile ID. You can store that on the server depending on what you're doing, or you can put it in manually. In this example, I'm using the Google JavaScript API because it creates the charts for you. And I think they look cool, so I just stick with that. And then once you have that attached, then you'll use it to create a request for the data chart. And this is where you will use your profile ID to tell it what account you're pulling from. And then you'll set up some options for the chart. So this is going to pull data about page views and unique page views organized by date, and it's going to be a line chart. And this is what it'll look like when it's done. And since we're using the Google API, it'll be a little interactive so they can hover over all those little dots and see more information. You can also show other reports. For example, the top pages. This one I actually like to use just the PHP to pull this information because it lets you filter things out. So for example, maybe you don't want the login page to show in the list because it's not important. You can filter it out before it even gets on the list, so that's pretty helpful. You can also break down the data by city. And in this one, I'm even filtering it to only show data for Kansas because in this example, the other cities, if they're not in Kansas, don't really matter. And this is a chart by device which can be helpful as far as programming stuff goes. Social media gets a little more tricky because there's a lot of privacy involved and it can be a little more difficult to get access to the data. Facebook does have some tools though. I'm going to talk about using the Graph API to pull in some of that information. You can find out information about that at developers.facebook.com. If you start getting involved in this too much, you're going to spend a lot of time on that site, so you'll remember it. To get started, again, you need to create a Facebook app and install the PHP SDK on your server. It's kind of a two-part process, and so there are two separate guides from Facebook on how to do that. Again, it's a little time-consuming, but once you get it set up, then you're pretty much good to go. And this is what it looks like once you get done. The code's a little more simple for this part for Facebook, and once you go through the walkthrough and have everything set up, you'll have an app ID, an app secret, and you actually need to do some other things to get the page ID and account token. The page ID you find under the about tab of the page you want to display statistics for. And the access token is a little trickier. On my blog post, I have a link that explains this in a little more detail, but basically you're going to use the Graph API Explorer and select your app that you made, the page you want to display data for, which you should be an admin to. You do have to be an admin for the page to do any of this. That's important to remember. Here it'll give you an access token, but it's a little tricky because this one lasts for about 24 hours. You take that, go to another page, you can get one that lasts for a week, and go to another page, you can get one that lasts forever. It's a process, that's why there's a link that'll explain that more. Once you have that done, you can actually display some charts, and I have this split into two pieces because it's a little more difficult with Facebook. The first part is just getting the data. In my example, I want to pull a chart that shows statistics from this week and then the change from the previous week. I have my date set here, and then I'm going to put in the call to the Facebook API to get the data. Facebook returns it in an array that is not very user-friendly. What I like to do is loop through it and put it into an array that'll work better to display the data later. Here I'm putting the dates into a labels array and the values into a values array, which will line up for my chart later. Then I do the same thing for the previous week and calculate the percent of change from last week to this week. Once you have all that information, you can actually display a chart. Facebook doesn't have a super cool JavaScript API for displaying charts, so I like to use chart.js if you've never used it. It's cool and you should. This is what the code looks like for charts.js to pull in the data. This is where I use the arrays I created for the labels and the values. When I'm done, it looks like this. It's a lot of code to get a little chart, but it's cool. There's some other data you can show. This is a chart of page likes, the most page views. This is about the same. It's just calling for some different information. You can view audience demographics. This one is by gender. You can do by age. That's Facebook. You can also pull in information about ads and things like that if you want to. For other social media platforms, the Facebook Graph API will let you access Instagram statistics as well, but there are some extra steps and you need special permissions to do that, so it's a little trickier. Twitter has an API as well, but they require an enterprise account, and they don't really say how much you have to pay for that, so I don't know. Then Pinterest and Snapchat, I've tried to do some research into this. They might have tools, but they're keeping pretty quiet about it. If you're not a programmer, congratulations for sitting through all of that. I have some plugins that might help you do some of these things without needing to do all of that. The first one is Client Dash. This one will let you customize the admin menu, the dashboard widgets that show up on the default welcome page and create custom admin pages. I think you can do one with a free version. The next one is Admin Bar and Dashboard Access Control. This one just gives you control over who sees the admin bar and who is able to access the dashboard. Absolutely Glamorous Custom Admin is kind of like a combination of those two. It lets you do the admin bar, the admin menu. It lets you change the colors of the dashboard and add your own branding, and it lets you customize admin pages and dashboard widgets. And Monster Insights for WordPress, this one is probably the coolest out of these plugins. It lets you connect your analytics account, and it'll display the code on your website for you. It'll even filter out like if an administrator is logged in, it won't show the code so it won't count those. It also gives you access to some analytics reports in the dashboard, so it's kind of a little shortcut to getting those in there. That's all I got. So, are there any questions? Yes. And actually on the page I set up, they're available there too. And I have those up here. You can grab one. Mm-hmm. There you go.