Back To Document ListWelcome to the introduction of the new Celestial theme, renamed as Celestial Reloaded. As I have noted with previous posts and other communications, the redesign of the Celestial theme became a fully on redesign project from the ground up. This means when you install this new version of Celestial, it'll actually be installed as a new theme and not as a direct upgrade to your existing Pro version because of the amount of changes I did.
|
|
|
There is a caveat when using shortcodes and even html snippets in WordPress because in-page elements such as typography based content will lose its structure, layout, and styling, whenever someone decides to change themes. The problem is that shortcodes and snippets are coded in themes along with their styling. So what happens when you change a theme?
You lose your styling!
The new trend to combat this issue is to place all shortcodes, snippets, and styling into a plugin (or plugins). But even this has its problems when you need to make some edits to the styles or worse, the actual php code that makes up shortcodes.
My solution for this theme is to include two separate stylesheets that a person can import into their new theme (whichever theme they install). This way, anything you setup in your pages with typography styling such as drop caps, focus boxes, content columns (in-line columns), and more, you won't lose your styling. There's no php code to mess around with, just basic HTML and CSS. I will cover this in another tutorial.
When you download the theme, you will get the following:
Although the demo site looks great with lots of things happening in it, there are parts that are not included in the download. Plugins are not included because it's best to let the individual to decide what plugins they want, but it also assures that when they are downloaded as needed, you will get the latest version form the developers.
The theme demo site also showcases a couple sliders:
The Widgetkit is free to download, although they offer a pro version as well, but for the demo site, I used the Widgetkit Lite version. For the LayerSlider, this is available from CodeCanyon.net and at the time of writing this introduction, it was $15.
There are at least two popular methods of installing a theme into WordPress:
The first thing you will need to do is to download the theme to your desktop and then unzip the file "celestial-unzip-first.zip" because inside this is your actual theme file.
For most people, you won't be using this method but is available as an alternative.
Using the theme installer that is part of WordPress is the better way because it's easier and definitely faster.
In most cases, themes from developers are often filled with a ton of plugins that are coded directly into the theme. Although great and convenient, there is a major caveat of doing this...several actually:
Some of these plugins will have their own video tutorial for you, and I will go through how to set them up.
With Celestial Reloaded, 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).
With the Customizer, 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.
Available Options
You have several ways to access the Customizer.
If you plan to customize your theme, WordPress and Styled Themes recommends you use the Child Theme method instead of directly modifying the actual theme files. If you update a theme and you made modifications, guess what will happen? Your modifications will be totally lost and you will have to do it all over again. However, if you make your modifications using a Child Theme, then your changes will not be affected whenever you update the original theme (often called the Parent Theme).
As WordPress states, a Child Theme is a Theme that inherits the functionality of the Celestial Reloaded Theme also know as the parent Theme, and allows you to modify, or add to, the functionality of parent theme. But for a different view of what a Parent/Child theme does:
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.
This video will get you started by installing the child theme for Celestial Reloaded. The child theme is now included with the theme and can be found in the folder that you unzipped the celestial-unzip-first.zip file to your computer.
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:
| 6px | 0.375em | 37.5% | 5pt |
| 7px | 0.438em | 43.8% | 5pt |
| 8px | 0.500em | 50.0% | 6pt |
| 9px | 0.563em | 56.3% | 7pt |
| 10px | 0.625em | 62.5% | 8pt |
| 11px | 0.688em | 68.8% | 8pt |
| 12px | 0.750em | 75.0% | 9pt |
| 13px | 0.813em | 81.3% | 10pt |
| 14px | 0.875em | 87.5% | 11pt |
| 15px | 0.938em | 93.8% | 11pt |
| 16px | 1.000em | 100.0% | 12pt |
| 17px | 1.063em | 106.3% | 13pt |
| 18px | 1.125em | 112.5% | 14pt |
| 19px | 1.188em | 118.8% | 14pt |
| 20px | 1.250em | 125.0% | 15pt |
| 21px | 1.313em | 131.3% | 16pt |
| 22px | 1.375em | 137.5% | 17pt |
| 23px | 1.438em | 143.8% | 17pt |
| 24px | 1.500em | 150.0% | 18pt |
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>
<h3>Fully Responsive</h3>
<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 Reloaded, you get the option of having:
Setting up your logo or site title is quite easy. By default, the theme uses the text based title and site description, but if you want to use your own logo, here is a video to take you through the above steps:
You get three (3) layout styles for your blog along with a few options with Celestial Reloaded. For instance, you can have a left or right column (sidebars) blog layout and you get a full width (no sidebar columns) option.
Once you decide on how you want your blog to look, you also get the choice of using a full sized featured image or a small image. To give you an idea what the image style sizes look like, I've provided a couple screenshots below:
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="row-fluid">
<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>
</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>
For Green:
<div class="dropcap dropcap-green">1</div>
For Blue:
<div class="dropcap dropcap-blue">1</div>
For Yellow:
<div class="dropcap dropcap-yellow">1</div>
For Red:
<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="row-fluid">
<div class="span4">
<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="span4">
<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="span4">
<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>
</div>
This video in this series provides an overview of how to change the colours of different elements within your website when using the Celestial Reloaded theme. When changing colours, you can get virtually an unlimited array of colour combinations so that your site can look different from others that might be using Celestial Reloaded.
This video in this series provides an overview of how to create a WordPress Gallery using the gallery shortcode. This is actually a feature that is part of WordPress, but what I did with Celestial Reloaded is change the default styling for the gallery to be a little more pleasing to the eyes. To see what we will be making here, let's take a look at the demo site's gallery:
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:
This video in this series provides an overview of how to setup the Widgetkit slideshow that you see on the live demo front page. This is a free plugin that you can download and install with custom styling that I provided in the theme download package you got with Celestial Reloaded.
This video in this series provides an overview of how to setup the LayerSlider like you see on the Optional LayerSlider page of the Celestial Reloaded demo website. Please note that this slider plugin is not part of this theme, but it is an option you may want to consider because of it's capabilities and responsive features, but having the different layers slide in and around is a nice showcase feature to have! Also, please note that this is a commercial plugin which means it's a paid to download plugin, but well worth it. Here is a demo of it in action:
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:
The most annoying thing with WordPress is that they have a set group of dimensions for images already in place when you install WordPress. What happens when you upload a photo, you will get several thumbnail sizes created automatically - whether you want them or not. This is a major problem for many because eventually your host server will get filled with unused images which take up a lot of server disk space.
You don't see all your thumbnails except just one in the Media Library of your site's admin. But, if you were to go to your "uploads" folder through your FTP, you will get a shock of your life when you see how many images are there.
So...before we continue on with setting up Celestial Reloaded, we will change the default settings of WordPress so that this does not happen to us. But please note that this is optional and not required, but more of a recommendation.
By doing the settings above, we will have all images in one folder and only and only one copy of each image we upload (the original).
RECOMMENDATION:
For any site, I would recommend cropping and sizing your photos as you need them before uploading so that you have full control over how your photos look and manage file size as well with optimization. I generally don't set any dimension in the Media Settings because of my preference to do my own thumbnails. Much more control that way.
This video in this series provides an overview of available page templates that comes with the Celestial Reloaded theme. There are several templates that are setup to give you a variety of layouts, some are created for a website's front page, but you can use these inside your site if you wish.
Available templates are:
Most people nowadays use WordPress for more than just a blog, so it also means you will more likely want what WordPress calls a "Static Front Page". Normally when you install WordPress, the blog is the default front page where you will see your posts show up, but what if you want something different there? This is where the static front page comes into play and the blog is therefore moved into the site.
You can read more about the Static Front Page here:
This video in provides an overview of how to setup a "Portfolio" just like the Celestial Reloaded theme demo website that takes advantage of categories and posts without the need of a portfolio plugin:
This video in this series provides an overview of how to setup a Recent Posts widget with thumbnails like the Celestial Reloaded theme demo website displays on its blog page. The widget is a plugin called Recent Posts Plus and offers many features that you can customize how the widget looks. Here is a demo of it in action:
You can change the template layout of your widget how you want it, but to make it easy for you, I've provide you with the code that the demo site uses. You will find this code snippet in your original download for Celestial Reloaded and in the snippets folder called "Recent Posts Plus".
You will be selecting category ID's to display recent posts from by using this code in the WP_Query Options field:
{
"cat": "5,10,11"
}
This video in this series provides an overview of how to create a custom gallery using a plugin called "WidgetKit". WidgetKit comes in two flavours, a Lite version (which is what we will use) and a full version which is a paid plugin. This widgetkit is of course optional, but because I am displaying it in the live demo, you may want to use this instead of the WordPress Gallery. To see this custom gallery in action, you can check out the demo website here for Celestial Reloaded:
We will have some work to do here to get ourselves ready to build our special custom gallery. What I will do here is post a couple snippets of code that we will be using, although editing to our own needs, primarily the paths to our images.
To Add a Spotlight to a Thumbnail - We need this code to the <a href> like this: data-spotlight="on"
To Add a Lightbox to our full sized Photo - We need this code added to the <a href> like this: data-lightbox="group:mygroup1; titlePosition:inside"
So for an example, our linked thumbnail may look like this:
<a title="Your Title" href="http://link-to-full-image.jpg" data-spotlight="on" data-lightbox="group:mygroup1;titlePosition:inside">
<img alt="Lightbox Image" src="http://path-to-thumbnail.jpg" /></a>
This video provides an overview of available HTML code snippets that comes with the Celestial Reloaded theme. There are several snippets to choose from, but basically these are available instead of using shortcodes which are a little more difficult to manage if you ever need to make any modifications. With HTML, you can easily make changes with just a basic understanding of it, including CSS.
Available Snippets:
This tutorial will take you through the process of being able to disable widget titles without having to leave the widget title field empty. This comes in handy when you are loading an image, such as a header, or slider, into a widget position where you do not want a title showing.
This video will show you how to get a header Google map showing, just like the live demo site of Celestial Reloaded has on its Contact Page:
This video in this series provides an overview of how to setup a "Contact" page just like the Celestial Reloaded theme demo website. We will need a plugin called Contact Form 7. This is what we will be making:
This video in this series provides an overview of how to create a "Call to Action" notice on the front page of your website when using a widget based page template such as the front page of the live demo site is using. You can see this at the top of the page content, titled as "From Blogs to Business Websites" with some text below the title: