Sunlight Theme

Creative Portfolio WordPress Theme


Introduction


Welcome to Sunlight Documentation. First of all thanks for purchasing Sunlight Theme. We hope you will be satisfied with our work, and this theme will be useful in your projects.

Note - This documentation is to help you regarding on the basic installation & customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. For a deeper & updated knowledge about Sunlight Theme, visit our online guide

If you have questions while working on the theme, we're glad to help. Simply contact our Support Service.


WordPress General


This theme requires a working version of WordPress to already be installed on your server. If you need to install WordPress then please visit: wordpress.org. If you need any help with the installation here you can find some useful links:

Installing WordPress - WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you. However, if you wish to install WordPress yourself, the following guide will help

First Steps With WordPress - Let’s take a step-by-step tour through your WordPress site and see how the different functions work and how to make your new site your own. During the first part of this tutorial, please don’t change anything within the program unless it is part of the tutorial. After following these steps, you’ll soon be changing everything.

New To WordPress - Where to Start - If you are new to WordPress, here is a step-by-step plan for getting started. If you need help along the way, plenty of options for assistance are listed in this article. Welcome to the exciting world of WordPress!


Server Requirements


If you are installing your theme from the WordPress theme installer, but get a message that says Are you sure you want to do this?, most likely your web server is configured with low PHP settings that only allow a certain size ZIP file to be uploaded via WP admin.

Most hosting companies configure their servers to only have the maximum file upload size limit at 8-10 MB, some are less. Our theme ZIP is currently about 15 MB in size which is due to the included plugins and all the demo content. So if you get this error, your web server is rejecting the upload due to the overall size of the zip file. WordPress is, unfortunately, giving you a rather ambiguous message in response. This is not a theme issue or bug.

PHP Recommendations

Memory Size: memory_limit = 256M
Script execution time: max_execution_time = 400
Number of input variables: max_input_vars = 4000

If you don’t have access to the php.ini file, you can add the following values in your .htaccess file:

php_value max_execution_time 400
php_value memory_limit 256M
php_value upload_max_filesize 10M

Be careful using these settings, some hosting companies don’t allow users to change php settings, if you experience any problem after making these changes, please revert these in your .htaccess file, using your FTP client.

Also, there is another way to prevent this error, you can upload your theme via FTP.


Getting Started

Theme InstallationBack to Top

After you download the Sunlight theme from ThemeForest, unzip the file and then navigate & locate a zipped file called “sunlight-wptheme-vxxx.zip” (Where number xxx is the current version number). This file is the main theme that you need to upload.Important: DO NOT unzip this folder! This folder should remain zipped.There are two ways to install the theme into your WordPress, one from WordPress dashboard (recommended) and the other one manually from FTP.


Install via WordPress (easy & recommended method)

  1. Within your WordPress Dashboard, navigate to Appearance > Themes.
  2. Click the “Add New” button at the top-left of the page > Click the “Upload Theme” button at the top.
  3. Click “Choose File” > find your zipped “sunlight-wptheme-vxxx.zip” file > Click the “Install Now” button.
  4. When your theme is successfully installed, click Activate to activate the newly installed theme

Install via FTP

  1. Download and install a common FTP Client software (like FileZilla or Cyberduck)
  2. Open the selected software and log in with the FTP access keys provided by your Hosting. (If you don’t know ho to get this read this article from FAQ section)
  3. Unzip the theme sunlight-wptheme-vxxx.zip file and drag and drop the unzipped folder inside “wp-content > themes”
  4. Activate the theme from WP Control Panel by going to Appearance > Themes and activate it.

Important:  With either of the above two options, make sure you are only uploading the correct .zip file. If you upload the wrong file you will most likely get an error such as: “Error: missing style.css stylesheet” or “The package could not be installed. The theme is missing the style.css stylesheet. Theme install failed.”If this is your case, please be sure that you’re installing the ZIPPED file titled “sunlight-wptheme-vxxx.zip” and NOT the whole theme zipped folder titled “themeforest-12234742-sunlight-creative-wordpress-theme”.

That's it! Once the theme is installed and activated, the setup wizard will install a Child theme, the recommended Plugins and import the Demo data (all are strictly optional). We'll go over it in the next section below.

Sunlight Setup WizardBack to Top

