How to install beautiful Radcliffe theme

Now that I know which theme I want to use, I can download, install, activate and customize it all from right here inside Wordpress itself. Now, before I do so, let me briefly show you what I've done to the content of my site so you can try to do the same. You've already seen me add a series of different pages and for most of these pages, I've also added a featured image at the top. This is both so that when people visit the site, they'll see the couple right away and know they got to the right place and it's also because large images on a site always looks really nice and we're aiming for that nice, high quality look here because this is after all a wedding website.

I've also deliberately not done anything to the sidebar widgets. So right now, in 2015, I have a series of sidebar widgets here on the left hand side, that to be honest, makes no sense for the site. They're linking to places that have no content and generally, they have no purpose. So, if you choose to use 2015 as a continue, you need to go remove these widgets in the Customizer so that they don't clutter up your sidebar. However, when we switch to another theme, we may also have to go clean up the widgets anyway because sometimes, these widgets will kick in in other themes and on the other hand, there's also a chance we may be able to use the areas where widgets appear in the new theme to add some extra features.

But, enough talk. Let's install the new theme. Like I said, you can install the theme right from within Wordpress and to get there, we'll go to the Wordpress toolbar, hover over the site title and then click on themes. You can also navigate to the backend and go to appearance and themes. You're taken to the same place. On this themes page, you see all the themes that are currently installed in my version of Wordpress. And you can see here, I have five because I added Semone earlier. You also see which theme is currently active. It's this one, 2015 and if you click on the customize button right here, you're taken to the same theme customizer you can get to from the front end and the Wordpress toolbar.

I want to add a new theme, so I'm gonna click add new and go search for Radcliffe. Once I find the theme, I'll click Install. The theme is downloaded, unpacked and installed and now, I can either live preview it to do customization or I can just activate it right away, which is what I'll do. Once the theme is activated, I can jump to the front end and look at what my content looks like with this new theme right outta the gate. And here you see, the theme has a really nice look and feel to it. The site title has this rich typography that's quite unusual for this type of theme.

I also have a great menu with drop down options. I have very large featured images and my content, as you can see down here on the front page, also looks really nice. Great typography, nice large font, very easy to read. Now that I've installed the theme, I obviously need to do some customization work. My menu has fallen back to the default, which is just displaying each page in an alphabetical order and I may have to do something about these featured images because although it's not clear when you look at it, the image that's being used right now is not the ideal image for this particular theme.

So, we have to regenerate the thumbnails for this theme so that the theme has access to the proper size images.

How to custom wedding theme

Based on the requirements we set out for this project, I went searching in the WordPress.org themes directory for some themes that would be befitting a wedding website. While there are many themes available that could be used for this site, I'd like to show you the three I think would work best right now. All feature clean and minimalist design, all display large images, all are content focused and have large and easy-to-read typography, and all are responsive and based on up-to-date coding standards and practices. After testing a myriad of themes extensively, I found that one of the themes that bubbled up on top was the default theme that WordPress comes with right now, Twenty Fifteen.

Out of the box, Twenty Fifteen looks pretty good, and you can further customize it using the customizer. For example, Twenty Fifteen allows you to change the color scheme, and it even comes with several different base color schemes to start from. So, if you want to try out the blue color scheme, you can simply switch it and see what that looks like, and then you can further adjust the color scheme using the different color pickers in the customizer. If you want to use Twenty Fifteen for the remainder of this course, you can, and you can go and customize it in any way you want. If you want to know more about how to customize this theme specifically, we actually have a course in the lynda.com library that covers just that.

It's called "Start with a Theme: Twenty Fifteen", and it goes through all of the different customization options you have with this particular theme. The next theme I found that works really well is called Saga, and it was made by Justin Tadlock, a longtime contributor to WordPress, and he creates really good and solid themes.

Saga is interesting to me because it has really big images and great typography. It also handles things like menus in a different way, you can see the demo right here, and it has some extra child themes you can download if you want to.

If you scroll down to the bottom of the Saga page, you see, here, you have three different child themes you can install on top of Saga to get a slightly different look. It's important to point out that Saga was built as a blogging theme specifically to tell stories. That's why it's called Saga, which, in Norse, and in my language, means "story". This means, even though we're not using the blog section in this course, if you later want to extend your site and add a blog section, this theme will work especially well.

The last theme I want to highlight is called Radcliffe, and it was created by Swedish designer, Anders Noren. Radcliffe, again, focuses on large images and great, bold typography. Just like Saga, it has this modern quality to it that really makes it stand out. In this course, we're gonna be using Radcliffe as our theme. However, because of the structure of the course, you can just as easily follow along using one of the other themes, Twenty Fifteen, Saga, or another theme you find in the library. I just think that this theme works really well for the content I have, and I think you'd be happy with it if you chose to use this one, as well.

