Thank you for purchasing my theme & welcome to the saraswathi theme community!
If you have any questions that are beyond the scope of this help file, please feel free to contact our Support Desk.
Buying Saraswathi Theme
Saraswathi theme is exclusively available only at smartpixels.net.
If you find it anywhere else it's probably a counterfeit and should ignore them. Buying the theme at the official marketplace will ensure you receive all the validated theme files, free support and updates.
You download the following from smartpixels.
- Saraswathi Theme - A zip file to be used for theme installation.
- Help - A zip file where you would find documentation, restore settings and skins.
- PSDs - A folder where we would include Photoshop files
- WordPress 4.3 or above - Saraswathi theme was developed to be compatibile with the lastest WordPress 4.3.So we request you to have your WordPress upgraded to the latest version
- PHP 5.4.x or above - Saraswathi theme supports only PHP version 5.4 or above
- WooCommerce 2.4.x - Saraswathi theme supports the latest version of WooCommerce which is 2.4.6 at the time of documentation.
This theme requires WordPress 4.3 or higher to be installed on your server. You should always run the latest version of WordPress. If you don't have a WordPress installed on your server, please follow the steps below to install it:
1 - Go to WordPress.org and download the latest version of WordPress.
2 - Create a database for WordPress on your web server and a MySQL user with all privileges for accessing and modifying the database.
3 - Upload the WordPress files in the desired location on your web server.
4 - Run the WordPress installation by accessing your website in a web browser.
The following installation guide will help you, whether you go for the Famous 5 Minute Installation, or require the more detailed installation guide.
- Things to Know Before You Begin Installing WordPress
- The Famous 5-Minute Installation
- Detailed Installation Instructions
- Common Installation Problems
- Automated Installation
- WordPress in Your Language
- Installing WordPress in Your Language
- How to Install Multiple Blogs
- How to Install on Your Own Computer
- Easy 5 Minute WordPress Installation on Windows
- How to Install with Amazon's Web Services (AWS)
- How to Install at Digital Ocean on Ubuntu 14.04 LTS
- Getting Started with WordPress (much more installation info)
Theme InstallationDownload From Smartpixels
After purchasing the theme go to your profile page and click on the downloads button. We encourage downloading themes immediately and saving them to your hard drive.
Upload The Theme
Before uploading the theme, always check that you are running the latest install or atleast make sure you are running WordPress 4.3. or higher.
Now you can upload the theme in one of two ways:
1. Upload via WordPress
- From your WordPress dashboard go to Appearance -> Themes.
- On the Themes page click the Install Themes tab.
- Click the Upload link directly below the two tabs which takes you to a page to upload the theme.
- Click the Browse button and locate saraswathi.zip that is inside your saraswathi-theme folder.
- Double click the file to select it and then click the Install Now button. If you have trouble uploading the theme via WordPress you will need to upload the theme via FTP as explained below.
2. Upload via FTP
- You need to use an FTP client such as FileZilla. To set up your FTP client to connect to your website see: http://codex.wordpress.org/Using_FileZilla
- Upload the saraswathi folder that is inside your saraswathi-theme/wp-content/themes/ folder to your WordPress themes directory wp-content/themes/.
When uploading the theme via WordPress you should be prompted to activate the theme. If uploading the theme via FTP go to Appearance -> Themes and click the Activate link below the saraswathi theme.Installing plugins
- Once saraswathi theme has been installed it will automatically prompt you to install recommended and required plugins.
- You will see the following notice in admin dashboard.
- Click Begin installing plugins to download, install and activate all the recommended and required plugins.
Setting Up Demo Content
Saraswathi comes with a one click demo package installer that makes it a breeze to install demo content.The demo package includes example posts, pages, comments, custom fields, categories, and tags etc. which can help you in learning how the theme works. To add this content follow the steps below:
- To see a live demo of the current version of the theme click here
You can also import demo content and settings manually using WordPress Importer, and inbuilt settings importer
Import Media files, Pages and Posts
- Go to Settings -> Media and uncheck the option Organize my uploads into month- and year-based folders.
- Go to Tools -> Import and select the WordPress option. If you are prompted to install the WordPress Importer plugin you should do this.
- Click the Browse button and locate the content.xml file of the demo package of choice that is inside the demo files folder downloaded from smartpixels
- Select file and then click the Upload file and Import button.
- Check Download and import file attachments.
- Click Submit.
- Now wait for import completion.
- Go to Saraswathi -> Backup/Restore and click browse button next to import.
- Select theme-options.json file from the demo package of choice inside the demo files downloaded from smartpixels.
- Click Open and then Import
- On completion you will receive the message Settings have been imported successfully!
Note:Make sure that you import widgets after importing theme options and removing already present widgets in widgetareas.
- Install Widget Importer & Exporter by Steven Gliebe.
- Select widgets.wie file from the demo package of choice inside the demo files downloaded from smartpixels.
- Click Open and then Import
- On completion you will see the Import Results
Saraswathi theme comes pre packaged with two custom premium plugins and it also suggest installing Jetpack.
Shortcodes that help access & deliver content in the most elegant and functional way possible.It is our intention to build a solid array of features that share design elements where harmony and quality takes precedence over quantity.
Every shortcode is mobile optimised, functional, and bloat free.We promise to keep it that way
- This plugin is a required plugin.
- Saraswathi Shortcode button will be available near the Add Media button on top of the WordPress editor while editing content
- Clicking the Saraswathi Shortcode button will open saraswathi Shortcode popup window.
- In the saraswathi Shortcode popup window you will have the option to select the Shortcode that you can add to content.
- Upon selection of a Shortcode. Options for that particular shortcode will be shown.
- Set the options as you like and click the Add Shortcode button at the end of the options to add shortcode to content.
- If you are not sure on what options to fill. Change sample data option (as shown in the pic below) to Yes.This will add a shortcode with sample data. So you can see how various options work before using them.
Adds extra features to Saraswathi WordPress Theme. There is no setting attached to the plugin, just a standalone plugin designed primarily to stop content lock when you switch from using Saraswathi WordPress to other themes.
This plugin is a required plugin.
- This plugin is a recommended plugin that adds infinite scroll among other other useful features.
- Saraswathi theme supports jetpacks infinite scroll on archive pages for posts in both grid and regular layouts.
- All the other features of jetpack also work well with Saraswathi theme
- Know more about this plugin.
Once you have activated the theme click the option under the Appearance tab called Customize.
Click this link will open saraswathi theme customizr options page. You can now make changes to the default settings and click the Save Changes button to save the custom settings.
- If site layout option allows to switch between full width and grid based layout.
- Grid width is in percentages to maintain responsive layout and has a max value of 85%.
- The Content Width option changes the width of primary content area.Settings content width to 100% will content appear full width.
- If you want sidebar to appear alongside content then Content Width + Sidebar Width must be equal to or less than 100.
- Select the sidebar width option to change width of sidebar.
Choose a color pallette before customizing colors. If you need some help, a great place to look for modern colour swatches is Adobe Color. The color coding is based scale from Google Material Design. Customize any color by choosing the apporiate Google Material Design color.
Change default background at Appearance -> Customize -> Layouts -> Saraswathi. For animated background to work, gradient background must be selected Background images overrride all other background types.If background image is not empty other background color and options will be void.
The default sidebar layout is right sidebar and can be changed at Appearance -> Customize -> Layouts -> Saraswathi. Selecting no sidebar will disable sidebar on all pages. You can disable sidebar on index through option at Appearance -> Customize -> Layouts -> Content
Go to Appearance -> Customize -> Layouts -> Content for content section.Blog Archive Layout
This section contains settings for changing content layout.
- Select Regular on the layout style option to disable masonary grid layout.
- Select Grid on the layout style option to enables masonary grid layout.
- Select Grids only work if masonary grid is chosen.
- The layout will automatically change according to the chosen media sizes.
- Mix and match size and grids.
Go to Appearance -> Customize -> Design -> Typography for typography section.
The section allows you to customize typography for content throughout the site.Font Options
Saraswathi theme comes with google font library containing over 700 fonts.
- Filter fonts based on font script.
- Selecting only the font script you need will reduce the website load times.
- Font sizes are in ems ( for easy use we changed 1em = 10px ).
Go to Appearance -> Customize -> Design -> Header for header section.
- Set the navbar and logo positions.
- Max logo width is 200px
- You can edit the PSD logo provided along with the saraswathi theme and upload here.
Go to Appearance -> Customize -> Design -> Footer for footer section.
- Options to position footer menu, social icons and scroll to top are inter linked and will change layout accordingly. Footer menu can be assigned at Appearance -> Menus.
- Footer widget areas can be disabled. Disabling footer widgets will not disable footer.
- If you enable or disable footer widgets or change the number of footer widget areas. Save changes and refresh the entire page by pressing 'F5' key for the changes to appear.
- Widgets can be added to footer widget areas Appearance -> customize -> widgets.
Go to Appearance -> Customize -> Design -> Form for form section.
Color for all the forms, inputs, checkboxes, radio buttons, and labels etc.
Go to Appearance -> Customize -> Design -> Button for button section.
- Select the type of button option to change various button styles.
- Change the opacity option to 0 for transparent buttons
Site Icon Section
This theme comes with option to set icon tiles for windows and apple OS's.
Go to Appearance -> Customize -> Design -> Site Icon for icons section.
Upload a icon image of recommended size 500X500 px for the tiles to appear nicely across all mobile and tablets.
Go to Appearance -> Customize -> Design -> Icons for icons section.
Enter URL's of your social profiles to automatically create social icon menu in the footer. You can location of social icons through options in Footer section
Saraswathi Shortcodes Section
Go to Appearance -> Customize -> Plugins -> Saraswathi Shortcodes for saraswathi shortcodes section.
- All the shortcodes available through saraswathi theme share a default primary and secondary color palette.
- The primary and accent colors should be harmonious.
- Use Google material design color pallete and the color codes.
Go to Appearance -> Customize -> Plugins -> Woocommerce for woocommerce section.
Saraswathi theme has full support for Woocommerce Provides customizer options to change layout style within woocommerce
- Enable/Disable related products and choose the number related products and columns.
- Choose the number of columns in product gallery and image sizes.
- Choosing grid layout will enable masonary grid columns unlike regular layout.
- You also can choose the number of products per page on taxonomy pages.
- Just like other content, woocommerce styling is also based on primary and secondary color palettes.
Go to Appearance -> customize -> widgets
- All the widget areas such as sidebar, footer, index and page will be available here.
- Saraswathi theme provides four widgetareas which can be used to place widgets.
- The theme also provides a widget auto grid system to automatically create grids for widgets in horizontal widget areas.
- Each widget can be has Saraswathi Theme Options section as shown in pic below where positional options can be chosen and further CSS classes added.
- To set up index page go to Settings -> Reading.
- Choose either blog posts or Page (Right) as your index content.
- Saraswathi theme has many in-built Templates for pages that can be used to configure your index/frontpage further.
- You can also enable widgetarea above and below content on the index.Go to Appearance -> Customize -> Layouts -> WidgetArea for index widgetarea options.
Adding Menu To Site
- From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.
- Select Create a new menu at the top of the page Enter a name for your new menu in the Menu Name box Click the Create Menu button.
- Add Menu Items to your menu.
Saraswathi theme supports custom menus, you will be able to add your new menu to one of the primary and footer Locations.
- Scroll to the bottom of the menu editor window.
- In the section titled Theme locations, click the check box for the location either primary or footer where you want your menu to appear. Click Save menu once you've made your selection.
The saraswathi theme comes with two menus that are responsive.
- By default the mega menu is enabled and it is designed for large store menu with support for touch and swipe actions well.
- The mega menu can be disabled to reveal a dropdown menu with tap support for smaller devices.
- This menu is perfect for blogs and smaller sites that doesn't have large navigation
- Disable mega menu by going to Appearance -> Customize -> Layouts -> Saraswathi. Under topbar options uncheck Enable mega menu
Saraswathi theme provides supports video, image, gallery, link, quote and standard WordPress post formats.
- Choose gallery as your post format if you have gallery in content and want a content slider to appear on taxonomy pages.
- Choose video as your post format if you have embedded youtube or other ombed video content supported by WordPress in your content.
- By default quote format posts will use the first quote but you can override default behaviour by using the class .saras-quote to specify any link in your blockquote.
- By default link format posts will use the first link but you can override default behaviour by using the class .saras-link to specify any link in your link.
Backup & Restore
To backup theme settings visit Saraswathi->Backup/Restore in main admin menu
- You can backup all the settings or selectively all, shortcodes, plugins, woocommerce etc..
Exported settings can be imported into saraswathi as easily as it was exported,
- Click on the browse button
- Select the exported saraswathi theme backup and then click open.
- Complete the import by clicking the import button
- Restore settings by uploading the backed up / exported settings file.
- You can also completely restore the settings to default settings by selecting "all" and then clicking restore.
- Another way is to locate default-settings.json a default restore file that is inside the saraswathi-theme/help/restore folder.
- Select file and click import button.
To add the widgets to widget areas go to Appearance -> customize -> widgets and click on a widget area.
- Now click the Add Widget to see a panel full of widgets open to the right.
- Search for the widget.
- Click on widget to add to widget area.
- Now its is ready to be customized.
Saraswathi Custom Widget
Display contact details along with google map
A widget that displays social media icons.
Curate and filter posts across categories and display in various layouts with plenty of options to tweak widget display
Showcase your portfolio using this widget.
Recent Content Slider Widget
Saraswathi theme provides content carousel slider to display recent content.
[alertbox]Alert message here..[/alertbox]
To display an alertbox with message
- type: various types of pre coloured alertboxes such as light, success, warning, info, & alert
- radius: add curved border to alertboxes with pill and curvy options
- bg: Background colour for alertbox
- color: Text colour for alertbox
[blog layout="regular" size="medium" number="3" custom order="DESC" orderby="comment_count" media author date category sticky excerpt readmore /]
To display a blog page
- layout: Saraswathi theme offers 4 different type of layouts regular,grid,list and gallery.
- columns: Number of columns for grid layout
- size: Size of images and videos. Layouts adjust automatically to size selected.
- number: Number of posts to display
- order (optional): Order in which to display the posts
- orderby (optional): Criteria to display posts
- cat (optional): Category ID's to display posts from only those particular categories
- recent: Using this attribute will display recent posts
- oldest: This is the mirror of recent attribute, displays oldest posts first.
- custom: Using this attribute will enable custom query
- media (optional): Use to display thumbnail or other featured media in posts
- author (optional): Use to display author of the posts
- date (optional): Use to display date of the posts
- category (optional): Use to display category of the posts
- excerpt (optional): Use to display excerpt of the posts
- readmore (optional): Use to display readmore link of the posts
- sticky (optional): Use to include sticky posts in blog pages.
[content_carousel id="carousel-123" type="post" content_ids="1" size="thumbnail" slides_to_show="1" slides_to_scroll="1" easing="linear" autoplay vertical infinite]
To display an carousel with any post type
- id: Give your carousel an ID
- type: Posttype that you want to display.
- content_ids: ID's of content that is to be displayed seperated by comma.
- size: Size of media
- slides_to_show: Number of carousel slides to show at once in any given time.
- slides_to_scroll: Number of carousel slides to scroll when user uses navigation options.
- easing: Type of easing required while transitioning from one slide to another.
- autoplay (optional): Automatically start the slider
- vertical (optional): Display a vertical slider
- fade (optional): Display posts using a fade animation
- infinite (optional): Create a never ending slider, loop back to first slider when scrolling past the last.
[counter num="61000" time="900" delay="3000" type="bulletin" color="#ffffff" bg="#dd3333" ] Text.. [/counter]
To display a onscroll animated counter with message
- num: Number to be displayed on the counter
- time: Time taken to complete the counter animation
- delay: Delay the start of counter animation
- type: Use the option to change between bulletin, badge and minimal counter layouts
- bg: Background colour for counter
- color: Text colour for counter
[folio layout="grid" size="folio-large" number="3" custom order="DESC" orderby="date" sticky excerpt /]
To display porfolio items page
- layout: Display portfolio as grids or lists.
- columns: Number of columns for grid layout
- size: Size of images and videos. Layouts adjust automatically to size selected.
- number: Number of portfolio items to display
- order (optional): Order in which to display the portfolio items
- orderby (optional): Criteria to portfolio items
- cat (optional): Portfolio category ID's to portfolio items from only those particular portfolio categories
- recent: Using this attribute will display recent portfolio items
- oldest: This is the mirror of recent attribute, displays oldest portfolio item first.
- custom: Using this attribute will enable custom query
- excerpt (optional): Use to display excerpt of the portfolio items
- sticky (optional): Use to include sticky portfolio items in portfolio pages.
Flexbox & Panel
[flexbox color="#333333" columne="2" spaceout] Content... [/flexbox]
Automatically divide content into specified number of columns.Flexbox is an easy way to divide content into seperate columns/grids. No need to worry about width or height of columns as they are taken care of automatically. Just set column number and flexbox will adjust its height and regardless of the content in each column.You can also build nested columns with panel shortcode inside flexboxes
- columns: Number of columns of content
- radius: add curved border to flexboxes with pill and curvy options
- bg: Background colour for flexbox
- color: Text colour for flexbox
- spaceout: add whitespace between the content columns
[panel columns="2" flexheight highlight color="#bada55" bg="#ffffff" curvy animation="sarasAnimFadeInDown" animoffset="22" animdelay="370" ] Content... [/panel]
Panel shortcodes can be used individually or within flexbox shortcode to create nested columns.Saraswathi’s panel shortcode supports groups, flexible height, unlimited colors and backgrounds.
- columns: Number of columns of content
- radius: add curved border to panels with pill and curvy options
- bg: Background colour for panel
- color: Text colour for panel
- Animation (optional): Add various onscroll animation to panels.Panels will be revealed with animation when user scrolls panels into view.
- flexheight: Use the attribute on a panel to set all other panels height to be the same as current panel.
- highlight: Highlight a panel automatically.
[modal id="contact1" cta="Contact Us" color="#545454" ] This is a sample modal window [/modal]
Use our shortcode to create beautiful responsive popup windows with images, videos or any content.Popups are shown with just the click of a button, just like the button below.
- id: use multiple modal windows on the same page by giving them unique ID's
- cta: Call to action message for modal button.
- radius: add curved border to modal windows with pill and curvy options
- bg: Background colour for modal window
- color: Text colour for modal window content
[pricing_table] [pricing_column columns="2" title="Title 1 Here.." cta="Buy Now" price="$99" color="#545454" highlight] [pricing_list listitems="Bullet item 1,Bullet item 2,Bullet item 3,Bullet item 4" /] [/pricing_column] [pricing_column columns="2" title="Title 2 Here.." cta="Order Now" price="¥9" color="#3333"] [pricing_list listitems="Bullet item 1,Bullet item 2,Bullet item 3,Bullet item 4" /] [/pricing_column] [/pricing_table]
The pricing table shortcode is extremely customizable to your needs with options for number of columns, colors, call to action buttons, purchase link, currency and more..
[pricing_column columns="2" title="Title" desc="Description" link="http://smartpixels.net" cta="Buy Now" price="$18" color="#545454" highlight][/pricing_column]
Create pricing columns using this shortcode
- columns: Number of pricing columns
- radius: add curved border to pricing column with pill and curvy options
- bg: Background colour for pricing column
- color: Text colour for pricing column
- title: Title for pricing column
- desc: Description text colour for pricing column
- link: Hyperlink for CTA button for each pricing column
- cta: CTA text for pricing column
- price: Price for each pricing column
- highlight: Highlight a particular column automatically.
[pricing_list listitems="Bullet item 1,Bullet item 2,Bullet item 3,Bullet item 4" /]
Add a list of points to aid product comparision each pricing column
- listitems: Comma seperated sentence to create list of items
[progress_bar progress="50" type="light" grad anim color="#545454" bg="#ffffff" pill ]Text[/progress_bar]
Add a progress bar to posts, pages or custom post types without any code.
- type: various types of pre design progress bars such as light, success, warning, info, & alert
- progress: Progress of the concerned work.
- radius: add curved border to progress bars with pill and curvy options
- bg: Background colour for progress bar
- color: Text colour for progress bar
- grad: Add gradient color to progress bar.
- anim: Add animation to progress bar.
[quicknav fixed navitems="id1:See Heading 1,id2:Goto Heading 2" /]
Create a responsive navigation menu that can be used as a standalone menu for landing pages or as an fixed navigation to guide users through content.
- navitems: list of ID's and title of menu items. Each unique Title and ID combination is comma seperated with a colon inbetween.
- radius: add curved border to quicknav with pill and curvy options
- bg: Background colour for quicknav
- color: Text colour for quicknav
- fixed: To make the quicknav stick to the top of the page.
[quicknavitem id="id1" title="Heading 1" tag="h3" /]
Add a destination point for quicknav
- id: ID of the menu item
- title: Title of the menu item
- tag: html tag for title
- hidden: Make the menu item hidden.
[templater id="123" bg="#ffffff" /]
Create custom shortcodes that can output any stored content snippet that includes HTML, Images and Videos on Posts, Pages and any Custom Post Type.
- id: ID of the content template
- radius: add curved border to content with pill and curvy options
- bg: Background colour for content
- color: Text colour for content
[tabs tabitems="tab1:Title 1,tab2:Title 2" color="#bada55" bg="#ffffff" ] Tab item shortcode here... [/tabs]
Create mobile optimized tabs within posts, pages or any other content type with this shortcode.
- tabitems: list of ID's and title of tab items. Each unique Title and ID combination is comma seperated with a colon inbetween
- bg: Background colour for tab
- color: Text colour for tab
[tab id="tab1" selected] Tab content here.. [/tab]
Add a tabitem to tabs
- id: ID of the tab item
- selected: Display the tabitem on page load.
Action hooks are essentially placeholders. Wherever an action hook is placed, it will execute any code that has been hooked to it. Saraswathi theme provides useful hooks through the template for developers to hook into to modify the theme. Infact it is the prefered way to add any elements to the templates without altering the core files.
List of available custom action hooks:
- saraswathi_after_footer saraswathi_before_header
The theme also supports all the default WordPress action hooks such as wp_head, wp_footer etc..
In WordPress, a Filter is a function that is associated with an existing Action by specifying any existing Hook.See the Plugin API to know more.
List of available custom filters:
- _saras_get__[theme mod id]
The theme also supports all the default WordPress filters hooks such as the_content, excerpt_more etc..See filter reference for more.