Building A Website: Part 1
Setting Up The Default Layout
Main Topics Covered
When you first start building any site, the first thing you want to do is to set up the default layouts. This involves setting up what the navigation bar and header will look like, what the layout of your pages and posts will be, and what features will be present on them. All of these setting can be changed anytime and can be overridden on each individual page, but it is always smart to set up your default look first so when you look at anything you always see a vision of the final product. Furthermore, you want to avoid overriding these setting as much as possible because not only is it more work but it is important from a UX and branding perspective to be consistent in the layout of your pages. Anyway, let’s get to setting up the layout. For us, using Themify Ultra, all of this will take place within the ‘Theme Settings’ section of the ‘Themify Ultra’ tab.
Setting Default Page Layout
For our website, our main pages will be our homepage, our course pages, an about page, and then there may be a few others that we decide we may need as we progress through our site design.To set the layout for pages first navigate to the ‘Default Page Layout’ section ‘Default Layouts’ tab.
As shown above inside this section you can set what kind of sidebar you want on the page, whether to hide the page title & the featured images, and whether or not to allow and display comments. For our web school (and pretty much any other site I build) I don’t want to have a sidebar on my pages. They can be tastefully done, but I personally think it clutters up the page and the majority of the time it’s a business using it for advertisements. We want a clean full width page, so we are going to go ahead and select the no sidebar option. Besides that, we are going to go ahead and hide the page title as well as disable comments in all pages. We will be totally customizing our page layouts and while we may decide we want the page title on our pages we can include that when we customize our header later on, we won’t have any featured images so we can leave that alone, and we don’t wan’t people to comment on our pages.
Setting Default Single Post Layout
For our site our posts will primarily be our class pages where this and all of our actual content sits. In fact I currently can’t think other pages right now that we will need to make posts except for maybe the community forum, but hopefully we will be able to find everything we need for that from a plugin. Either way, to set the layout of our posts click the ‘Default Single Post Layout’ tab.
This looks very similar to the pages section but with a few more options. Again we want our class pages to be full width, so we are going to go ahead and select no sidebar, let’s also keep the classic post layout, hide the post title, hide the post meta, hide the post date, and then click to show only posts in the same category. We may come back here to change things later but this should give us a full width page to show our class content while also only showing relevant classes at the bottom of the page and allowing students to comment. Addtitionally, just like our pages we will put the page title in ourselves when/if we make a customer header for our posts.
Setting Default Archive Post Layout
When it comes to the default archive post layout, we actually don’t want people to land on this page. What it is is is essentially a repository for all of the posts you have created on your site. It is default with WordPress and we won’t be able to get rid of it. It is great for blogs and other websites where you would want a user to be able to look through all of your content, but our posts are our classes and we want users to navigate those in a particular way. Luckily, we can design our site so users won’t be able to land on it. That being said let’s set the page up in case we ever want to use it to allow users to navigate the classes based on category (the course name) in a way we don’t set up our main courses page, which we may very well end up doing.
Go ahead and select the archive post layout tab, and we are going to keep a sidebar for the sake of navigation. Additionally, let’s select the three box post layout structure, box the content, activate the post filter, change the display content to none and hide the post meta. We can always change more on this page but at this point I don’t even think we are going to use it. We will probably just end up redirecting any user who happens to land on it to our main courses page.
Setting The Default Header And Footer Layout
A key area that will affect the overall design of your site is where you set your default header and footer layout. In this section you will select what the default navigation bar and footer will be as well as the different functionality on them. Now for our site we will be creating custom headers for our pages and posts, but for most other sites you will use one of the defaults so we will go ahead and go through this section. And the footer section will still pertain to us though we won’t really be messing with anything on it since the default settings are usually fine the way they are unless you want social media links.
So to start setting up the header and footer layouts, click on the ‘Theme Appearance’ tab inside the ‘Theme Settings’ section.
As you can see there are a lot of settings here, and to actually see what they will do we will need to look at a page. So, let’s go ahead and open our ‘Sample Page’ from the pages tab in a new window so we can bounce back and forth and see what the changes we are making are actually doing.
Above the section with “My Wordpress” down to “sample page” is our header, and moving back to the theme settings we see we have ‘header block’ selected for our header design. I don’t really like the look of this so we are going to change it up and select another one. Feel free to click around and check out the different header layouts and see which ones you like. Personally I think the smaller horizontal headers are better and the ones that are collapsed and add some animation to your site are nice as well. We are going to select the ‘header horizontal’ option right now, but as stated above we are actually going to create our own later so it won’t stay this way for long. The reason we aren’t covering this now is it uses some of the more complicated features of Themify that we aren’t ready to get into yet and for 90% of your use cases with clients the standard options here are fine.
That’s much better. However, I still don’t want the RSS feed link and the search feature there. We simply won’t need them and it’s always best to keep things as clean and simple as possible. So back on setting page, let’s go ahead and check the boxes to disable these.
Now let’s see what that looks like.
Good enough for now, and I am happy with how the footer looks as well. This will change some when we set our color scheme too so we will definetly be coming back to this all later. That is something you will notice when designing. You will always be jumping around to change small things as you go.
Minifying Scripts
The last change we will make is to compress our scripts that are on our pages. This isn’t something you need to know a lot about but just know that it is very useful in improving your site speed and is something you should always do if you can get away with it. To compress your CSS and Javascript files go to the ‘Performance and Minified Scripts’ tab and click to enable gzip and the rest should be default already.
