1.2 Planning the Template
In this lesson we’re going to create a rough plan of what our documentation template should contain. Let’s begin.
1.Introduction2 lessons, 14:26
2.Designing the Template9 lessons, 1:36:08
3.Writing the Markup6 lessons, 1:06:01
4.Writing the CSS9 lessons, 1:42:34
5.Conclusion1 lesson, 02:03
1.2 Planning the Template
Every project needs to start with a plan. It's just gonna make things a lot easier for you in the long run. You spend a little bit of time in the beginning laying things out, making notes just making a structure of the project you're building. That's especially true in the case of a web project and it's just gonna help you when you get to the prototyping or wireframing first, then maybe design prototyping. All that good stuff. So, it's gonna be a huge time saver. Now, what I do is I usually write a markdown or a text document where I just outlining the main points of the project and we're going to do exactly the same thing for our WordPress documentation. Now for this, I first began by defining the kind of content that we would have. So I'm gonna say, typical content and I started with a list. First, we're gonna start with an introduction page. Now this will present stuff like, what is WordPress? What is a WordPress theme? What is in the package that the bar receives and so on. Then we have a getting started section. Now this getting started section is all about the preparation. Meaning, what kind of software you need to open the files that were provided. Sketch for the shop. You need a colored bar, maybe you need zipper. If you're gonna host this theme somewhere, then maybe I recommend some hosting services and so on. We also have the information about installing WordPress. So, it's actually a write these down. So preparation, then installing WordPress. Maybe we could include something about version compatibility. Yeah, we tell our buyer to look our theme is made to run with these versions of WordPress. If you're using it with a older version of WordPress, you might have problems. So we're gonna say, version compatibility. What else? Maybe installing the theme. This is essential. We need to have a section in there that tells the user how to install that WordPress theme. And after that, maybe the optional plugins and this should cover the getting started section. After that, we started getting deeper and deeper to the WordPress functionality. So, we're gonna talk about pages and posts. And in here, basically how to add and manage pages and blog posts. Something about menus, sidebars and widgets. And in here, we can talk about how to add and manage menus, sidebars, widgets and also we're gonna talk about custom widgets which are the ones that we made apart or are different from the core WordPress widgets. What else? Maybe let's talk about shortcodes. Of course, this is also optional. If we don't have any custom shortcodes, then we can probably skip this altogether, then maybe aboutpPlugins. Now if we have custom plugins, we also need to document those. And then comes a very important section, which is theme customization. We need to I explained to the user how to customize his theme. How to change colors, fonts. How to change the layout of the pages, stop playback right. So, we have a new section called theme customization. And in here, we can talk about maybe setting the home and blog pages and maybe working with the theme customizer. Of course, you can add your own sections here. Then maybe another optional page, that's for importing demo data. A lot of the WordPress teams nowadays have the option or give you the option to just import the demo data that you saw on the demo sites. And that will include posts, pages, all sorts of content that will take you from a blank WordPress site to one that has a bunch of content. And for some people, this is much easier than just starting with a blank Canvas. After they import that contents, all they need to do is modify the text, maybe images and so on. So again, this is another page that we need to include and then we have some additional pages that we can use. One will be for credits and please notice that this is not necessarily the final order of the pages, it's just the order that these pop into my head. So, credits may be some tutorials. And tutorials can be used, for example, if you have the same question being asked over and over again. Instead of just answering that in a frequently asked questions page, maybe do a tutorial about it. Because it's a problem that people have, a lot of people have. So, it would make sense to do a short written or a video tutorial about it. Therefore, we have a dedicated tutorials page. After that, what else? Maybe a frequent questions page and what else? Maybe a changelog page and then we also need, definitely need a support page. And support will contain the instructions on how to get support for the theme, basically. And that's really the typical content that I would imagine a WordPress theme documentation should have. Now apart from laying out this page structure, what I also do is try and picture kind of the structure of the pages themselves. Meaning, I have a header. I have a sidebar, main content, footer and so on. Again, this is just an outline. Some of the ideas that I write here may or may not end up in the final product, but it's a good place to start. So, page structure. And for page structure, the way I imagine things is we have three kinds of pages. We have the landing page or the home page or the index page, however you wanna call it. It's the page that you open first when you open a documentation and that page should really contain an index of all the section, and subpages that you have in your documentation. So, let's start with that. I'm gonna say, index page. Now for the index and actually for all the other pages, there is a common element which is the header or the top bar. And that top bar will contain the logo and it will contain kind of a navigation menu that will allow you to switch between the documentation and the rest of the, lets call them non-documentation pages like support, credits, change log and so forth. So for the index page, I'm gonna start with a top bar that has logo + nav. And then we need to have a page header to tell us, look, this is the documentation for theme X or whatever your theme's called. And then we need to have the index, I'm gonna call this content index. And finally, a footer. Now, the footer should be very simple. It should have the copyright information, some social media icons to your social media channels and also a couple of links to places that don't really belong in the main header or in the main navigation of the website. For example, a link to purchase the theme just in case you have the documentation online and people stumble upon it and they decide to buy the theme. Maybe to a theme demo, maybe to watch your profile on marketplace like ThemeForest, for example. The idea is to have a section for, let's call them secondary links. So I'm gonna say, copyright, social icons and secondary links. Okay, great. So, that's for the index page. The second type of page will be an article page and the article page contains content strictly related to documentation. Strictly related to these pages that I just highlighted. So credits, tutorials and these three should have their own separate template. So for the article page or pages, the structure will be a little bit different. Because on these, I want to have a sidebar on the left side. Giving me all the structural, the tree structure, the documentation. Meaning, the pages that I just showed you earlier. And on the right side, I want to have my main content. So I'm gonna say, left sidebar with maybe an accordion menu and then we have the content. And because the content of a documentation can get quite long, we need a system that will allow the user to jump between different sections in the same page much easier. And for that, we're gonna create a secondary sidebar on the right side. That's gonna be fixed and that will allow us to jump in between sections. So I'm gonna say, right sidebar with in-page navigation. And also, the content. We'll have the article content and links to previous, and next page in the documentation. And finally, a footer. And finally, the third type of page is just a, I'm gonna call it a standalone page. And the standalone page is actually very similar to one of the article pages, except it does not have that left sidebar and it does not have the previous and next links at the bottom of the content. So I'm gonna say, similar to article pages, except no left sidebar, no prev/next links. And also, something that I forgot to add here on the article pages. Each article page can have a video attached to it. But that's gonna at the very, very top and that video will also be present on the right sidebar. And the idea is you have a video on the top, explaining everything and you also have the written content down below. And when you scroll down, you no longer have access to that video. But if we also put it on the right sidebar, it's always gonna be there. We just click it and we can play it from there. I'm gonna add here article content with optional video and a right sidebar with in page navigation, and optional video. And also, the standalone pages will not have a video. So we're just gonna say, no video. And really, that's all we need from this planning stage. With this, we can jump into the design software and we can start working on the actual design. Now normally, you would go through wireframing first that's recommended. But since this will be a long course, I'm gonna skip that step. Because we also have to do markup in the CSS. So, we're gonna jump straight into Sketch. We're gonna design the main pages and the main elements not all the pages, because it's just gonna turn this course into a very long one. But we're gonna design the main pages, so we have a strong of a basis to start coding on. With that said, I will see you in the next lesson where we're gonna start with a little bit of color work in typography in Sketch. See you there.