Upon unzipping that zip file you will find the following folders inside:
- Help & Support
Withing the Upload folder There is an additional zipped file titled Sophia.zip.
Important: Do not unzip this file! This particular .zip file(sophia.zip) should remain zipped.
The easiest way to install a WordPress theme is through WordPress’s built-in Theme Install feature, follow the steps below to install your theme:
Step 1: Log in to your WordPress dashboard and go to Appearance -> Themes. At the top of the page, click the tab Add New.
Step 2: Just below the headline, you will see a link that says Upload Theme – click that.
Step 3: Click the Choose File button and find the theme .zip file (sophia.zip) from your local machine and then click the Install Now button.
Step 4: After the theme has been successfully installed, click Activate.
Installing Recommended Plugins
Sophia theme uses the following plugins for it’s demo:
Kirki: It is used to enable the theme’s customizer options, you need to Install this plugin to be able to customize the theme yourself.
Jetpack: Jetpack is an essential plugin for all WordPress installations it is designed by the WordPress’s core development team, Sophia uses this plugin for showcasing the Galleries and Post Sharing Icons.
Q2W3 Fixed Widget: The sticky widget functionality in Sophia’s demo is achieved using this plugin.
We have made installing the recommended plugins easy, all you have to do is click on the Begin Installing Plugins From you WordPress dashboard notification which will pop up after installing the theme and Install each of the plugins Individually or all together as shown in this GIF.
Once you have installed the plugins successfully you will be forwarded to the plugin Activate page you can follow the same process as above instead just choose the Activate Option from the Actions Dropdown like so:
If you don’t feel like starting from scratch, you can get the same layout as our demo in no time all you have to do is import the demo file we have provided you in the download files and you are done, Follow the steps below to import the theme demo.
In the folder called Demo which you get after unzipping the download packaged you recieved you will find an XML file usually saved as demo.xml
Step 1: On your WordPress dashboard in the left-hand menu, select Tools -> Import.
Step 2: Select the WordPress option. You may need to install and activate WP Importer.
Step 3: Click the Choose File button and upload the theme’s demo content XML file you located above.
Step 4: You will be given the option of choosing which author name will be assigned to the imported content you can choose that from here. Otherwise, click Submit and you’re set!
If you have purchased the theme from our website you will be emailed a license key instantly alternatively you can log into your BasePixels Dashboard and locate the theme license key.
If you have purchased the theme from any other marketplace please request a license available here and we will furnish you with a valid license within 24 hours.
Once you have located your license key the next step would be to activate it in your WordPress installation, you do not need to activate the license on your local machine but all web hosted domains i.e the live sites need an active license for the regular one-click theme updates where we address performance issues, fix bugs and add additional features to the theme with time.
To active the license follow these steps:
Step 1: Navigate to the theme license page by clicking the Appearence -> Theme License link from your WordPress Dashboard.
Step 2: Paste your theme license key to the field available at the right corner of the page as shown below.
If you have followed the steps under Installing Theme & Plugins specifically installed the Kirki Toolkit plugin, you can skip this section as the customizer already is setup for you.
If you navigate to the customizer by clicking Appearance -> Customize from your WordPress Dashboard and see the message like in the image on the left, you have not installed the Kirki Plugin correctly, no worries! we have made it super easy for you to install it.
All you have to do is click the Install button as shown in the picture and then activate the plugin to be able to use the customizer properly.
Theme Updates are available to all valid license holders if you have activated the license as shown in the steps above updating becomes as easy as clicking a button.
If you have turned on update notifications via email, you will receive an email whenever there is a theme update available apart from getting a notification in your WordPress dashboard like so.
Clicking the Update Now link should be enough to update the theme. Yes! it is that easy.
To know what updates or changes we made to the theme you need to refer to the changelog which can be found here – Sophia Changelog. Alternatively you can view the changes directly from your WordPress installation by clicking the Check out what’s new link from the screenshot above.
It is recommended to keep your theme up to date at all times so that your WordPress Installation is healthy fast and secure also to enjoy all the new goodies and features we add to the theme.
Setting up the navigation menu is really easy and is a built in feature of WordPress the following steps will guide you through the process.
Step 1: navigate to the WordPress Menu area by clicking Appearance -> Menus
Step 2: Click on create a new menu then select a menu name.
Step 3: Be sure to assign the menu to a theme location by checking the tick box. For example, set the menu as the primary menu for the header of the blog.
Step 4: Save menu
Adding Pages, Categories and Posts to the menu
On the left side of screen are a number of drop-down boxes titled Pages, Links and Categories. Each group contains available items you can add to your menu. Check the box next to the page or post you’d like to add to your menu and click Add to menu. The selected item will appear under Menu Structure.
You can drag & drop the item you’ve added to adjust its location in the menu. You can also create sub-menus the same way i.e dragging an item underneath another so that it’s indented. Make sure to save the menu after any re organization.
Sophia supports One widget area called Sidebar which can be positioned left, right or completely hidden using the Theme Customizer. To add widgets to this sidebar simply drag and drop widgets from the widget dashboard under Appearence->widgets menu.
Sophia also supports Three extra widget appart from the default included WordPress widgets.
Included extra widget(s) in Sophia are:
- BasePixels About Widget
- BasePixels Recent posts Widget
- BasePixels Infobox Widget
- BasePixels Imagebox Widget
BasePixels About Widget
The about widget is a handy custom widget to display information about yourself on the sidebar area of your website. We have added a few pre-defined fields to the widget to help you organize the info.
While the fields available are self-explanatory the upload image field needs some extra steps to add the image correctly.
When you click the Upload Image Button you will be prompted to select the size of the image. Once done click the Insert Into Post Button. If you want more control over the image dimensions etc. another way of adding an image is by uploading it to WordPress by heading over to the Media page under the menu Media-> Add New, once that is done copy the image URL and paste it in the same field here.
BasePixels Recent posts Widget
This widget is similar to WordPress’s default Recent Posts widget however it displays a thumbnail of the featured image along with the other details. Enter the number of latest posts you want to show in the field provided.
Currently, Sophia just supports Mailchimp newsletter forms integrated into the theme however you can use any other newsletter service widgets easily.
The theme supports integrated forms in 1 place:
- Newsletter Widget
However, multiple newsletter widgets can be added on the sidebar and hero widget areas of the theme.
For setting up Mailchimp Signup forms follow the steps below:
Install the Mailchimp for WP plugin from your WordPress dashboard or by following this link.
Once you have installed and activated the plugin successfully. Next step is to integrate it with your mailchimp account.
Locate your mailchimp api key. Read this article for more info about where to find your api key.
Paste the api key in the plugin’s settings page and save, If you entered the correct key you will see active lists on your mailchimp account.
Now head over to the plugin’s forms section name it anything you like and paste the following code in the provided field.
<input type="text" name="FNAME" placeholder="Your Name"> <input type="email" name="EMAIL" placeholder="Your email address" required /> <input type="submit" value="Subscribe Now!" />
This should be enough to setup the 2 integrated signup forms in Sophia. If you want to create a widget form like in the demo copy the form’s shortcode. Then head over to the WordPress’s widgets section and create a text widget. There paste the copied shortcode and that’s it! Check out the following gif for more info.
Sophia like all our themes uses the social media icons provided by Jetpack Plugin. Follow the steps above to install and activate Jetpack. Once that is done setting up all the social icons is just a breeze.
To display the top navigation social media icons just navigate to the WordPress dashboard’s menu section and create a new menu then assign it to the social media menu location by navigating to Manage Locations section of the menu page.
If everything is done correctly, just create new menu items and paste your social media links as menu items. That’s it WordPress will automatically generate the respective icons for you.
Sophia has built-in styles to make your content look pretty and get your point across in a clean fashion. All basic elements are styled to match the theme design.
If you have imported the theme demo content, the imported page called Style Guide is a great starting point to use the elements and add your own content to it.
we have also added a few extra elements to help you display your content which are:
- Pull Quotes
- Syntax Highlighting
columns are great when you want a left-right split on your content. To add 2 columns simply paste the following code and add your content to it.
<div class="grid-row"> <div class="two-columns"> <h4>Left Column</h4> <p>Adding a two column split layout has never been more simple than with the easy to use snippet provided with this theme.</p> </div> <div class="two-columns"> <h4>Right Column</h4> <p>Adding a two column split layout has never been more simple than with the easy to use snippet provided with this theme.</p> </div> </div>
Pull Quote is a brief, attention-catching quotation taken from the main text of an article and used as a subheading or graphic feature.You can add it easily in your content by adding a class pullquote-left or pullquote-right something like this for left pullquote:
and this for right pullquote:
Highlights can be used to draw special attention to an important part of your content, using highlights is really easy all you have to do is wrap the text/content in a span tag a class of highlight like so:
Sophia has a script included with it which helps in displaying your code syntax highlighted for better readability.
We have included the okaidia prism theme and the support for languages including but not limited to:
To use the syntax highlighter just copy paste the following code replacing the class with the name of your desired coding language.
if you want to change the syntax highlight theme or add support for more languages just regenerate a new script by visiting prismjs website and including it in your child theme’s functions.php file. If you are not able to do it yourself, we will be more than happy to help you out just drop us a line using our contact us page.
Sophia theme includes an extensive theme customizer that allows you to easily change the look and feel of your site and see your changes in real time before actually applying them to the live site which can come really handy when you want to test drive certain changes. This section will cover the various settings included in the customizer.
You can access the customizer by visiting Appearance -> Customize .
Sophia includes the following customizer settings:
Colors & Styling
These settings include all the colors used in the theme usually Primary Color, Various Background Colors, Border Colors etc.
Typography being one of the most important aspects of a theme we have added a lot of options to customize every small detail of the typography used in the theme. You can select from 800+ Google Fonts easily with just the click of a button.
The body field setting includes options to change the Font Family, Variant, Font Size etc.
The default unit for font size is rem which is recommended to make your site look perfect on all devices. However, it can be changed to any other unit like px or em etc.
We have also provided options to chose Font Subsets which will help you choose which font glyphs you want to load and save file size and improve page loading speeds. Read this article for more info.
Sophia includes options for setting different font family and/or styles to different heading elements. The fields for each individual heading item work the exact same way as for the body font picker above.
Note: Try not to change font sizes for different heading elements unless absoluetely necessary for your content as we already define a good ratio for the heading size defaults for all themes
Header & Logo Options
Logo: Upload the regular sized logo image file here preferably .png. Also while uploading take a note of the width of this logo image file, it will be used in one of the following fields.
Retina Logo: We have added scripts and styles which will automatically use this logo image file in case of devices with high dpi screens. Make sure the logo image file you are uploading to this field is 2x the size of the original file you uploaded in the previous field.
Logo Width: Here add the pixel width of the original logo image file you uploaded to the Logo field. No need to enter any unit values px will automatically be added to the value. So If the logo dimentions you uploaded are 200×100, put the value 200 to this field.
Fields relating to changing the layout of the theme are included under this setting. Under this field there is an option to change the sidebar positioning or hide it completely.
If you want to remove the sidebar on a single page and not the whole website, Sophia includes a custom page template called Full Width Page Which you can chose while creating a new page.
The Footer option panel includes a field to change the copywrite text of the website. We request you to keep this setting as it is unless absolutely necessary. We love backlinks back to our work 🙂
Sophia includes a handy field to easily integrate Google Analytics with your website. Just paste in your Google Analytics tracking ID and you are good to go!
The tracking ID is a string like UA-000000-01. To know where to find this ID from Google read this article.
This field includes options and settings to change the content added to the 404 Page. While we have hard-coded the layout of the page, these settings will help you customize most of the content inside the page.
We have included .pot files inside the theme download package under the Languages folder.You can refer to this article for a step by step resource to aid you in translating the theme using poedit. While we provide resources to help you translate the theme easily, We do not provide any support for translating themes.
While asking for support or trying to change any layout/style of the you will ocassionally have to dive in to edit the CSS of the theme to achieve your desired style changes.
It is not advisable to change the theme’s core files since they will be overwritten when an update happens. Alternatively you can use JetPack’s custom CSS addition which provides a very handy set of tools to add custom css to your website among others.
If Jetpack does not solve your purpose, there are many plugins in the WordPress’s plugin repository which provide custom CSS fields for you to easily paste custom CSS code in.
We offer Theme Install Services and Theme Customization Services as well! all you have to do is send us a message with your requirements using the form here.
Thank you for checkout out Sophia!