Once you activate the theme, you'll be redirected to an installation wizard that will speed things up and help you get started -
The setup wizard helps automatically installing a Child Theme, installing all the Required & Recommended Plugins, and Import the Demo Data (if you want).Simply follow the wizard's instructions. You can, at any point, go back to your dashboard or disable the wizard altogether, although this is the recommended method. If you've accidentally exited the wizard, you can go back by hitting the 'Sunlight Panel -> Theme Setup' link, or just using the manual setup methods described in the next section below.

Note - We recommend to install the Child Theme and all the Plugins but exit the Setup Wizard before importing Demo Content. This because there are few Elementor Settings that is better to activate in order to Import Content without any style issues. Then you'll be able to easily import demos with the One Click Demo Import.

Child Theme

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. To use the child theme of our theme, you have to download the whole package from ThemeForest and then extract it, while extracting it you'll find a zip file called theme name-child.zip, upload that one after you upload the main theme and it will be ready for use.

Plugins

This is the list of the plugins that will be installed with Sunlight. Here you can find bot the Required ones, which are fundamental for this theme to work correctly, and the Recommended ones which you can disable or delete if you don't need to use them. But if you change your mind, you will be able to add them at anytime.

    Required:

  • Elementor: The most powerful front-end page builder, all the elements are created inside it.
  • Sunlight Core: A core plugin which adds options and custom functionalities to the theme.
  • One Click Demo Import: It's a must if you want to import the demo content and start working without to create everything from scratch.

Recommended:

  • WooCommerce: It's required if you want to have an online store, it's the most popular eCommerce platform online.
  • Contact Form 7: It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup.
  • Mailchimp: This plugin would allow you to connect your site and gather email addresses from your visitors into your Mailchimp lists
  • Smash Balloon Instagram Feed: Easily add your instagram feed to your website


Elementor Settings Back to Top

In order to use correctly Sunlight with Elementor and especially if you want to import correctly one of the demos, there are a few settings you must activate:

  1. Log in to your WordPress Administration Panel (Dashboard)
  2. Click Elementor > Settings
  3. You will see all tabs for setting of Elementor, click General tab
  4. From General, check the following boxes:
    • Post Types > Portfolio
    • Disable Default Colors
    • Disable Default Fonts
  5. Save Changes
  6. Now click the "Advanced" Tab
  7. Set "Yes" on Load Font Awesome 4 Support
  8. Save Changes

In this way you will able to use Elementor for your Portfolio Post Types and also use the fonts & colors that you set in the WordPress Customize Panel.



Demo Import Back to Top

Note - Be sure that the One Click Demo Import is installed and active and before you import any data we recommend to activate some essential Elementor Settings

You can import the demo content under Sunlight Panel > Demo Import. Here you'll find all the importable content. From full demos to single pages. You just need to choose what to import and click "Import" or click Preview to be sure of what you are importing. Then just confirm by clicking "Yes, Import Now!". And the process will start

Importer FAQS
  1. If the import process doesn't work properly, times out, or generate any type of errors, you can try running the importer once again. If you still cannot get the import process to work correctly, try to increase your server memory and timeout limits, and try running the import process again.
  2. Importer showing PHP errors - If the importer displays errors, make sure that the PHP version on your server is 5.6+ (version 7+ is a much better & faster option)
  3. Importer showing a 404 error - If the importer redirects you to a page non-found, please make sure to re-save your permalinks under Settings > Permalinks. Then, try increasing your PHP memory and timeout limits and try using the importer once again.

Note - If the Theme Setup Wizard fails to import the demo data, you can use the default WordPress importer to import the theme demo data. You can access the XML file in the /demo-files/ folder that is located in the theme's root directory.



Update Theme Back to Top

Before you update the Theme

It’s very simple to update your theme to the latest version! But please before you go ahead be sure to read these 2 recommendation messages below here:Note 1 - By default, WordPress should save your content to your database. This is why your content appears on whatever theme you have activated within your WP Dashboard. However, it’s always a good idea to create a database backup before deleting a theme, just in case.Note 2 -  If you’ve modified any of the theme files yourself by editing the code, you’ll need to note these changes in order to re-implement them once you’ve installed the latest version of the theme. The update will replace your previous version’s theme files. 

Downloading Sunlight's latest version

If you want to download the latest version available of our Sunlight theme you just need to repeat the process you did when downloaded the files from ThemeForest for the first time:

  1. Navigate to your ThemeForest Downloads page
  2. Locate Sunlight Theme by Indieground on this page and select the green “Download” button. A drop-down menu will appear.
  3. Within this menu, choose the “All files & documentation” option.
  4. Once the download completes, you can ahead on the updating process by following the step by step guide below.

