Welcome to the Celestial Lite theme introduction...as you go through these setup tutorials, I will be assuming you already know the basics of how WordPress functions and that hopefully, although not required, that you have at least some basic knowledge of CSS and HTML. If you don't, you really should have these skills because at some point whether you are using my themes or others, you may need to make some form of modification adjustment to a page element or style.
Celestial is a theme that was designed to cover a wide range of types of business websites from blogs to full sized sites. To give you an idea, here are some ideal uses:
I am sure there are more but overall the idea is to show that you can use Celestial for a multitude of websites.
What you should be made aware of is that the Free version of Celestial is very limited in features compared to the Professional version which does contain a lot more options and features included. The free one, however, basically gives you the standard WordPress features only.
When you download Celestial, you will get a zip file: celestial_lite.zip which is your theme.
Aside from what is included, there are a few things that are "not" included:
Installing Celestial Lite Theme (Administration Panel)
Installing Celestial Lite Theme (Cpanel / ftp)
With Celestial, you get several options that are built-into the theme to give you the ability to personalize your website by using the available customization features that come with this theme. Normally theme sites code in third party option panels, but I decided to keep to the official WordPress methods by taking full advantage of their built-in customizer (new to WordPress 3.4). To see what the customizer looks like, you can check out the screenshots below:
As you can see in the above screenshot, you get option tabs, each with a series of settings that let you customize your new theme in "real time"...which means as you make a change, you can see the result dynamically in the right side window. The benefit of this is that you can see what something looks like before making it official and live to the public.
Currently WordPress has this setup off the Themes page in the admin on each theme listed. To access the customizer for Celestial, when this theme is active find it here:
If you plan to customize your theme, a Child Theme is highly recommended if you're doing ANY changes to your Theme design. A child theme will function and look just like the Celestial Lite theme before you make any changes, but allows you to modify almost everything while protecting the official Celestial Lite theme you installed. This means if you update the original theme, any changes you made in the child theme will not be affected.
As WordPress states, a Child Theme is a Theme that inherits the functionality of the Celestial Lite Theme also know as the parent Theme, and allows you to modify, or add to, the functionality of parent theme. Another way of describing a Parent/Child theme is:
Basically these are two separate themes, but how it works that the child theme connects to the styles and functions of the parent theme and duplicates the parent theme. Because these are separate themes, when you update the parent theme, the child theme will adopt the new changes, but whatever was changed with the child theme, these won't get overwritten because again, it's a separate theme (separate files). Still a bit confusing but it's why WordPress recommends any core changes to the theme is best done with the child one.
Child Theme needs to be either uploaded via FTP or simply over WordPress dashboard, when the Theme is on your site click activate and that's it.
Whenever the Celestial Lite theme is upgraded, your Child Theme and all of your modifications will be safe and remain unchanged.
Note: I recommend reading about Child themes from the official WordPress.org website here:
To help you get started, I've made a custom blank child theme for Celestial Lite which is ready for you to make any changes to your theme. You can find this in the folder "child-theme" in your theme files. You can use the Dashboard Theme installer like you would for any theme, then activate the theme.
IMPORTANT: I recommend to ALWAYS backup your theme before making changes, updating, or to simply keep a backup for those unforeseen circumstances.
I will give you a nice example here on how to make a change to the Celestial Lite theme using the newly installed Child Theme. We can start with changing the main font of our body text from Arial to Georgia. First, our body css looks like this in our style.css file for Celestial Lite:
font-family: Helvetica, Arial, sans-serif;
To customize this and to change the font to Georgia, we ill now open the "Celestial Lite Child" style.css file and we will simply create an override style like this:
font-family: Georgia, serif;
Info: You may notice that I did not add the line-height to the child theme's style.css. This is because we are not changing it, so there is no need to add it.
You are not just limited to css, but you can also modify the layout structure of theme files and templates as well. The child theme includes folders which match what the parent theme has (Celestial Lite) so then what you would be doing is copying the file from the same location in the parent theme of Celestial lite, then pasting it into the child theme (same location) and then make whatever changes you want.
Let's use the default page template with the right sidebar column in our Celestial Lite theme to begin with:
But now we will create a new page template with both the left and right sidebar column, which will add to our Celestial Lite Child theme's "template" folder. Once done, here is a screenshot of our page using a new template that is added to our child theme:
When making any form of change to your theme using a child theme, always make a backup of your original theme for those unexpected circumstances that sometimes happen and beyond your control. A few other helpful tid-bits:
This is a big topic but working with fonts in any theme can be a daunting task for many because people will only see certain fonts in a web page that exist in their own computer...or if the fonts are directly embedded into the web site (page) they are viewing.
Celestial Lite (and the Pro version) uses a couple custom fonts but currently these are not embedded, but linked to an external source of Google Fonts. The demo site for Celestial also uses a plugin called WP Google Fonts which can be used for any custom fonts you want to use.
How you manage your fonts will be up to you but please be aware you should have some HTML and CSS skills to make any modifications because depending on what you want to change, whether headings, titles, slider text, or even menus, the theme's stylesheet is filled with font attributes.
One thing to know about fonts in a stylesheet is that you will often see more than one separated by commas like this:
ubuntu, "trebuchet ms", arial, helvetica
What this means is that the main font in this example will use Ubuntu, but if that is not available, it moves on to the next which is Trebuchet MS (for anyone on a Windows computer), followed by Arial, and if you are on a MAC, then it will use Helvetica.
This is probably the important piece of information to know is what fonts does Celestial use?
From the list above, the two fonts that are custom loaded are: Abel and Ubuntu
Ubuntu is currently coded in the <head> area of the theme's header.php file because at the time, this was not in the plugin's font list but Abel is, so using the plugin will be needed.
There's a lot of font references throughout this theme's css files but to help you out in knowing where the primary font styles are located, here is a quick reference, but please be aware if any updates to the theme may change the location slightly:
You will notice that in the theme css I use both px and rem for font sizes (and some other things). Pixels (px) is an older method of doing a size but the problem with this is that it's a fixed size, whereas rem (some sites will use em) is a relative size which actually works out better in the long-run. I won't go into the technical side of this but here is a quick rundown of what these two are and how and why they are both present.
For standard sizes, I use px, which again is a fixed size. The base text size is 16px which is a default size of browsers. But for the more modern browsers and for relative sizing, I also use rem. So in a nutshell, modern browsers will use the rem, but for the browsers that cannot decipher this value, the px value is there for them.
As I mentioned, 16px is the default browser text size for typical content, but in rem (also em), this will equal 1rem. So here is a little reference for you:
Although this table shows "em" and not "rem", they are almost the same, enough to use the same values of em for rem. So if you see "em" in the table, simply add the "r" to em for "rem". Fun hey!
How did I arrive at these values? There is an awesome tool that you may want to bookmark if you want to play with different sizes:
PX to EM - www.pxtoem.com
Setting up your front page like the live demo site is what this tutorial is about and will apply to both the free version of Celestial as well the Pro version. This tutorial will be written with the assumption you have not setup a "Static Front Page" yet.
We need a special widget for this called "Advanced Text Widget" because it offers additional features that the default WordPress text widget (or any default widget) offers, such as assigning the widget to a location, and also being able to disable the title. If you already have this installed, you can skip to the next step.
<div class="post-thumbnail" style="margin-top:10px; padding:6px;">
<img class="center" src="your-image-path" alt="image description" /></div>
<p>Celestial is a fully responsive WordPress theme for you to enjoy viewing your website in your favourite mobile device. I've incorporated the popular Twitter Bootstrap framework to give you more flexibility whether you are on a desktop or an iPhone.</p>
With Celestial, you get the option of having:
Right now the default logo looks like this:
Celestial comes with two layout styles for your blog which change with one option setting. Whatever layout you choose will be set globally also for your category, archive, and tag layout pages...basically anything related to the blog.
This is what the small blog image layout looks like:
This is what the wide blog image layout looks like:
You also get to select whether you want the left sidebar column or the right sidebar column by selecting this option from the Customizer's Basic Settings tab.
In-line columns allow you to create more layouts than the theme has built-in. They are simple HTML snippets that are like a small mini-template of code that you copy & paste into your content editor (HTML text view) and then replace the sample content with your own. They are also dynamic which means they will resize based on the browser width.
The Demo Website shows how various in-line columns are used, but it really depends on how you plan to use them. They are a little more hands on with code than simply typing into a post or page editor, but they do have their advantages.
Here is an example 2-column in-line set:
To get this in your page, the HTML snippet would be this:
<div class="span6"> <h3><strong>One</strong> Half</h3>
<p>Add your own content here.</p> </div>
<div class="span6"> <h3><strong>One</strong> Half</h3>
<p>Add your own content here.</p> </div>
The demo site will offer the other column snippets:
WordPress offers several default post formats, as quoted from their website:
Celestial offers 4 of the above:
How you use these will be up to you but for the Celestial theme demo website, I created a category for each and then made my posts. I then created menu links to each category and added it to my main menu.
To get the same or similiar style and functionality of how I implemented the 4 post format types, I used one particular plugin called "Simply Exclude" which is something I think all sites using WordPress should have. It allows you to exclude many things from posts, to pages, to categories, and more from different locations in your site.
For my information about this plugin, you can read more about it here:
Note:At the time of releasing this free theme, Simply Exclude was not ready for WordPress 3.5 yet, so you may want to follow up with the developer of that plugin.
Drop caps are usually used as a decorative element at the beginning of a page or paragraph, but can sometimes be used as a form of a unordered or ordered list style. For Celestial, the drop cap styles are:
The code for using drop caps is:
<div class="dropcap dropcap-grey">1</div>
<div class="dropcap dropcap-green">1</div>
<div class="dropcap dropcap-blue">1</div>
<div class="dropcap dropcap-yellow">1</div>
<div class="dropcap dropcap-red">1</div>
You can use drop caps creatively like the screenshot above. The code to get the columns with the drop caps looks like this:
<div class="dropcap dropcap-grey">1</div><h3 class="dropcap-indent"><strong>Span</strong> 4</h3>
<p class="dropcap-indent">Your content would go here.</p></div>
<div class="dropcap dropcap-green">2</div><h3 class="dropcap-indent"><strong>Span</strong> 4</h3>
<p class="dropcap-indent">Your content would go here.</p></div>
<div class="dropcap dropcap-blue">3</div><h3 class="dropcap-indent"><strong>Span</strong> 4</h3>
<p class="dropcap-indent">Your content would go here.</p></div>
One of the best features of Celestial (and my themes) is that you can modify the colours of almost every element within your page(s) with a colour selector that is already part of WordPress. I simply added more colour selector fields based on what elements you can change to suit your own preferences.
Most people know you can use the standard WordPress gallery shortcode to make a gallery in a post or page, but the styling of it is at best, basic. Celestial takes advantage of the Cleaner Gallery plugin by Justin Tadlock, in combination with the WordPress shortcode...and a little bit of Celestial styling.
NOTE: To view the images in a lightbox, refer to the "Add a Lightbox to your website" setup tutorial which uses the Lightbox Plus plugin. With the Cleaner Gallery, a popup window will look like this:
Although when your pages have a lot of content, they will stretch the browser downward, but for shorter pages, you can have a page background of a:
WordPress has another feature for Backgrounds which Celestial is taking advantage of. The main setting for your background is found on the Appearance menu in your dashboard admin area, but the WordPress Customizer also loads your background option.
By default, Celestial has a black page colour background, but you can change this.
Adding a Photo is simply done by clicking on the "Choose File" or the "Choose Image" button if your image is in the Media Library. You can then choose if this image will need a background colour or if you need it to tile (repeat).
We have attached some screenshots with explanation, we hope it will help you to use the "Read more" tag.
Firstly please write some text in page/post and we have given example of post here:
There are a couple settings made available to you when you use a slider or Photographic banner in your Front Page, Pages, or Posts:
For example, the screenshot shows a page banner being used but it has top and bottom blue bars showing which are actually the banner showcase background colour and padding. Default padding is set to 7 pixels but you can change this to your own preference.
Note: This is a global setting so whatever you choose here will also affect any other banner images you have set on posts or pages.
The front page showcase banner also has a padding setting under the "Header Image" tab as well, but default setting is set to 0px. If you decide you want padding, you can change it. However, for best visual appearance, I recommend leaving it to 0.
Similar to adding a photo or slider to your front page tutorial, this one simply goes to a different sidebar position of "Page Banner".
For Photos: Prepare your photo before you upload it to your Media Library with a recommended 1920 x 225 size for those with large monitors.
For Sliders: You just need your shortcode available
Note: Make sure you have the "Advanced Text Wdget" plugin installed because this is a very flexible widget that lets you disable the title output plus you can select where you want your widget to show in your site. In this case, we will be saying "Pages".
<img src="/your-image-path" alt="My nice Photo" />
If all goes well, your site "pages" will look like this:
Please be aware that this page banner tutorial will display your photo on "all" pages. If you need more control of what pages or posts you need this photo on, you will need to use a plugin like "Widget logic" which adds a text field at the bottom of every widget. It allows you to use WordPress Conditionals to display each widget on a specific page or post by name or ID. For example:
If you have a page called "Services", then your conditional would be: is_page('services')
If your page called "Services" has an ID of 21, then your conditional would be: is_page('21')
You can read more about WordPress Conditions here: Information
Adding a photo or a Slider will be very similar to each other because you will be using a widget for this. When using or needing a widget to display a header image or anything that you do not want the title to show, I recommend installing the "Advanced Text Widget" for this theme.
For sliders, you will want to make sure that the slider is "Responsive" for best results, although not required. You will also want to make sure that the slider comes with Shortcode so that you can add this to the widget. Photos are easy enough because you simply upload and use some easy HTML code to get the photo to show.
For a Photograph, make sure you have this already because you will need to upload it to your Media Library. I recommend you crop and finalize your photograph in your preferred image program like Photoshop, Elements, or other. For sizing, I would recommend the following sizing:
Let's get started...
<img src="your-image-path" alt="My Nice Photo" />
Note: If you are using a slider shortcode, instead of adding the image path into the text area, you would paste the shortcode instead.
The Demo Slider: In case you are wondering what Slider I am using on the Celestial (Professional version) demo website, it's the "Responsive Slider" by AlienWP
When all is done, your front page should now look like this:
WordPress comes with a "Header" feature built-in, although the theme used needs to have this activated, Celestial has this available to you. Generally this allowes you to upload and crop your own header photo or graphic. You can even have this rotate more than one photo. Although not totally flexible where you have this load in a page, this one is set for the Front Page only in Celestial.
When using the WP Header option, your front page would look like this:
You get a nice big image showing up with a curved graphic overlay which is designed for the front page only. I recommend you opt in for images that are at least 1920 pixels wide to ensure those with big monitors will get a great looking photo that has good quality sharpness. You will get an automatic setting for the height also set to 340px but you can drag the bottom of the cropping window area downward to increase the height if you want it to be bigger....
When you first install Celestial, the free version, you will find that you get a sample showcase banner showing on the front page. This is just used for display purposes, but you can disable it if you want to start using the WordPress custom header feature. Currently this sample banner is setup so that once you drag a widget into this Front Page Showcase sidebar position to use your own image, the sample one will automatically disappear.
However, if you want to use the WordPress custom Header option, this works slightly different and means you have one extra step to perform...
Now your demo banner will be gone and you can proceed to the WordPress Header settings, or if you prefer not to have any banner or header showing, simply move on to continue setting up your new website.
Celestial Lite offers list styles (bullet lists) to give you more than a simple dot. To see the Celestial Lite list styles in action, you can check out the live demo for this theme here:
All you will need to do is apply a class to your <ol> when making lists, with the exception to the "Default" style which will just be a numbered list.
<ol> This is the default list, no class needed.
<ol class="decimal-leading-zero"> This will give you a numbered list starting with zero (0) until it reached 10 or more.
<ol class="upper-alpha"> This will give you a list with Alphabetical letters in uppercase.
<ol class="lower-alpha"> This will give you a list with Alphabetical letters in lowercase.
This is also done by adding a class to your <ul> when making lists, with the exception to the "Default" style which will be dots.
<ul> This will be your default list style, no class needed.
<ul class="square"> This will give you a list style of small blocks (squares).
These are list styles that are unordered and uses an image (actually an image sprite) to achieve the various lists that you seen on the live demo site.
<ul class="list-arrow1"> This will give you the arrow style 1
<ul class="list-arrow2"> This will give you the arrow style 1
<ul class="list-arrow3"> This will give you the arrow style 1
<ul class="list-arrow4"> This will give you the arrow style 1
<ul class="list-circles"> This will give you the arrow style 1
<ul class="list-starburst"> This will give you the arrow style 1
<ul class="list-checkmark"> This will give you the arrow style 1
You will be adding one additional class to your <ul> lists like this example for the "list arrow 1 with the yellow colour" style:
<ul class="list-arrow1 list-yellow">
In addition to the default colour, your other available colours are: