Starry Documentation

Informations :

January 2015

Requirements :

Wordpress 4.0 +
Installed & Updated (It's not that hard to click on the "upadate" button ;))

Thank you !

Thank you for purchasing our theme. If you have any questions feel free to open a ticket via our Support center.

Set Up It's easy !

There is many ways to install a Wordpress theme, we are going to take a look to the easiest one here. (More Informations)

  1. Login into your fresh Wordpress installation, once in the dashboard :

Customize Your own way

To customize starry we will talk about 3 different things :

  • Appearance (layout, color, fonts...) :

    Most of the settings for this theme are located in the "Appearance" -> "Theme Settings" tab. You can change here, many settings about the design and some content such as the text ticker, extra footer...We will not describe here every fields. But you have to take some time to choose the best options for you. (Note : we do not use the theme live customizer in this theme, all is centralized in the theme settings tabs).

  • Content :

    As you may know, all the content is managed by Wordpress. The theme uses mostly the pages but also some custom post types. You'll find in this documentation all the informations to fill them in the right way. (Use the menu at the left).

  • Functionalities :

    All the functionalities of the theme are managed by Unyson Framework, more informations here :

Image sizes

We advise you to use the same format/size and color (something similar at least).

  • Main Logo in the header : light color (will be on dark background) : 318 × 70 PNG
  • Logo in the fixed header : dark color (will be on white) : 318 × 70 PNG
  • Logo in the footer widget : light color (will be on dark background) : 318 × 70 PNG
  • Team memeber profile image : 300 x 300 JPG OR PNG
  • Partner profile image : 300 x 150 JPG OR PNG
  • Portfolio project image : 800 x 600 JPG OR PNG

Create Page Basis

This is just some informations to create a simple page with Starry:

  1. Wordpress Dashboard, Pages -> New Page :

Portfolio & Skills Post Types


Portfolio is a custom post type, it means that you'll have to create a Portfolio post for every project and then you'll have 2 ways to display them in the theme. All is explained below. (You can click on the images below to have a better quality)

Creating a project

Portfolio Page

Portfolio Shortcode


It is the same that for the portfolio, take a look on your left.(You can click on the images below to have a better quality)

Creating a skill

Skills Page

Skills Shortcode

Team & Partners Post types


Team is a custom post type, it means that you'll have to create a Team post for every teammate and then you'll have 1 way to display them in the theme. All is explained below. (You can click on the images below to have a better quality)

Creating a teammate


It is the same that for the team, take a look on your left.(You can click on the images below to have a better quality)

Creating a partner

Partners & Team Shortcodes

Shortcodes & Page Builder

All the shortcodes are managed by the Unyson > Pagebuilder extension. So you can easily drag and drop them easily (You can see examples about many shortcodes here). You can also find examples of the page builder just above in the Page section. Note than Highlight & Dropcap shortcodes have to be used directly throught the Wordpress editor.

Home Page

  1. Create a new page in Worpdress
  2. Call it Home or anything you like, the title will not be displayed
  3. Fill in the content with the Page Builder
  4. Publish it
  5. For the header (single image, video, slider, text ticker), go to Appearance -> Theme Settings -> Home Page (All the options are here)
  6. Assign your page as a Home page :

Revolution Slider

If you prefer to work with the Revolution Slider, You can find the plugin in ASSETS/ Install and activate it in Wordpress. Then, create a new slider and call it home. Set the layout as full screen and force the full width :


Don't forget to enable it in the Theme settings -> Home -> Use the Revolution slider ? -> YES

But for now you'll just be able to set images but the controls and links are not available (z-index issue). So if you want to use the controls of the slider and the links inside the slider, please be sure that (the following settings are available in the theme settings):

  • The Text ticker is disabled
  • The shadow is disabled
  • The animated pointer is disabled

Blog Page

  1. Create a new page in Worpdress
  2. Call it Blog, leave it blank
  3. Publish it
  4. Assign your page as a Blog page :

Contact Page

  1. Create a new page in Worpdress
  2. Call it Contact
  3. Fill in the content like that :
  4. For the form, be sure that you have set your email address in the Theme settings > Contact tab

One Page Website

Regarding the installation, this is exactly the same thing that for a multi page website (see #HERE). You have to fill in the custom post types associated to the content of your pagestrong> (i.e : if you want to display the portfolio projects, be sure that you created projects with Portfolio post type or if you want to display the staff members be sure that you created a staff post type for every member before etc...).

Content of your one page website

Create a page in Wordpress and call it Home (or anything else you like). Edit with the page builder (be sure the Unyson extension is enabled).

(IMPORTANT : Wrap all the content in "Section") When you create the page, please create first a section for every section such as below :

Then, give to the section an unique ID for the menu link ;) (just click on the edit icon when you're hover it in the editor) :

Menu of your one page website

Now, when you create your menu in Wordpress (all the informations are in the next section), be sure to call the ID of the section (see screenshot above/ i.e : #YOUR-SECTION-ID). Of course you need to add link items in your menu and not pages because there is only one ;)

Header Menus, MegaMenus, Topbar

There is a complete page of options for the header in the Theme Settings(see #Customization)


The theme accepts 4 different locations for your menus (you'll have to create a new menu each time and assign it by checking the good checkbox) :

  • (IMPORTANT) The main menu

    You will have to create 2 menus, one for the left side and one for the right side. Then check the right checkbox for every one. Example (You can click on the images for a better quality) :

Left Menu

Right Menu

Menu Item Subtitle

You can add subtitle for your menu items in these 2 menus :


For the logo, use the theme settings pages. (see #Customization)

  • "Menu In the topbar"

    This menu will be displayed above your main menu in the topbar. You have to enable it in the theme settings. You can use icons but please do not check the mengamenu checkbox. That won't work.

  • "Menu In the footer"

    It is the menu displayed at the right of the copyright text in the footer.


Once the extension installed and activated (see #Unyson). You can add Icons and create powerful mega menus in both left and right side (the 2 menus assigned to these locations).


If you want to display more informations, you can add a top bar above the main navigation in the header. There are options about this in the theme settings (Header tab) :

Widgets & Sidebars Locations, Extensions

Footer Widgets

To enable them, you have to go to the Widgets page in Wordpress, and drag at least one widget inside the "Footer widget Area" (screenshot below) :

Make sur that the option "Widgets in the footer" is set as "show" in the theme settings. Note that every widget will be displayed as 1/3 column that's why the best way is to have 3 widgets inside.

Page Sidebar

Once the sidebars extension enabled, you are free to add any sidebar to any page of your website. (However, it will reduce the container size for the content so all the full screens shortcodes will no longer work on those pages)


(For developers) You're of course free to improve and customize the theme code ! Here is some information which may help you. Note that if you edited the files you'll have to make again your changes when you'll update the theme. If you have any question, feel free to contact us (button in the top right corner).

The structure :

Please refer to the Wordpress theme documentation & Unyson one (link below)

│ └-animate.min.css : CSS for the animations 
│ └-bootstrap.min.css : CSS framework 
│ └-font-awesome.min.css : Icons classes 
│ └-resonsive.css : Make stary responsive 
│ └-fonts / : Font Awesome fonts (svg, otf,woff,ttf)
├-framework-customizations : See Unyson Documentation
│   ├-extensions/ : All the extensions from Unyson and shortcode files
│   └-theme/ : All the options from the Theme settings
└-images/ : All the images used in the theme + default images
└-inc/ : theme settings and structure
│     ├-class-tgm-plugin-activation.php : PHP class to activate plugins when the theme is activated   
│     └─customize.php : CSS generated by the options from the Theme settings (color, fonts...)  
│     └─hooks.php : IMPORTANT -> All the custom functions for Starry 
│     └─init.php : initialize the theme  
│     └─menus.php : register the menus locations
│     └─ : plugin with the theme custom post types 
│     └─static.php : include the CSS and JS files on the frontend
│     └─widgets/ custom widgets for the theme 
│ └-custom.js : Jquery code with all the functions for Starry 
│ └-fixed-nav.js : Make the main navigation fixed on scroll (once the option is enabled)
│ └-header-pointer.js : Header pointer animation (once the option is enabled)
│ └-home-ticker.js : Ticker in the home page (once the option is enabled)
│ └-html5shiv.js / : HTML5 support
│ └-plugins.js / : Bundle containing all the Jquery plugins 
│ └-respond.min.js / : HTML5 support
└-languages/ : Theme translation files
└-page-templates/ : Custom page templates for Starry
│ └-full-width.php : Full width page template
│ └-portfolio.php : Portfolio page template
│ └-skills.php : Skills page template
└-content-none.php : Template when there is no content
└-content-page.php : Content inside the page (see page.php)
└-content.php : Blog post template
└-footer.php : Footer of Starry (widgets, copyright)
└-functions.php : Include the important files from inc folder, mostly inc/hooks.php
└-header.php : Header of the theme (topbar,menus,logo...)
└-index.php : Blog page by default
└-page.php : Page template, mainly the structure
└-readme.txt : Some informations (does not really matter)
└-screenshot.jpg : For the theme page in Wordpress
└-sidebar-content.php : Display sidebar in the page template if the extension is enabled
└-sidebar-footer.php : Display the widgets in the footer.php
└-single-portfolio.php : Single Project template
└-single.php : Single post template
└-child.php : something
└-style.css : Main important file, Most of the style is here !
└-taxonomy-portfolio-category.php : category page for Portfolio projects
└-wpml-config.xml : WPML compatibility, declare what post types need to be translated

More :

Regarding the scripts/assets/frameworks used :

Languages Translations

You have to work with the famous plugin WPML (unfortunately not free BUT powerful). It is compatible with the theme and a language switcher will be added automatically in your top bar (if you checked the option in the theme settings). So how to translate ? just download the plugin and follow the instructions of the plugin.
Here is some useful resources :

Credits Thanks to them

We've used the following images, icons, scripts or other files as listed (BIG thanks to them).

If you think, this documentation or this theme are not complete enough, let us know please ! :) We are ready to improve it !! Thank you for reading.