Installing Sunlight's latest version

Now that you downloaded the theme update, follow these simple steps in order to install it correctly. Be sure you’re installing the correct zip file like stated at the bottom of this page.

  1. First, you’ll need to activate another theme, because WP will not allow you to delete a theme that is currently activated.
  2. So you need to go to Appearance > Themes and Activate any other theme.
  3. Once you’ve activated another theme, stay within Appearance > Themes, click on Sunlight Theme.
  4. In the bottom right corner is a little option to “Delete” the theme. Before you do this be sure to read the recommendations above of this page
  5. Go ahead and delete it.
  6. You can now re-install the newest version of the theme you’re updating.
  7. Go to Appearance > Themes
  8. Select Add New > Upload Theme > Select the theme’s ZIP file
  9. Click Install Now.

Remember - It’s important to install the correct theme’s ZIP file “spotlight-wptheme-v001.zip” (Where number 112 is the current version number, so by the time your reading this the number could be higher due to a more recent version). This file is the main theme zip file you need to upload. Do not upload the entire theme package named “themeforest-12234742-sunlight-creative-wordpress-theme”. Otherwise, you will receive an error message



Theme Customizer

Back to Top

In the Customizer, you'll find the general options and personalization settings that can help change the default layouts, colors, fonts, images, typography settings and more.The Customizer can be accessed via 3 different locations: (any of the buttons will get you to the same panel)

  1. In the main Dashboard screen click on the Sunlight Panel > Customize
  2. In the main Dashboard screen click Appearance > Customize
  3. When you view your site as a logged in user, click the Customize in the top Toolbar.

General
From this section you can change the Site's title and icon

Header
From this section you can choose the main Header from the ones you created or imported. More info in the Header & Footer section of the guide.

Background
From this section you can choose the site's main background style between Color, Image or Gradient Color.

