Creative Portfolio WordPress Theme
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.
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!
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.
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.
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)
Install via FTP
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”.
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.
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.
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:
Recommended:
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:
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.
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
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.
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.
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:
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.
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
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)
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 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.
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:
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.
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
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.
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.
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.
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
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.
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.
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 :)
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.
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.
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:
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
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.