How to find a wedding wordpress theme

Themes allow us to change the appearance and display of the public face and contents of our WordPress site. Want your site to look a certain way? Find a theme that matches your needs, or build one yourself. The great thing about using WordPress to build websites is that there are so many themes available. Pretty much one for every conceivable need, but that sheer volume of available themes also makes it hard to navigate the landscape, let alone find the exact theme that is right for you. So, when looking for a theme for your site, here are a few things to keep in mind.

1.Make a list of requirements before you search.

This will help you narrow down your options quickly. We've already done this in this project, and it's important to do that every time you're looking for a new theme.

2.Know where to search.

There are hundreds of thousands of themes out there, and not all of them are published by reputable sources.

3.Be realistic

Third, realize there's a chance your ideal themedoes not exist. You have to be willing to either compromise or spend the time and money it takes to build a custom theme that is unique to you.

4.Read the documentation

Most themes allow a great deal of customization, but you have to know how to use them to get the most out of them. For our project, the requirements have already been clearly defined. I want a theme that has a clean and minimalist design. This is the current trend on the web, and especially when you're creating a website for a wedding or other type of special event. It's important to have a clean and minimalist design so that the message on the pages, and also the images, really stand out. Speaking of images, I want a theme that has large images and that puts the content in focus, and I also want large, easy-to-read, and welcoming fonts on the site, because the people that come to the site should feel welcome to all the content and welcome to the wedding,and they should also feel like it's easy to read that content. That also means my theme has to meet the base requirements of all websites today. It has to be responsive, it has to be mobile-first so it's easy to use and navigate on on a mobile device, and it has to follow modern web standards.

The next step is knowing where to look. I am a firm proponent of the open nature of WordPress when it comes to themes. That means that whenever possible, I will look for truly open themes that follow strict WordPress guidelines, and the best place to find these themes is in the WordPress theme directory. You can access the WordPress theme directory on the web at WordPress.org/themes or you can access right from within the admin panel of your WordPress site. Simply go to the admin panel, navigate down to Appearance and Themes, and from here, click Add New, and you have direct access to all the themes that are available from WordPress.org/themes.

From here, you can filter based on popularity, featured status, a text search, or by checking off various tags. Once you find a theme that looks promising, you can click it to see more information and see a preview, which, to be honest, makes most themes look really dull, and visit the theme website to get more information. Installing and activating a theme is done directly from this view. Simply find the theme you want to install, and click the Install button.

WordPress will now download, unpack, and install the theme, and from here you can choose to either live preview it to see what your content will look like with this new theme, or activate it directly so that you can switch it on the front end right away. In addition to the WordPress theme directory, you can also get premium, for-pay themes from theme foundries all over the web. Some of these are great.Others, let's say, they are sub-optimal. Sadly, it's hard for new users to know which is which. Presently, if you're looking for a premium themewith more features, my recommendation is to check out Genesis' and also Carry Dils' courses in the WordPress DIY series. Genesis is well-supported, follows WordPress standards, and has a large and friendly community of supporters. But, I digress. In this course, we'll use a free theme from the WordPress theme directory, and in the next movie, I'll show you which one.

Wordpress design with Underscores starter theme: work with functions.php

In WordPress, the functions and functionalities of a theme are defined in a file called functions.php. Here you'll find the configuration settings for everything from HTML5 support to sidesbars and menus, to enqueuing of styles, and JavaScripts. Throughout the course, we'll be making changes to and adding content in the functions.php file. So it's important to know what's here out of the box. Whenever you open a core file in underscores, you'll notice there are a lot of comments like the ones you see here in grey. This is because underscores is a starter theme, and as a starter theme it gives you clear instructions on what to do and how to use the different components that are packaged inside the theme itself.

That means, any times you come across something new in underscores and you're wondering why it's like that or why it was done, there's usually an explanation in the form of a comment that tells you either what file you're currently looking at, or what this particular function is doing. And as you start adding new functions and functionalities to your own theme, you should also add in equivalent comments to explain what is going on for future users. Off the top, we start with a large function called popperscores_setup. This is the core setup function that adds theme support for all the different elements that we're going to use in this theme.

And any time you create a new WordPress theme, you always create some form of setup function that triggers whenever the theme is called, and sets up all the necessary functionality. Off the top of popperscores_setup, we load the theme textdomain. I've talked about this previously, it's what allows us to translate strings within the theme. The text domain is popperscores, and any translation files would go under the languages folder inside our theme. Next we add theme support for automatic feedlings, and the title-tag so WordPress handles that all for us, and we don't have to worry about it.

