StyledThemes

Celestial Reloaded Introduction

Welcome 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.

Key Features of Celestial Reloaded

  • Built as a true WordPress theme
  • Built on WordPress 3.5/3.6
  • Built on a 12-column grid layout
  • Responsive Design from 320px to 1200px
  • Unlimited Colours
  • Custom Portfolio (1, 2, 3, or 4 columns)
  • Dynamic width Widget groups + two for span columns
  • 22+ Widget Positions
  • Font based Social Icons
  • 2 Showcase Header Styles
  • Styled Blog Comments
  • Layers Slider template
  • Widgetkit Slider template
  • Built using HTML5 and CSS3
  • Custom Editor CSS
  • 10 Page Templates
  • 2 Blog Featured Image Layouts
  • Extensive Typography
  • Widgetkit Ready
  • WP Gallery Ready
  • HTML Snippets
  • Custom 404 Error page
  • WP Customizer for theme Options
  • Built with Twitter’s Bootstrap
  • Language Ready for Translation
  • Cross browser compatibility

About Shortcodes and Snippets

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. 

The Solution – Although Not Perfect

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.

Inside Your Download Package

When you download the theme, you will get the following:

  • The theme itself as celestial.zip
  • celestial-child – This includes a child theme already setup for you to install
  • extras – this is a folder which contains more folders that include snippets, slider styles, and more
  • css – this is a folder which contains two stylesheets: responsive.css and extras.css 

What Is not Included

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:

  1. Widgetkit – This is a combination plugin with a slideshow included
  2. LayerSlider – This is a paid plugin but is well worth the price for what you get.

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.