Kindergarten WordPress Theme
Created: 15/November/2013
By: CraftedPixels Team [craftedpixels.net]
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please use the Support forum. If you have a more general question relating to the themes on Theme Forest, you might consider visiting the forums and asking your question in the Item Discussion section.
About
Kindergarten Theme - Features:
- Fully responsive, looks great on any device;
- Unique slider - shapes your pictures like clouds, without previous photo editing;
- Post formats -Standard, Aside, Audio, Chat, Gallery, Image, Link, Quote, Status, Video;
- Custom front page, multiple page templates;
- Administrable social media icons;
- Jetpack compatible;
- Search Engine Friendly;
- W3C Markup Validated and cross-browser compatible.
Installing
Kindergarten Theme is compatible with WordPress 3.6+ (including 4.0). If you have older WordPress versions, please update before using the theme.
- STEP 1: For this step you have two options:
- Option 1: Upload via FTP the "kindergarten" folder from the archive to wp-content/themes directory.
- Option 2: Use the "Install themes" function from WordPress Dashboard. Go to Appearance > Themes. Click the "Add New" button.
Click "Upload Theme" button. Choose kindergarten-theme.zip from the archive and then click the "Install Now" button.
- STEP 2: Activate the theme from the "Manage Themes" tab.
After activating the theme, you will be prompted to install the required plugins: CP-ImageGallery and CP-WOWSlider.
As of 10 March 2016 we added a third plugin, CP-Shortcodes-Kindergarten.
-
Press "Begin Installing Plugins"
-
Install the plugins following the three steps depicted
Setting up Kindergarten Theme
Kindergarten has a custom front page, so for displaying it and the blog posts page correctly, follow this steps:
- Create a new page - name it "Home" and choose "Front Page" template for it;
- Create another page and name it "Journal" or Blog" or whatever you want the posts page to be named;
- Go to Settings > Reading and set them as static pages for Front Page and Posts Page.
Uploading logo
To change the default logo with your logo, go to Appearance > Custom Header. The logo is Retina-optimized (your 360px X 200px logo will be displayed at half size).
CP-WOWSlider plugin
See Setting up for installing.
The front page CP-WOWSlider uses premium WOWSlider javascript effects. The plugin installs with 2 demo images for preview and easy setup. Once you upload your own images, the demo images are automatically replaced.
Slider images are 670px wide by 400px high. For best results it is recommended to upload 670x400 images, or any other size with the same aspect ratio, if possible in .png format.
Uploaded images are automatically resized and shaped like a cloud, there is no need for previous image editing.
To add or edit slider images, go to Plugins > CP-WOWSlider.
If you have not uploaded any images yet, only the "+ Add Slide" button will show. You can also change the transition effect, duration and delay.
Click "+ Add Slide" to add a new image. For each slide, there are several options: Number (for re-ordering), Title and Caption (Description). Please note that, depending on your hosting server, upload image size may vary. That limit is displayed just below the image uploader.
CP-ImageGallery plugin
See Setting up for installing.
Kindergarten has a custom gallery page with filterable photo albums. To use it, create a new page called Gallery (or any other name of your choice) and use the shortcode [cp-image-gallery].
To add or edit albums in your gallery, go to Plugins > CP-ImageGallery. (NOTE: The "Edit" tab shows only when you click an album's Edit button.)
- Add an album in the "Add Album" tab. You may select multiple files to upload at a time (but please bear in mind that maximum file upload size depends on your hosting configuration, sometimes it can be as low as 2 MB).
- After saving the album, go to "Albums" tab, click Edit button and choose a cover photo for the album. To do that, check the radio button on the desired photo.
- You can edit/add caption or delete pictures. (NOTE: Caption is displayed when the picture is opened in prettyPhoto lightbox.)
Shortcodes
Grid columns
You can easily organize your page or post content into 2, 3, 4 or 6 columns with shortcodes, by adding your text/content in [col][/col] tags. For example, if you want 2 columns, the shortcode will look like this:
[col 2]First column content here[/col]
[col 2 last]Second column content here[/col]
All the columns are responsive and automatically adapt to any viewing environment (try resizing this window).
-
Two columns
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.[col 2]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.[/col]
[col 2 last]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.[/col] -
Three columns
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.[col 3]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.[/col]
[col 3]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.[/col]
[col 3 last]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.[/col] -
Four columns
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[col 4]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
[col 4]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
[col 4]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
[col 4 last]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col] -
Six columns
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[col 6]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
[col 6]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
[col 6]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
[col 6]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
[col 6]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
[col 6 last]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.[/col]
Button Colors
To display a button of a certain color, simply add the appropriate color name to your button:- Blue:
Button[button color=blue link=http://example.com text=Button]
- Green:
Button[button color=green link=http://example.com text=Button]
- Yellow:
Button[button color=yellow link=http://example.com text=Button]
- Gold:
Button[button color=gold link=http://example.com text=Button]
- Orange:
Button[button color=orange link=http://example.com text=Button]
- Brown:
Button[button color=brown link=http://example.com text=Button]
- Brick:
Button[button color=brick link=http://example.com text=Button]
- Red:
Button[button color=red link=http://example.com text=Button]
- Pink:
Button[button color=pink link=http://example.com text=Button]
- Purple:
Button[button color=purple link=http://example.com text=Button]
- Black:
Button[button color=black link=http://example.com text=Button]
- Gray:
Button[button color=gray link=http://example.com text=Button]
- Silver:
Button[button color=silver link=http://example.com text=Button]
- Olive:
Button[button color=olive link=http://example.com text=Button]
Button Sizes
[button size=small color=blue link=http://example.com text=Button]
Button
button size=medium color=blue link=http://example.com text=Button]
Button
[button size=large color=blue link=http://example.com text=Button]
Button
[button size=xlarge color=blue link=http://example.com text=Button]
Contact Page & Social Media
Kindergarten comes with a special Contact Page Template with details (address, phone, email, website), Google Maps, social media and contact form.
To activate the Contact Page, simply create a page and name it Contact (or however you want), and choose as template "Contact".
The Contact Page details and the social media icons displayed in the footer and Contact Page are manageable from Theme Options.
Icons are available for RSS, Google+, Twitter, Facebook, Instagram, LinkedIn, Pinterest and YouTube. For an icon to be displayed, you must add the link to your profile on that social network. To do this go to Appearance > Theme Options.
PSD Files
All the .psd files are included in the "PSD-files" directory.
To edit Kindergarten Template files, you must first install the necessary fonts.
The fonts used are not included, but you can find the download links in the "Sources and Credits" section of this document.
12 psd files are included (6 @1x for normal displays and 6 @2x for retina displays) plus 2 psd files with the background texture (@1x and @2x). The files are organized in 3 folders:
-
@1x
- Homepage - 01_kindergarten_homepage.psd
- About - 02_kindergarten_about_us.psd
- Gallery - 03_kindergarten_gallery.psd
- Blog - 04_kindergarten_blog.psd
- Blog post - 05_kindergarten_blog_post.psd
- Contact - 06_kindergarten_contact.psd
-
@2x
- Homepage - 01_kindergarten_homepage@2x.psd
- About - 02_kindergarten_about_us@2x.psd
- Gallery - 03_kindergarten_gallery@2x.psd
- Blog - 04_kindergarten_blog@2x.psd
- Blog post - 05_kindergarten_blog_post@2x.psd
- Contact - 06_kindergarten_contact@2x.psd
-
bg-texture
- linedpaper.psd
- linedpaper@2x.psd
Updates
-
V 18.0 [18.07.2016]
Renamed CP Image Gallery plugin and set the version number to 99 to avoid the naming conflict with a new plugin that was released by somebody else on the WordPress plugin repo.
(for details see the comment here: https://themeforest.net/item/kindergarten-wordpress-theme/6174058/comments?page=4&filter=all#comment_13750158 ) -
V 17.0 [20.04.2016]
Fixed issue with mobile menu icon color.
-
V 16.0 [10.03.2016]
Added CP Shortcodes plugin for buttons and columns.
Updated demo content import .xml file.
-
V 15.0 [25.11.2015]
Fixed Blog page title (display page title instead of latest post title).
-
V 14.0 [29.09.2015]
Made Blog page title customizable (display page title instead of "Blog").
-
V 13.0 [16.06.2015]
Updated PrettyPhoto to 3.1.6
Updated translation files (kindergarten.pot, en_US.po, en_US.mo). -
V 12.0 [28.05.2015]
Added option for content in the custom Contact page.
Fixed wp_title() showing twice in functions.php. -
V 11.1 [24.04.2015]
Updated TGM Plugin Activation to latest version (2.4.1 master branch release - it fixes issue with bulk installing plugins). -
V 11.0 [23.04.2015]
Updated TGM Plugin Activation to latest version.
Made the theme Theme-Check compliant (changed screenshot to 880x660, resolved warnings and recommendations). -
V 10.0 [09.01.2015]
Added alternate font for cyrillic.
Added Subject field in the contact form. -
V 9.0 [09.12.2014]
Removed third-party Bootstrap Shortcodes plugin because it caused buggy behaviour with the mobile menu.
Updated Documentation with screenshots and instructions for WordPress 4. -
V 8.0 [20.11.2014]
Replaced menu/titles font (BD Cartoon Shout) with Dimbo for diacritics support.
Modified the font in the .psd files. -
V 7.0 [13.11.2014]
Added WooCommerce compatibility. -
V 6.0 [01.09.2014]
Added option for non-widget page content on front page;
Included a child theme. -
V 5.0 [24.03.2014]
Made the logo Retina-ready.
Fixed alignment of menu-toggle button on Retina iPad and iPhone (centered the button).
Made the slider visible on smaller mobile resolutions. -
V 4.0 [09.02.2014]
Updated the language files (.pot, .mo, .po).
Fixed background-size on Retina. -
V 3.0 [14.01.2014]
Added link on title and caption for WOWSlider.
Made footer menu customizable. -
V 2.0 [30.11.2013]
Added Image Gallery. -
V 1.0 [19.11.2013]
Initial release.
Sources and Credits
-
Fonts:
- Royaltea’s color is Violette – used in the logo;
- Dimbo – used for titles and in the logo;
- Solomon Normal – premium font used everywhere else (body text etc.).
- Vectors and shapes: Vecteezy Premium or handcrafted by us;
- Webfont Icons: FontAwesome;
- Patterns: subtlepatterns.com;
- WOW Slider - properly licensed, included in the template;
- Other scripts: getbootstrap.com;
- Images used in the demo (properly licensed, included in the template): graphicstock.com
- Images used in the demo (not included in the template): PhotoDune