Blog
In this section you can find all you need to customize the layout (if you don't want to use the default WordPress post feed page instead of creating a custom Blog page with Elementor) and colors of your Blog and also the layout of the Single Post and Archive page.

Pages
From this Section you can choose the basic layout settings for a general Page. Set a default Content margin (the space between the Header, Page Content and Footer) and also the background style for the Pages Title.

Widgets
This section lets you manage the widgets of the current page if there is an available widget area.

Portfolio
In this section you can find all you need to customize the basic layout of your Single Portfolio projects. By default, the empty layout is selected, so you can use Elementor to create your custom Single Portfolio page or use one of the many templates included with Sunlight.

Sidebar
In this section you can find all you need to customize the layout & style of the sidebars

Typography
In this section you can find all the options for the site's Typography

Buttons
From this section you can set the style of the default Buttons of the site

WooCommerce
From this Section you can choose the essential WooCommerce layout settings for your Shop.

Footer
From this section you can choose the main Footer from the ones you created or imported. More info in the Header & Footer section of the guide.



Elementor

Elementor is the ultimate WordPress page builder, the key difference is that you can reach a high level of design while designing live and on the front end of your site. Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS and doesn't require code knowledge.


Recommended Settings Back to Top

In order to use correctly Sunlight with Elementor and especially if you want to import correctly one of the demos, there are a few settings you must activate:

  1. Log in to your WordPress Administration Panel (Dashboard)
  2. Click Elementor > Settings
  3. You will see all tabs for setting of Elementor, click General tab
  4. From General, check the following boxes:
    • Post Types > Portfolio
    • Disable Default Colors
    • Disable Default Fonts
  5. Save Changes
  6. Now click the "Advanced" Tab
  7. Set "Yes" on Load Font Awesome 4 Support
  8. Save Changes

In this way you will able to use Elementor for your Portfolio Post Types and also use the fonts & colors that you set in the WordPress Customize Panel.



Basic Functions Back to Top

Some of the pages and elements seen in the Live Preview of this theme are controlled by the "Elementor" page builder. You don't necessarily have to use the page builder, but it is highly recommended and can be a huge time-saver. Feel free to check the official Elementor docs here: https://docs.elementor.com

Using Elementor

To edit any page with Elementor, simply edit the page with WordPress first, then click on the "Edit with Elementor" button. Once you are within the Elementor editor, you will be able to add new elements into the page, modify existing pages, or manage and create your pages with ease. In the Elementor editor you'll see all the available elements.

Changing Background Colors and Images

To change a background color or image, you will generally need to change the "Section" or "Column" settings. These options would appear under the "Style" tab one the left side.

Adding New Elements To Pages

To add new Elements to any page, simply click on the Elementor logo/icon on the top of the page. Once you see the list of elements on the left side, drag and drop any of them onto your page's content area.

More Info On Elementor

Luckily, Elementor offers a large knowledge base site with tons of info. We highly recommend to check out their documentation here: https://docs.elementor.com. Below are a couple of videos from the Elementor docs homepage:

https://www.youtube.com/watch?v=43j6h3oCm0U
https://www.youtube.com/watch?v=Em8oIBGy6bs



Custom Elements Back to Top

This is the list of the Sunlight Theme's exclusive elements made for Elementor. Be sure the required Sunlight Core plugin is installed and active.Like all the basic Elementor elements, you can edit the layout and style as you prefer.

  • Classic Blog - Use this element if you want to display your blog post feed in the Classic layout style
  • Grid Blog - Use this element if you want to display your blog post feed in the Grid style
  • List Blog - Use this element if you want to display your blog post feed in the List style
  • Portfolio - Use this element if you want to display your portfolio projects and choose from the various layouts available
  • Portfolio Slider - Use this element if you want to display your portfolio projects as a slide
  • Blog Slider - Use this element if you want to display your blog post feed as a slide
  • Button - This is a regular button element that you can customize as you need
  • Contact Form - This element displays the forms you created with Contact Form 7 plugin
  • Custom Box - Use this element is you want to create a fancy box or banner
  • Fancy Heading - You can use this element to customize Titles by adding some cool effects
  • Instagram - Display your Instagram feed with the plugin Smash Balloon Instagram Feed
  • Open Street Map - A great alternative to Google Maps to show where you are located
  • Post Data - This is a useful element that you can use when you create a custom Single Portfolio page, that will automatically show the Featured Image or also the Title
  • Post Meta - This is a useful element that you can use when you create a custom Single Portfolio page, that will automatically show the post's meta like Categories, Date and Author
  • Testimonials - Use this element to create a fancy Testimonial slider with clients references
  • Team - Use this element to create a Team member box, with roles and social media links
  • Circle Text - Use this element to create a cool rotating text that you can also animate
  • Scrolling Text - Use this element to create a cool scrolling message with customizable speed and style
  • Products - Use this element if you want to display your WooCommerce products

Site Building

Header & Footer Back to Top

Create a custom Header / Footer

Sunlight Theme features both Header & Footer areas that can be created & modified by the Elementor Page Builder and be displayed globally across the theme.
In order to set this up, you'll need to first create an Elementor Template (or edit the ones imported from a demo) and go into your admin panel. Then click the Header or Footer Builder section. In there, create a new template by clicking on the "Add New" button, and modify your template just as you would modify a regular Elementor page.
Once you are done editing the Header / Footer, go into Appearance > Customize > Header or Footer section, and in there, select the template you've just created. Your footer would now be in display across your entire website and you'll be able to make changes globally.

Display a different Header / Footer on a page

You can also choose to create a Header or Footer and display them just on one or a few particular pages. To do this, just select the Page where you want to display the Header that is different from the global one. If you scroll down the editing Page you'll find "Custom Header Options" and the option "Select Header" where you can select the Header Template you've created to be displayed only on that page. The same trick works also for the Footer.


Portfolio Back to Top

Create a Portfolio page with Elementor

Portfolio is the only custom post-type which has been added in Sunlight Theme. By using the custom elements included inside Sunlight Core, you can display Portfolio in your Elementor’s layout. Posts element has 3 main styles – Classic, Grid and Masonry. It’s worth to mention that before displaying portfolio posts, a portfolio project itself should be created and the element configured. 

Create a Single Portfolio Post

With Sunlight there are 2 ways to create the layout of a Single Portfolio project. You can also combine these 2 methods if needed.
The first is by using Elementor, and this needs the empty layout to be selected form Appearance > Customize > Portfolio > Single Portfolio. So you can use Elementor to create your custom Single Portfolio page or use one of the many templates included with Sunlight.
You can use one of the included Single Portfolio templates by clicking on Sunlight Panel > Demo Import > Single Portfolio Here you'll find all the available templates. You can import them and you'll find them directly on your Portfolio section, ready to be edited.
Another method is to use a unique template from Appearance > Customize > Portfolio > Single Portfolio that will apply by default to all your portfolio projects. We prefer the Elementor method in order to make each of your projects page to be unique.



There is an important decision (but you can change your mind whenever you want) about the method you choose to display your Blog Posts, because one excludes the other. But anyway, the result will be satisfying :)