Then we have theme support for post-thumbnails, also known as featured images. So if you want to see the featured image functionality on the back-end of WordPress, you need to make sure you have that theme support added. We also have register_nav_menus, which is an array of different menus that are available on the WordPress back-end. Right now, we just have one, with the machine name primary, and the human-readable name Primary Menu. If you want to add additional menus, so that means additional locations where you can place menus within your theme, then you just copy this line here, paste it in to the array, and then add a new name, add a new human-readable name, and you have additional menus on the back-end of WordPress.

We'll work with both post-thumbnails and menus later on in the course, so I'm not going to dwell on this anymore here. By default WordPress outputs mainly HTML4 HTML content to ensure there is backwards compatibility for older browsers. However, you can enable HTML5 support for select elements, including the search forum, comment forum, comment lists, image galleries, and image captions if you want to. And in underscores, all of these are activated by default. That means anytime you had an image caption, the image will be wrapped inside a figure tag, and the caption is contained within a fig caption.

If you want to change this back to the old way WordPress was doing things, then you need to remove the support for whatever element you don't want to be in HTML5. You can simply take away a line, it won't be HTML5 anymore. Add it back in, it'll pop up as HTML5. This function here hooks into core WordPress functionality, so you don't have to do anything to the rest of your theme. You simply say I want my captions in HTML5, and they will be in HTML5. Next we have support for post-formats. And here we have a list of currently supported post-formats. Aside, image, video, quote, and link.

Now, post-formats are highly contested in the WordPress community, and I'm not going to cover them in any great detail in this course. But, you have support for these five post-formats already built-in, and you can add more if you want to, or you can simply remove this entire function, if you don't want to have post-formats in your particular theme.

The last element inside popperscores_setup is adding theme support for custom background. This allows the customizer to hook into the theme and change the background color, which is currently set to a default of white. And also background image, if you want to set a default background image.

This function here tells the customizer the user can change the background image or background color if they want to. If you don't want the user to be able to do this, then you simply remove this entire function. Scrolling past popperscores_setup, we have some additional features inside functions.php.

We start off with the content_width setting. Out of the box the content_width for all content in underscores is 640 pixels. That means if you place any embeddable content, like a YouTube video, into a post or page, the max width of that content will be 640 pixels.

That also means that if our design's max width is wider than 640 pixels, then we need to go in and change this value. And we'll do so later on in the course. Directly underneath, we have the function that registers sidebars. Now these are actually widgetized areas, you don't have to place widgets in only the sidebar. Right now we have one widgetized area, it's named Sidebar, and it currently appears in the sidebar. And this function setups not only that the sidebar exists, but also gives it an id so we can call it. It also sets up the HTML that wraps around each widget.

So as we can see, currently, each widget is wrapped inside an aside, and the widget titles are wrapped inside h2s, with the class widget-title. To add style sheets and JavaScripts in WordPress themes, we use a function called wp_enqueue_scripts. It runs every time a page is displayed, and we can use this function to hook in style sheets and JavaScripts only when we need them. Currently, we have the main style sheet enqueued, along with some JavaScripts that help with navigation, and later on we'll be working to add new style sheets, and also new JavaScripts in this function.

At the very bottom of functions.php, we have a series of require statements, that require different files that come from the inc folder inside the theme. This is where we queue up the custom-header function which is contained in its own file. We also queue up template-tags, which is where we contain all the advanced functions for building for our theme. The extras file, which has extras for multisite. The customizer file that calls in all the customizer functionality. And finally, support for jetpack, in case the user is using the jetpack plugin.

Now that you've had a quick overview of functions.php, take some time and read through the entire file, read all the comments, and find out what all these pieces are and what they do. Also, try to disable some of them by simply commenting them out, and see what that does to both the back-end, and the front-end code of your site.

Wordpress design with Underscores starter theme: work with style.css

When building a new custom theme from scratch, it's important to start out right. In this chapter, we're going to set up the core of the theme, including the theme metadata, functions, web fonts, and basic CSS to create a starting point for our design. I always like to start with the metadata to make my freshly downloaded version of underscores truly my own. Now you'll remember when we first created this new custom theme from underscores.me, I input some information in the form on underscores.me. And that information is now stored inside my theme.

