3.1 Install and Configure a BuddyPress-Compatible Theme

Hello, and welcome back to this Tuts+ course on Adding Social Media To Your WordPress Site With BuddyPress. Now we've got BuddyPress setup and we've got all of our pages configured as well, it's time to choose a suitable theme. At the moment, I've got the default theme 2017 running on my site, which is great, it's a nice theme, and it looks clean with BuddyPress. But I'd like to make my site look a little bit different. Not like every old site that is activated with 2017 already installed. So let's find a theme. Let's go to my site Dashboard, and select Appearance > Themes. Now I want to add a new theme to my site. So I click on Add theme, and then I'm gonna search for BuddyPress. Now you'll see that lots of themes come up. Hang on, it's added a space here. Let's get rid of that. And it's just the same. So I want to find something that's nice and simple with not too much extra styling. And that suits the BuddyPress activity stream by not adding too much that I don't need. Let's take a look at this, The Typist. So that will show me a preview of what my site looks like. And that's okay. Let's take a look at it, Install it and Activate it. Now let's visit the front page of my site and see what that theme looks like. There are a few problems with that. This up here is huge, a bit too big for me, and here you've got some of the text being cut off. So that theme isn't really ideal for BuddyPress. So what you need to do is do a little bit of toing and froing. Trying out some themes and finding one that works well for your site. Now I've got one here that's already installed on my site called Simple Perle, which doesn't come up when you search for BuddyPress. But what you will find is that any theme should work with BuddyPress. It used to be that only certain themes worked with BuddyPress. And that if your theme wasn't already BuddyPress compatible, you'd have to add some new files to it. Some template files and so forth, luckily, you don't need to do that anymore. So let's take a look at my site with that Simple Perle activated. I like that, it's nice and simple, the activity stream is in the middle of my page. Okay, so I have to scroll down quite a bit. But it's modern looking and it's clean. So I'm gonna stick with that one. And this theme is also responsive, so it will look great on a mobile device, and this nice big text will work really well on mobile. It's really important to test your sites on a mobile device because the chances are with a social media site, most of your users will be accessing it on mobile. After all, If you're anything like me, most of your Facebook time is spent on your mobile phone, when you've got the odd five minutes. So let's have a look at how we can customize the theme. I could add some additional CSS here if I wanted. I could change the colors or the background image. I'm gonna stick with these colors cuz I quite like the simplicity of them. And there's also some theme options. Now, on my blog page, it will show latest posts. Let's take a look at that in the customizer. And you see that, it uses featured images to do that. At the moment, my posts don't have featured images, and that's displaying this colored block. And you can see that option's here. So I'm gonna check No here. And that looks better. So where's my latest posts, that's down here. I'm gonna change that to Latest News. Up here, it says Latest News, instead of blog. So I could do that by changing the title of my blog page if I wanted, or I can just do it there. So, let's go back to the other options I've got. I could change the Background Image if I wanted. I don't want to do that because I don't want to detract from the content for my users. And I can also change the Menus and Widgets. Which is what we'll move onto in the next part of the course. So, let's click Save & Publish. And take a look at the site by clicking the cross up here to exit the customizer. So, that's the homepage of my site, my activity stream. If I go to a Groups page, for example, you'll see that looks very similar. So that's my theme setup, installed, activated and configured. In the next part of the course, we're going to move on to menus and navigation. We're going to configure the reading settings, so that we have our activity page as our home page. And we're gonna add a navigation menu with BuddyPress pages in it. See you next time, and thanks for watching.