Create a Blog page via Customizer

This is the standard and classic method used with Wordpress.You need to create a new Blog page, leave it blank and Save it.Once you have created those pages, you can head over to the Settings > Reading page in the WordPress admin area.Under the ‘Your homepage displays’ section, you need to click on the "A static page" option. After that, you can select the page you created earlier as the Posts Page.
Now it's time to customize your blog page layout, and to do this you just need to go to Appearance > Customize > Blog > Blog Layout.In this section you can find all you need to customize the layout and colors of your Blog and also the layout of the Single Post and Archive page.

Create a Blog page with Elementor

Note - If you want to create a custom Blog page with Elementor, the Posts page option in Settings > Reading should be blank.
  1. Add a new page or edit an existing one.
  2. Click on Edit with Elementor button.
  3. By using the custom elements included inside Sunlight Core, you can display your Blog Posts in your Elementor’s layout. Posts element has 3 main stylesClassic, Grid and List. From the left dashboard search for one of these 3 elements. You can also combine them in the same page and use the Offset option to match their post display order.
  4. Drag and drop the (Classic, Grid or List) element to your page.
  5. Edit the settings and Update the page.


Sunlight Theme is compatible with WooCommerce plugin, the de facto solution for E-Commerce in WordPress. Take the steps below to install and set up shop.

Setting up WooCommerce

  1. Install & active WooCommerce. If you used the Sunlight Setup Wizard to install the plugins, WooCommerce should be already installed since it's bundled to this theme.
  2. After activating the plugin, you’ll be shown the set up wizard to configure the settings and install default pages like Shop, Cart, Checkout, My Account. But you can skip this and configure the settings later.
  3. Default pages needs to be installed from the left WordPress dashboard menu in Woocommerce > Status > Tools tab > Create default Woocommerce pages. We recommend to do this process even if you already imported one of the demos, in order for the plugin to re-link to the assigned pages.

Set the Shop SettingsSet your shop details regarding the location, currency, measure units, tax information, checkout process, shipping and more in WooCommerce settings. You can access this section by going to WordPress Admin Menu > WooCommerce > Settings. For more detailed information regarding WooCommerce settings click here.Add ProductsThe next step will be adding products to your shop. You can add products by accessing WordPress Admin Menu > Products > Add Product. You can add Product Title, Description, Short Description, Categories, Tags and many more details on this page. For more information click here.You can add description using Elementor page builder and add Elementor widgets to the content, but make sure you enabled Elementor for Products post type in Elementor > Settings.Now you have a working shop for your website. For more detailed information about WooCommerce plugin usage, click here.

Note - If you set the main Shop page via Woocommerce settings, it can’t be edited with Elementor page builder. You can use Elementor only for a custom page that is not assigned to Main Shop Page and other default Woocommerce pages in Woocommerce settings. 



Instagram Feed Back to Top

Install & active Smash Balloons Instagram Feed. If you used the Sunlight Setup Wizard to install the plugins, Instagram Feed plugin should be already installed since it's bundled to this theme. Let's see the setup process:

  1. Click on the Smash Balloons Instagram Feed item in your WordPress menu
  2. Click on the large blue button to connect your Instagram account.
  3. Once you’ve connected your Instagram account you can use the associated buttons to add or remove it from your Primary user feed, or to add it to another feed on your site.
  4. Navigate to the Customize Tab to customize your feed.
  5. Once you’ve customized your feed, copy the [instagram-feed] shortcode into any page, post or widget where you want the feed to appear.
  6. If you want to use it inside Elementor, just Drag & Drop the "Instagram" element inside the page.

Note - The photos won't be displayed when you are customizing the page inside Elementor. You need to Update and watch the Live Preview to see it in action

You can use either the built-in “Instagram Feed” widget, or the default WordPress “Text” widget, to display your Instagram Feed in a sidebar or any other widget area.
For an overview of setting up the plugin check out the video below. https://www.youtube.com/watch?v=dsyXyz_kQuk

Support Service

This theme is in continuous development and improvement. We'll listen to any kind of suggestions that will help us making great updates for an always better Sunlight. If you have questions while working on the theme, we're glad to help and know your thoughts. Simply contact our Support Service.