To see it, I can go to the back end of WordPress, go to Appearance and Themes. Here I will find my custom theme, Popperscores, is currently active, and if I click on theme details, I get all that metainformation. Here I have the screenshot, which currently does not exist. We will add the screenshot at the very end of this course. And then we have the metainformation. It is the current theme, the name is Popperscores. It is currently version 1.0.0. Now this is the default version you get any time you download underscores. The theme is created by me, Morten Rand-Hendriksen, and if I click on this link, I'll go to the Lynda page for all my courses. And there's a short description of the theme. This information is very rudimentary, and there is more information we can add to the theme and more information we need to augment once the theme goes live. So let me show you where all this information is stored. If this is the first time you're working with a WordPress theme, you may be surprised to know that theme details are actually stored in the style sheet. So if we go to our theme, Popperscores, and go to style.css, you'll see here at the very top, we have this metainformation, Theme Name: Popperscores, Author: Morten Rand-Hendricksen, Author URI, my URI, Description, and so on.

What you'll also see is that some of this information needs to be updated. The theme URI, for example, is currently pointing at underscores.me and that's because we had no fields to insert that information. Here I'm going to provisionally change it to lynda.com so it points to the course library, and later on, when I finish the theme and publish it on GitHub, I will change this again to point to the actual place where you can find the theme itself. The author information and author URI information is correct, so I'll move on to Description. Here I'm not going to put in a longer description right now. I may do it later, but I just want to point out, that this description field allows you to put in HTML. So you can put in block quotes or links or whatever you want in this field. Just remember to mark up your HTML properly. The version number from underscores is always 1.0.0. And for a new theme, I don't think that makes any sense, so I'm going to change it to 0.0.1 and then we'll update it as we go along. WordPress is published under the GPL, or General Public License, and a part of the GPL states that any code that is a derivative off the original works, that would be a derivative off WordPress, so in our case a theme, automatically inherits the same license. Here you can see that the license is specified in the theme, and there is also a URI to the license, in case a user of the theme wants to get more information. That leaves us with these two last items: Text Domain and Tags. The Text Domain is relevant to our course, in that you'll see me use it throughout the course any time I place text strings into my themes. So anytime I want specific text to display in my theme, I will always append the text domain to it using a translation function. This is so that the theme is internationalized, meaning that someone can apply a translation to the entire theme and create custom translations. That way, if someone installs say, a Norwegian version of WordPress on their own site, and want to use a Norwegian version of my custom theme, they can simply create a new translation file that hooks into this text domain and automatically translates all the strings. I'll explain this further when we get to text strings that need to be translated, but just keep in mind that the text domain in our theme is the same as the folder name for the theme, Popperscores. The last item here is Tags, and this only pertains to themes that are going to be published in the WordPress theme directory on wordpress.org. When you publish a theme on wordpress.org, you need to describe that theme using tags like accessibility-ready, or left-aligned, or two columns, or white, or black, or blue, and things like that. Now these tags are restricted, and they're only used on wordpress.org's theme directory. So if you don't plan on publishing your theme there, there's no point filling in tags. That's all the information you need for the metadata. This next section here just describes what the theme is, the fact that it comes from underscores.me, and that we are normalizing styles using code created by Nicolas Gallagher and Jonathan Neal. Now before we move on, let me just quickly draw your attention to the table of contents. You see, the styles in underscores are very sparse, and they're laid out in a very logical way so they're easy to work with. And as we work through the course, we'll be adding more content to the style sheet, and therefore more content to the table of contents. The table of contents makes it easy to navigate through the style sheet. And here you can see that everything is laid out in a nice and logical way. I want to draw your attention to three specific things within the style sheet and show you how to navigate it using this table of contents.

The first thing is Elements. So if we search for Elements, you'll see we first get the hit on table of contents, and when you click next, you'll go to Elements themselves. Here you can see that both the HTML wrapper and all content within your page has box-sizing set to border-box. That means any time you're adding padding or borders to any content using CSS, the container itself does not grow. Instead, the space for the contents within the container shrinks. This is a setting that overrides the default setting in most browsers, and it's a common thing to do on websites these days. However, if you're used to working the other way and you want to get rid of it, this is where you would do that. Next is accessibility. Accessibility is one of the core tendons of the web, and any time you build a website it needs to be fully accessible. The theme we're going to build in this course will be fully accessible and meet all the WordPress accessibility standards. And I just want to draw your attention to this particular class here, called screen-reader-text. This is a class that's required in all WordPress themes, and it allows the theme developer to quickly hide text from visual browsers, so a browser that you would see on a screen. That way, you can put text into the theme that is only available if you are using a text-to-speech browser, or some other form of communication. That way you can create a button that just has an arrow, but if you use a screen reader, it would read out the actual button name and so on. So anytime we're hiding text in this course, we'll be using this screen-reader-text class. And you'll see that happen several times. Finally, take a look at Alignments. These are the classes that are used to left, center, or right align images in WordPress. And we're also going to use these same classes to align block quotes later on in the course. It's important to know that these already exist, and know that they have a standardized format. Because when you go and look at your theme unit test data, you'll notice that even though the theme overall is not styled, there are some things that have styles and those include image alignments. And here you'll find those styles. Before we continue, I want you to open style.css, make the changes to the metainformation to fit with your custom theme, and also take a look at the table of contents and the styles that are in style.css right now. That way you'll have a better understanding of how the style sheet is structured before we continue.

