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)
- Login into your fresh Wordpress installation, once in the dashboard :
2F
January 2015
help@2f-design.fr
Wordpress 4.0 +
Installed & Updated (It's not that hard to click on the "upadate" button ;))
Thank you for purchasing our theme. If you have any questions feel free to open a ticket via our Support center.
There is many ways to install a Wordpress theme, we are going to take a look to the easiest one here. (More Informations)
To customize starry we will talk about 3 different things :
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).
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).
All the functionalities of the theme are managed by Unyson Framework, more informations here :
We advise you to use the same format/size and color (something similar at least).
This is just some informations to create a simple page with Starry:
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)
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.
If you prefer to work with the Revolution Slider, You can find the plugin in ASSETS/revslider.zip. 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):
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...).
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) :
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 ;)
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) :
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) :
You can add subtitle for your menu items in these 2 menus :
For the logo, use the theme settings pages. (see #Customization)
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.
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).
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.
(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).
Please refer to the Wordpress theme documentation & Unyson one (link below)
starry/ ├-css │ └-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 │ └─starry-assets.zip : plugin with the theme custom post types │ └─static.php : include the CSS and JS files on the frontend │ └─widgets/ custom widgets for the theme └-js/ │ └-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
Regarding the scripts/assets/frameworks used :
All the theme is built with the powerful Unyson framework, so do not disable it please. You can extend the theme functionalities with this framework. Take a look on the links below :
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 :
We've used the following images, icons, scripts or other files as listed (BIG thanks to them).