Overview Underscores theme

With the template hierarchy fresh in mind, let's take a look at the structure of Underscores. Underscores is an advanced theme that follows the latest web and Wordpress development standards, and it uses DRY development practices aggressively. It is also in constant development, so what you see in this course may not perfectly match the current state of Underscores, but all the examples and techniques used in this course can be used regardless of when you downloaded a fresh version of this starter theme.

 index.php for the main blog page, single.php for single posts, page.php for single pages, archive.php for all archive pages including categories, tags, and author archives.


The search results page, search.php, the error page, 404.php, and then we have the main elements, header.php, sidebar.php, and footer.php. The themes also has five folders, inc, js, languages, layouts, and template-parts. Of these, we'll be focusing on inc, which has extra template functions and features, js, which holds all the JavaScripts, and the template-parts folder, which contains the content loops, content-none.php, content-page.php, content-search.php, content-single.php, and content.php, which is used by index pages. From here on out, we'll be working with these existing files, add more files and remove others. Underscores is a starter theme in the truest sense of the term, and what we do with it and where we take it is entirely up to us, so let's get cracking.

design wordpress theme: Understanding the WordPress template hierarchy

Now that you know how the different templates in a theme are stitched together using different modules, I'm sure you're wondering how WordPress knows which template to use for what content and how you can identify which template is currently being used for what you are looking at. This is all controlled by what's known as the WordPress template hierarchy, and it looks like this. Every time you visit a page on a WordPress site, the application works with the database to figure out what template file will be used. The process starts on the left and ends up on the right, and the first appropriate available template in the theme is selected for each page.

So, if you're visiting a single post and your theme has a template file called single.php, that template file is used. Here's how that process works step by step. You visit a page and WordPress needs to know what type of page this is. The page is identified as a singular page,meaning it can be either a post or a static page. This is a post, so now we have to find out what type of post it is, either an attachment, a custom post type, or a standard blog post.

It's a blog post, so now WordPress looks for the single-post.php template in the theme. When it can't find single-post.php, it looks for single.php instead. And, if it can't find single.php either, it would default to index.php. In fact, no matter where you go on the site, if no template is available, WordPress will always default to index.php. Knowing how to use the WordPress template hierarchy means you can quickly identify what template is being used for a page or post or index page on your site.

It also means you can create custom templates that kick in for specific scenarios. This works the same way in child themes as it does in regular themes. Looking at the template hierarchy, you notice that for categories, you can create custom template files for individual category slugs or IDs. You can have custom, single templates for custom post types, you can create various custom templates for your front page, and the list goes on and on. As we start working with individual templates in this course, I urge you to go back and check this diagramevery once in a while to figure out what's going on and which templates we are currently working with.

Show Current Template

This will also give you a better idea of how you can take what we're doing and expand it to more custom templates and custom situations.To help identify the templates we are currently working on, we'll also use a plugin called Show Current Template, and I want you to install that plugin right now. Show Current Template is available from the WordPress plugin directory. You can find it by going to Plugins, Add New,and search for Show Current Template, and then when you find it, simply install it into your site.

Once Show Current Template is activated,and you go to the front page, you'll see we get a new feature up here in the WordPress toolbar that shows us what template files are being used for every individual view you're on.

So, right now, you can see on the index page, we are using footer.php, functions.php, header.php, custom-header.php, and so on and so on and so on. And at the very top, it says Template relative path: themes/popperscores/index.php. That means this is the main template and all these other files are being called in by that main template. We can go to a single post. Here again, we have Template: single.php, and if you hover over it, you see a full list of all the different files that are being called in by this particular template.

This will become really useful as we start creating custom template files to make sure that things are being called in correctly and I encourage you to use this feature to understand how everything fits together within your theme as you build it. Before moving on to the next movie and whenever you're planning to build a new template or wondering what template is currently displaying your content or why that template is currently displaying your content, go check out the Template Hierarchy page at developer.wordpress.org. This page will always be up-to-date with the latest information about all available templates in the hierarchy and it also contains this useful graphic.