Download Report

Summertime
USER GUIDE
[email protected]
TYLERNORRIS.ME
Thank You
Thanks for purchasing the Summertime Wordpress theme. If at anytime you have questions during or after setup, please contact
me directly at [email protected].
Table of Contents
Installation
3
Demo Content
4
Theme Options
5
Permalinks
10
Creating the First Page
12
Adding Pages to the Menu
16
Creating a Slider
17
Assigning Sliders to Pages
19
Setting Up Included Template Pages
20
Setting Up Widgets
22
Creating Custom Sidebars
24
Creating Gallery Items
25
Creating Blog Posts
27
Shortcodes
29
Support
35
SUMMERTIME USER GUIDE
PAGE 2 of 35
Installation
First things ﬁrst. We built this theme for Wordpress version 3 and above. If you are still running Wordpress 2.x, you’ll need to
upgrade before installing our theme. Visit http://codex.wordpress.org/Updating_WordPress to learn more about upgrading.
Download Wordpress
To being, if you have not yet installed Wordpress, go and download the latest version from http://wordpress.org. You’ll then need
to upload the ‘wordpress’ folder to your web hosting account, via FTP. Once uploaded, you’ll edit the ‘conﬁg.php’ ﬁle and add the
Security Keys (learn more here: http://codex.wordpress.org/Editing_wp-conﬁg.php).
Next you’ll visit your website, giving it a name, adding a username and password for access, and supplying an email address.
When setting up a User Name, we recommend NOT using ‘admin’, but choosing something diﬀerent, like ‘mtadmin’, in our case.
This is for security reasons and helps prevent unauthorized access to your Wordpress site.
Installing the Theme
Now your initial Wordpress site should be setup and you should
already be logged in. If not, visit
http://YOURDOMAIN.com/wp-admin (be sure and replace the
domain with your domain). You’ll be presented with a login
screen. Login using the credentials you set above.
Once logged in, navigate to Appearance then Themes. Then at the top of the page, select Install Themes then Upload. From there
you’ll be able to upload the ‘summertime.zip’ ﬁle that was included with your theme.
You may also upload the the contents of the ‘summertime’ folder from the ‘summertime.zip’ ﬁle to the Wordpress ‘/wp-content/
themes/’ folder, via FTP.
SUMMERTIME USER GUIDE
PAGE 3 of 35
Demo Content
If you are creating your ﬁrst website, or this is your ﬁrst Wordpress website, we suggest loading the demo content from the demo
site (http://summertime.mashedthemes.com), to get you started. This will show you how we’ve setup those pages, blog posts,
galleries, and sliders. However if you’d like to start from scratch, skip this section and move on to Theme Options.
Two Files
There are two ﬁles that were included with this theme (in the ‘Demo Content’ folder), that contain the demo content and settings.
The ﬁrst ﬁle, called ‘summertime.xml’, contains all of the Pages, Blog Posts, Gallery Items, Sliders, etc. The second ﬁle,
‘summertime-settings.txt’ contains all of the settings for the theme options.
As a side note, unfortunately Wordpress does not support saving Widgets and their content. So you will need to build and place
those yourself. You can learn about that in Setting Up Widgets.
Loading the Content
To load the Wordpress content, log in to your Wordpress website. Next, go to Tools then Import. Next select Wordpress at the
bottom of the list of options. You will most likely be prompted to install the Importer. Select the Install Now, red button and once
the plugin has been installed, select Activate Plugin & Run Importer.
Now you’ll choose the ‘summertime.xml’ ﬁle and then select the Upload ﬁle and import button. You’ll then need to assign an
author to the demo content. You can either create a new user or assign posts to an existing user. Next be sure and check Download
and import ﬁle attachments. And ﬁnally, click the Submit button. Please give this process time, as there is a lot of demo
content that must be downloaded to your theme.
Loading the Settings
To load the Theme Options Settings, go to Appearance then Theme Options. Then on the bottom left, select Import/Export. Next
click on the Import from ﬁle button and paste in the contents of the ‘summertime-settings.txt’ ﬁle that came with the theme. And
make note that this will overwrite any existing options, but since it’s a fresh install, you shouldn’t have any options set yet.
Finally, select the blue Import button and wait for it to ﬁnish.
SUMMERTIME USER GUIDE
PAGE 4 of 35
Assigning the Menu
Finally, we’ll need to assign the menu to the theme’s Primary Navigation Menu. Go to
Appearance then Menus. Then under Theme Locations, for the Primary Navigation
Menu, select Main Menu from the drop down list.
Setting the Homepage as THE Homepage
Finally, you’ll need to tell Wordpress what page is THE homepage from the demo content. Eventually you’ll have numerous pages
throughout your site and Wordpress needs to know which one is your homepage.
Navigate to Settings, then Reading. To the right of Front page displays, select the
radio button A static page (select below). Then select Home for Front page. We’ll
leave Posts page alone because the demo content is using it’s own blog page.
SUMMERTIME USER GUIDE
PAGE 5 of 35
Theme Options
Whether you’re setting up the Theme Options from scratch or have imported the settings from the demo site, let’s review the
diﬀerent options. As a side note, none of these ﬁelds are required. They’re just there to help you customize the site, if desired.
To view the Theme Options, go to Appearance then Theme Options.
General
These are the generic options for your site that you’ll setup ﬁrst.
Website Logo. Upload the logo that will be displayed on the header of the theme. You will want this ﬁle to be a transparent
PNG, for the best results. Make note that the size of logo used on the demo site was 272 x 75 pixels. While the header will adjust
properly for a taller logo, you’ll want to keep it’s size wider than taller, so as to cover less of the full-width slider images. Of course
once uploaded, you can always remove it and upload another.
Favicon. This small image is displayed in the browser’s URL address bar. It will need to be a ‘.ico’ ﬁle to work correctly.
Google Analytics Code. If you like to track visits to your site using Google Analytics, paste your code here.
Styling and Layout
These are simply styling and layout options. More advanced styling comes in the next panel.
Header, Navigation and Content Font. Two standard fonts along with 15 Google Web Fonts are built into the theme. If
you’d rather use a custom Google Web Font, do so by entering the font name and weight into the Custom ﬁelds. An example of a
custom font would be ‘Open+Sans:400’ -- both the font name and one font weight are required.
Primary Site Color. This is the primary color of the site. When selected it sets numerous element’s colors on the site. We
recommend choosing darker colors to work best.
Highlight Site Color. This is the color of just a few highlighted elements on the site, including the link color.
SUMMERTIME USER GUIDE
PAGE 6 of 35
Advanced Styling
Here you can dig into more of the advanced styling options for the site.
Top Body On. The Top Body is the section located just below the navigation and sliders, and right above the content. If selected
per page, the page Titles and Breadcrumbs display in this section. You also have the option of placing content in it as well.
Navigation Spacing. This adjusts the spacing between items in your navigation menu. Have only a couple items? Make them
farther apart. Have a lot of items and don’t want them to wrap to a second line? Make them closer together.
Font Sizes. Adjust the size of individual fonts on the site.
Header, Top Body and Footer Patterns. You’ll notice that there are subtle patterns over each of these sections. If you’d like
a diﬀerent pattern, you may upload your own. However make sure it’s repeatable and is transparent so as to not overwhelm your
visitors.
Text Colors. Adjust the color of individual text elements on the site.
Body DIV Background Colors. The Top Body and Content Body backgrounds are automatically set when selecting the Primary
Color under Styling and Layout. Here you can alter those colors and set your own if desired.
Header Opacity. You’ll notice that the header has a slight transparency to it, allowing you to see the images beneath. You can
increase or decrease that opacity here.
Custom CSS. If you would like to make changes to the actual CSS on the site, simply add your own CSS to this ﬁeld. That way if
you update your theme in the future, you won’t loose any changes you may have made to the actual ﬁles. There is no need for an
opening and closing ‘style’ tag, just begin typing in your elements such as:
.the-element {
font-size: 16px;
color: #ffffff
}
SUMMERTIME USER GUIDE
PAGE 7 of 35
Footer
Here you can make a couple changes to the footer.
Footer Widget Columns. This determines how many columns are in the footer. Later we’ll show you how to add widgets to
those columns. If you’d rather not have any columns in the footer, simply turn them Oﬀ.
Footer Copyright Section. This is the content that’s at the very bottom of the site.
Blog Settings
Here you can make changes to how your blog works.
Blog Sidebar Location. By default, the blog has a sidebar that Widgets can be loaded into. Choose which side of the page you
would like the sidebar located on.
Display Blog Excerpt. Excerpts are optional hand-crafted summaries of your content that can be used in your theme. If no
summary is provided, it will display a summary taken from your post. If turned oﬀ, it will display the entire post on your main blog
page.
Blog Excerpt Text. If excerpts are on, type in the text you’d like for the link that takes your visitor to the full post. By default, it is
‘Read More’.
Social Buttons. Choose which social sharing buttons you would like displayed under each individual blog post. These are great
for helping others share your content.
Post Comments. Choose whether or not you would like visitors posting comments on your blog posts.
Utility
These options are fairly straightforward. You can change your 404 page title and message that visitors see. And the message that’s
displayed when no search results are found.
SUMMERTIME USER GUIDE
PAGE 8 of 35
Contact Form
Here you can make changes to the Contact Page template that we’ll setup later.
Email Address. This is the email address you would like form submissions sent to.
Display Google Map. This creates a Google Map at the top of the Contact page. Just paste in a Google Map link.
Contact Page Sidebar Location. By default, the contact page has a sidebar that Widgets can be loaded into. Choose which
side of the page you would like the sidebar located on.
Form Fields. Choose which form ﬁelds you would like to display on the contact page.
Required Form Fields. Choose which ﬁelds you would like required when ﬁlling out the contact form.
Slider Options
There are two diﬀerent slider styles that you can select on each Page. The Wide slider should have a Featured Image size no
smaller than 1500 x 615. The Normal slider should have a Featured Image size no smaller than 940 x 350. You'll select the slider
style on each Page when selecting a slider to display. Other slider options are available this options page.
Slide Transition Eﬀect. Choose how your slides transition. Either fading in and out, or sliding.
Slide Direction. If you’ve chosen Sliding above, you can then choose which direction the images slide.
Slide Transition Speed. Choose the speed in which you slides transition between each other. Remember, this number is in
milliseconds, so 1,000 would equal 1 second.
Pause Slider on Mouse Hover. This pauses the slide when a visitor hovers their mouse over that slide. It’s recommend that
you keep this set to Yes.
Slide Display Time. This is how long your slides display for, before moving to the next. Remember, this number is in
milliseconds, so 8,000 would equal 8 seconds.
SUMMERTIME USER GUIDE
PAGE 9 of 35
Social Media Accounts
These are all of the social media accounts built into the theme. When activated, they display as small icons at the top and bottom
of the site.
Display Social Media Icons. Choose whether or not you wish to display the icons.
Social Media Accounts. Enter your individual social media accounts. Of course, none are required, so enter as little or as many
as desired.
Your Email Address. This activates an icon that is grouped with the social media icons. It gives people a direct link to your email
address.
SEO Options
These are two simple search engine optimization options.
Site Description. Enter a short description that search engines will display on their search result pages.
Site Keywords. Enter comma-separated keywords that help describe your site.
Import/Export
This gives you the ability to back up your Theme Option settings. So in the future, if you site has problems or you accidentally
change some settings, you can revert back to your original settings. This is not to be confused with a Wordpress export -- that’s
located under Tools.
Import Options. Upload a ﬁle backup ﬁle to restore your options. Remember, this will overwrite any existing
options.
Export Options. Here you can copy/download your themes current option settings. Keep this ﬁle safe as you can use it as a
backup should anything go wrong.
SUMMERTIME USER GUIDE
PAGE 10 of 35
Permalinks
Permalinks are how Wordpress builds page links on your site. By
default, your Pages and Posts will have a link like this:
‘http://yourdomain.com?p=123’ -- it’s referring to the Page or Post ID
instead of a friendly name. Wordpress has multiple permalink
structures built in however we recommend a custom structure.
Set a Custom Permalink Structure
When logged in, go to Settings then Permalinks. Here you’ll see the
Common Settings and at the bottom, a radio button that says Custom
Structure. Select it and enter:
/%postname%
This is the best for search engines and the friendliest for your visitors. This will structure your links like:
‘http://youdomain.com/mypost’.
SUMMERTIME USER GUIDE
PAGE 11 of 35
Creating the First Page
Let’s create the ﬁrst page on the site, the homepage. Begin by selecting
Pages from the menu on the left. Next you’ll see a Sample Page listed,
click Trash to move it to the trash. Then select Add New at the top and
we’ll begin creating the homepage.
The Fields
Title. The title ﬁeld is just that, it’s the title of your page and may be
visible to your visitors depending on what settings you choose below.
For this title, call it ‘Home’.
WYSIWYG. This stands for ‘What you see is what you get’. It’s an editor that’s
similar to Microsoft Word. It allows you to do simple formatting to help make
your pages look better. To give you additional formatting options, lets show the
‘Kitchen Sink’ by selecting the button illustrated on the right. This gives you
additional options that may come in handy in the future.
You’ll also notice two tabs on the right of the WYSIWYG, Visual and HTML. Visual is what
you are looking at now, it’s a visual representation of code that’s being created in the
background as you work. However if you’d like to see and edit that code, select the HTML
tab.
Go ahead and add some content in the WYSIWYG for your homepage.
Shortcodes. The green plus button gives you access to more advanced elements that you can drop into your
page or post. Instead of having to write complicated code, you just drop in your information and it builds the
code for you. You can learn more about each shortcode, later in this guide, on Page 29.
SUMMERTIME USER GUIDE
PAGE 12 of 35
Top Body. The Top Body callout section is located just below the header and slider and just
above the content. The Title and Breadcrumbs also use this space, if selected to, below.
For now you can simply leave it blank or add some information.
Top Body Options. Now you can choose if you’d like the Page Title and/or the Breadcrumbs to be displayed in the Top Body
section.
Slideshow Options. Here you can choose whether or not to display a slideshow, the slider style (Wide or Normal) and which
slider to display if you’ve chosen to display on one this page. If you’re following this guide, there won’t be any slideshows available
yet because we’ve not created any. Later in the guide, we’ll walk through creating a slideshow, on Page 17.
Sidebar. If you choose a template that has a sidebar (which we’ll cover in the next step), then you can choose a sidebar to display
on the page. As of now, there will only be default sidebars listed, but later we’ll show you how to add custom sidebars, on Page 24.
The Page Attributes
Located on the right side of the page.
Parent. Since we’re setting up the homepage, you’ll leave this set to (no parent).
However on future pages, if you’d like a page nested under another, you’ll select that
page here. This is primarily useful when using the Breadcrumb Navigation in the Top
Body.
Template. Here you’ll select which template you’d like to use for the page. Since this is
the homepage, you’ll probably want the Default Template because of it’s full width. None the less, let’s review what each one
does:
Default Template. This is a full width template, with no sidebar.
Blog, Contact and Gallery. We’ll use these templates on their respective pages later in this guide, on Page 20.
Left Sidebar Page. This template has a sidebar on the left side of the page.
Right Sidebar Page. This template has a sidebar on the right side of the page.
SUMMERTIME USER GUIDE
PAGE 13 of 35
Featured Image
Also located on the right side of the page, under Page Attributes.
Set Featured Image. If Display Slideshow is set to No, then you have the option of displaying a large image in it’s place, at the
top of the page.
Begin by selecting Set featured image. Now depending on your computer, you’ll either be able to drag an image to the window, or
you’ll need to select the Select Files button. A note about ﬁle dimensions: You’ll want this image to be at least 1,500 pixels wide by
615 pixels tall. You’ll also notice the tabs at the top, you can load an image From URL or select one that you’ve already uploaded in
the Media Library.
Once you’ve chosen an image to upload, the process will being. Depending on your connection speed, this may take some time.
Once the image has been uploaded, you’ll scroll down and select Use as
featured image. This will place the image in the Featured Image section, on
the page.
You’ll then close out of the popup window, by clicking the small X in the
upper-righthand corner.
Publish
Also located on the right side of the page, above Page Attributes.
Save Draft. Here you can save a draft of your page by selecting the Save Draft button.
This is useful if you’re not ﬁnished with your page yet or aren’t ready to publish it.
Preview. Here you can preview your page by selecting the Preview button. This is an
easy way to see if your formatting is correct.
Status. Normally the Status is set to Draft prior to publishing, however if already published, you can change it back to Draft to
hide it from the site again. You can also set it to Pending Review if the page needs reviewed.
SUMMERTIME USER GUIDE
PAGE 14 of 35
Publish
Continued from the previous page.
Visibility. This determines who can see the page or post. Most will keep this set to Public, however you may also choose Private
or Password Protected and require a password for viewing.
Publish. Normally you’ll keep this set on immediately, however you can set a date in the past or if you set a date in the future, it
will automatically publish on that date, in the future.
Most to Trash. If you would rather move the post to the trash, you may do so.
Publish. When you’re happy with your page or post, click Publish to make it go live. Since we’re setting up your ﬁrst page and it’s
the homepage, go ahead and Publish it, so we can move on to the next step.
A Note about the Trash
When moving a post to the Trash, this doesn’t completely delete the post, it simply
moves it to a Recycle Bin, if you’re used to Windows, or the Trash, if used to a Mac.
That way, you can always recover a ﬁle if accidentally deleted. The Trash is located
on Posts, Pages, Gallery Items, Sliders and Comments.
Setting the Homepage as THE Homepage
Finally, you’ll need to tell Wordpress what page is THE homepage on your website. Eventually you’ll have numerous pages
throughout your site and Wordpress needs to know which one is your homepage.
Navigate to Settings, then Reading. To the right of Front page displays, select the
radio button A static page (select below). Then select your newly created
homepage for Front page. We’ll leave Posts page alone at this point because we’ll
be setting up our own blog page with the Blog template, later in this guide.
SUMMERTIME USER GUIDE
PAGE 15 of 35
Adding Pages to the
Menu
Now let’s add the newly created Homepage to the theme’s menu. Begin by going to Appearance then Menus.
Setting Up Your Menu
First we need to create a menu that the theme can use. Start by creating a new menu,
called ‘Main Menu’. This is where you’ll add the new homepage you just created.
Scroll down to Pages on the left. You’ll see the homepage you just created in this list, in
fact it will probably be the only page in there at the moment. Go ahead and checkmark that page, then select the Add to Menu
button. You’ll notice that it added that page to your menu on the right.
Later on when you have more pages, you’ll ﬁnd that you can drag those pages around in your
navigation, altering the order in which their displayed. You can also drag pages underneath other
pages to create sub menus.
Now that your homepage is in the menu, be sure the click the blue Save Menu button.
Finally, in the Theme Locations box on the left, select Main Menu (or the name of the
menu you just created) from the drop down menu under Primary Navigation Menu.
Then click the blue Save button. This adds your menu to the navigation area that’s built
into the theme on the header.
SUMMERTIME USER GUIDE
PAGE 16 of 35
Create a Slider
Now let’s create a slider to add to your home page. Start by selecting Sliders in the Menu, then select Add New Slide.
The Fields
Title. This is the title of the slide. Later on we’ll choose whether or not you’d like this automatically displayed on the slide.
WYSIWYG. Similar to the page we setup earlier, you can use this like Microsoft Word. However this time you’ll want to think
about what content you’re placing. This content will be over the slide, so err on the side of less content. And remember, any
formatting you apply will show up, so for instance, if you set the text color, it will be that color on the slide.
If you choose the Normal slider on the page you place this slider on later, the content will automatically be displayed at the bottom
of the slide. However if you choose a Wide slider you’ll be able to determine where the content is placed, in the alignment ﬁelds
below. We’ll discuss placing the slider on a page, in the next section.
If you don’t want any content over your slide, then just leave this ﬁeld blank.
Slide Link. You can make your entire slide a link by supplying a link in this ﬁeld.
Open Link In. If you supplied a link in the ﬁeld above, choose whether you’d like it to open in the same browser window or
open a new browser window.
Slide Title Color. If you choose to display the slide title below, you can set it’s color here.
Slide Content Color. Here you can set the color of the content that’s in the slide. For example, if you have a darker image, you
may want a lighter text color, for the text that’s over the image.
Slide Background Color. The slider does not require an image, if you’d just rather display content. Here you can set the
background color of the slide if you are only displaying content.
SUMMERTIME USER GUIDE
PAGE 17 of 35
Content Horizontal and Vertical Alignment. If using a wide slider (which you select on each new Page created), you can
choose where you would like the content displayed on the slide.
Show Title. If set to Yes, this will show the title, over the slide, that you typed in at the top of this page. The Slide Title Color that
we discussed earlier will set the title’s color.
Slide Categories
This is how you create sets of sliders. For instance, you may want 3 slides for your Homepage and 4
diﬀerent slides for your About page. Let’s make a slide category for our Homepage. Select + Add
New Slide Category, enter ‘Home’ then select the Add New Slide Category button. This will create the
category, and automatically check the new category, assigning the slide you’re creating to the Home
category.
Later when we select a slider to display on the homepage, you’ll select this Home slider from the drop down.
Featured Image
This is the image that you’ll use in the slide. Again, images are optional if you only want to display the content you entered in the
WYSIWYG. However if you are uploading an image, decide whether you’d like this to be a Wide slider image or Normal sider
image. If Wide, make sure the image is at least 1,500 pixels wide by 615 pixels tall. If Normal, make sure the image size is at least
940 x 350.
If you need instructions on how to upload images, please refer to Page 14.
Publish
Finally, once you have everything set, you can publish the slide.
SUMMERTIME USER GUIDE
PAGE 18 of 35
Assigning Sliders to
Pages
Now let’s add the your newly created ‘Home’ slider (the Category you created) to the Homepage.
Begin by selecting Pages from the Menu, then selecting Edit under the Homepage.
Assigning the Slide
Scroll to the bottom of the page, to the Slideshow Options. From there, select Yes under Display Slideshow. Then choose which
Slider Style you want, we suggest Wide. Finally, select your newly created slider from the Select a Slider to Display menu.
Then select the blue Update button at the top, right of the page, under Publish.
Check the Site
If you’ve been following the guide, now would be a good time to check the site
and see your progress. To visit your site, hover your mouse over the name of
your site, in the upper-lefthand corner, then select Visit Site.
You should have Permalinks setup, a Homepage created, a slider on the homepage, and a link to your Homepage in the menu,
centered at the top.
Problems or Questions thus Far?
Remember if you have any questions throughout the setup of this theme, please contact us on our dedicated support site at
http://support.mashedthemes.com.
SUMMERTIME USER GUIDE
PAGE 19 of 35
Setting Up Included
Template Pages
Now let’s setup a few more template pages that content automatically ﬁlters into. These will be the Blog Page, Gallery Page and
Contact Page. By this point you should be becoming familiar with the process of content creation in Wordpress, so we’ll cover
these sections in a little less detail. Please refer back to Creating The First Page, for a greater overview of each element again.
Blog Page
Begin by selecting Pages, then Add New. We’ll usually leave everything in this page blank, except for the Title and Template. First
give the page a Title, probably ‘Blog’. Next under Page Attributes, select Blog in the Template drop down.
Now you do have the option of adding content in the Top Body section, assigning a slider, or setting a Featured Image if desired.
A note about the Sidebar: you will not need to choose a sidebar for this page. The Blog template already has a sidebar built into
the template. And remember, you can set the position of the sidebar in the Blog Theme Options. We’ll populate the sidebars later
in this guide, on Page 22.
Once done, select the blue Publish button.
Gallery Page
Begin by selecting Pages, then Add New. Again we’ll leave everything blank in this page, unless you’d like content in the Top Body
section, a slider or a Featured Image.
Be sure and select Gallery from the Template drop down.
A note about the Sidebar: The Gallery page does not use a sidebar, it’s a full width page.
Once done, select the blue Publish button.
SUMMERTIME USER GUIDE
PAGE 20 of 35
Contact Page
Begin by selecting Pages, then Add New. Here you can add content to the WYSIWYG that will display at the top of the Contact page.
But we’ll leave everything blank in this page, unless you’d like content in the Top Body section, or a slider. We suggest not setting a
Featured Image on this page, instead you can display a Google Map by adding a Google Map link, in the Contact Page Theme
Options.
Be sure and select Contact from the Template drop down.
A note about the Sidebar: you will not need to choose a sidebar for this page. The Contact template already has a sidebar built
into the template. And remember, you can set the position of the sidebar in the Contact Theme Options. We’ll populate the
sidebars later in this guide, on Page 22.
Once done, select the blue Publish button.
Adding these new pages to the Menu
Now let’s go and add these newly created pages to the Menu. Navigate to Appearance then Menus.
Scroll down to Pages on the left. You’ll see the three new pages you just created in this list. Go ahead and checkmark those pages,
then select the Add to Menu button. You’ll notice that it added those pages to your menu on the right. You can then drag those
pages into the order in which you’d like them displayed in the menu.
Check the Site
Let’s go and check the site again. You should now have your three new pages in the navigation, each linking properly to their
respective templates.
SUMMERTIME USER GUIDE
PAGE 21 of 35
Setting Up Widgets
Now let’s add widgets to the footer and other default sidebars. Begin by navigating to Appearance and then Widgets.
Custom Widgets
This theme includes six custom, builtin widgets, each preﬁxed with the word ‘Custom’.
Custom: Recent Posts. This goes beyond the default Recent Posts widget that comes with Wordpress and displays the date
and adds some additional formatting that matches the theme.
Custom: Contact Info. This is a simple widget that displays your contact information and days/hours of operation.
Instagram, Flickr, Pinterest, and Dribbble. These widgets display small images from these services that visitors can click on
to either see larger images (Instagram) or be taken to the image’s page to view the image and see more information.
Builtin Sidebars
This theme also includes default sidebars, that are ready for widgets. Any widgets added to the Blog Widgets sidebar will display
on the Blog page. Likewise, any widgets added to the Contact Page Widgets sidebar will display on the Contact page.
By default there will be three Footer Widget Columns to populate with widgets. You can add or subtract columns in the Footer
Theme Options.
Adding Widgets
Let’s add a widget to the Blog Widgets sidebar. If it’s not already expanded, expand that
sidebar by clicking on the small grey arrow, to the right of the ‘Blog Widgets’ title. Next drag
a widget into that sidebar from the selection of widgets on the left. When added, that
widget should expand, allowing you to ﬁll in the information that it requires.
Once ﬁlled in select the blue Save button. Now that widget will be displayed on your Blog’s
sidebar.
SUMMERTIME USER GUIDE
PAGE 22 of 35
Moving Widgets
Once you’ve added a few more widgets to a sidebar, you may want to reorder their
position. To do so, simply grab the widget and move it to your desired position. You
can also move widgets to other sidebars using this same technique.
Editing and Deleting Widgets
If you’d like to edit or delete an existing widget, ﬁrst expand the widget by selecting the small grey arrow, right of it’s name. Then to
edit, simply make the changes and then click the blue Save button. To delete, click the Delete link.
However, instead of deleting a widget, we suggest just dragging it to the Inactive Widgets
section at the bottom of the page, on the left. Here you can save your widget and it’s
settings for later use.
SUMMERTIME USER GUIDE
PAGE 23 of 35
Creating Custom
Sidebars
Now let’s setup custom sidebars. Your theme has the ability to have an unlimited amount of sidebars. For instance, perhaps you’d
like a speciﬁc sidebar for your About page, and would also like a speciﬁc sidebar for your Products page. With custom sidebars,
this is possible.
Create a Custom Sidebar
To begin, navigate to Appearance then Sidebars. Then to create a new sidebar, click on
the blue Create New Sidebar button. Give this sidebar a name, then select the OK
button. It will now show your new sidebar in the list.
To delete, simple click the Delete Sidebar link, but remember it will delete all of the
widgets from that sidebar, if deleted.
Add Widgets to the Newly Created Sidebar
Now navigate back to Appearance then Widgets. You’ll notice that your new sidebar is listed as a sidebar on the righthand side of
the page, ready to add widgets to.
Displaying the Sidebar
Now you can go back to the page you’d like to display the sidebar on (select Pages in the Menu, then Edit your page), and at the
bottom of that page, under the Sidebar section, select the new sidebar you just created. However make sure you’re either using
the Left or Right Sidebar Page template, on that page.
SUMMERTIME USER GUIDE
PAGE 24 of 35
Creating Gallery Items
Now let’s add some images to your gallery. If you’re following this guide, you’ve already setup a Gallery page and assigned the
Gallery template to that page. If you’ve not done that yet, please follow the directions on Page 20.
To begin, navigate to Gallery Items then select Add New Gallery Item.
The Fields
Title. This is the title of the image you’re adding to the gallery. It will be displayed when visitors rollover the item in the gallery.
Description. This the description for the gallery item. It will also be displayed when visitors rollover the item.
Link. If you’d like your gallery item to have a link, enter it here. A small link icon will show up over the gallery item.
Open Link In. If you supplied a link in the ﬁeld above, choose whether you’d like it to open in the same browser window or
open a new browser window.
Video Link. If you have a video that you would like associated with your gallery item, enter the video’s link in this box. Some
examples of video links:
Vimeo: http://vimeo.com/36031564, http://player.vimeo.com/video/45074303
YouTube: http://www.youtube.com/watch?v=opj24KnzrWo, http://youtu.be/opj24KnzrWo
Metacafe: http://www.metacafe.com/watch/7635964/
Dailymotion: http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people
If a video link is supplied, a video will open in the lightbox when clicked instead of the photo that you’ll upload as the Featured
Image.
SUMMERTIME USER GUIDE
PAGE 25 of 35
Gallery Categories
You can separate gallery items into Categories. To create a new category, select +Add New Gallery Category. The diﬀerent
categories will be displayed along the top of the Gallery page, giving visitors an easier way to sort through your gallery items.
Featured Image
A Featured Image is required because this is the image that will be used for your gallery item. The minimum image size is 235 x
235 pixels. If you’ve provided a video link, this image will only be used for the thumbnail in the Gallery. Otherwise, when visitor’s
click on the magnifying glass icon, it will open your image in a lightbox, as a larger version.
If you need instructions on how to upload images, please refer to page 14.
Publish
Finally, once you have everything set, you can publish the gallery item.
SUMMERTIME USER GUIDE
PAGE 26 of 35
Creating Blog Posts
If you’ve been following this guide, we’ve reached the ﬁnal step in initially getting your site up and running. To add your ﬁrst Blog
Post, begin by selecting Posts from the menu on the left. Next you’ll see a Sample Post listed, click Trash to move it to the trash.
Then select Add New at the top and we’ll create a post.
The ﬁelds when creating a Blog Post are very similar to the ﬁelds used for creating pages, that we discussed on Page 12.
The Fields
Title. The title ﬁeld is just that, it’s the title of your blog post and will be visible to your visitors.
WYSIWYG. You’ll be pretty familiar with this ﬁeld, at this point in the guide. Go ahead and ﬁll in the content for your blog post.
Format
Next select a Format for the Post. Formats allow you to either have a Standard blog post or a Video blog
post. Video blog posts replace the photo that represents the blog post, with a video. To use a video, ﬁrst
select Video under Format, then you’ll add a Video shortcode as the ﬁrst item on the page. The theme will
automatically use that video as the video for the post.
To add a video shortcode, select the Green Plus button on the WYSIWYG. Then select either
Vimeo Video or YouTube Video. Then you’ll input the video’s ID, usually found in the embed
URL. And ﬁnally you’ll select the blue Insert Shortcode button, to insert it into your post.
Now the shortcode should be the ﬁrst item in your post, in the WYSIWYG, and look something
like this:
[youtube videoid="9dgSa4wmMzk"]
If you don’t want to use a video in this blog post, then simply leave Format set to Standard.
SUMMERTIME USER GUIDE
PAGE 27 of 35
Categories
You can separate blog posts into diﬀerent Categories. To create a new category, select +Add New Gallery Category. The diﬀerent
categories will help break up your content and will appeal to visitors who may be interested in just one category of blog posts you
write.
Tags
Tags are completely optional but can help in searching for blog posts on your site.
Featured Image
This is the image that will be displayed at the top of your blog post. Again, if you choose Video as a Format above, then the video
will be displayed instead of an image. Make sure that your image sizes are at least 650 x 487 pixels.
Images are not required, however they help attract visitors to your blog posts.
Excerpts
By default, Wordpress hides this ﬁeld because not all Wordpress themes support it, however this one does. Excerpts are optional
hand-crafted summaries of your content that can be used in your theme. So instead of the ﬁrst few words being pulled
automatically from your blog post, you can write a custom summary that is displayed instead. But remember, you need to have
Excerpts turned on (Page 8) in the Theme Options, for them to appear (however, they are turned on by default).
To display the Excerpts ﬁeld, so you can add content to it, scroll to the very top of your page and
select Screen Options on the right. Then under Show on screen, check Excerpt. Now if you scroll
back down the page, you’ll see the Excerpt ﬁeld.
Publish
Finally, once you have everything set, you can publish the blog post.
Just Getting Started!
By this point, if you’ve been following the guide, you should have a good start to your website, however you’re just getting started!
Please review each section as necessary when adding more Pages, Sliders, Gallery Items and Posts. And continue reading if you
want to learn more about shortcodes.
SUMMERTIME USER GUIDE
PAGE 28 of 35
Shortcodes
As we mentioned before, the green plus button on the WYSIWYG gives you access to more advanced elements that you can drop
into your page or post. Instead of having to write complicated code, you just drop in your information and it builds the code for
you.
You can view examples of each of these shortcodes online, on our demo site at:
http://summertime.mashedthemes.com/features/shortcodes
Inserting a Shortcode
Inserting shortcodes is simple, just click on the Green Plus button, on any WYSIWYG, choose your shortcode,
ﬁll out the ﬁelds and then click the blue Insert Shortcode button. Depending on the shortcode, it will look
something like this:
[button url="http://google.com" style="default"
target="_self"] Button Text [/button]
size="small"
type="round"
That’s a button shortcode. The [button... indicated the beginning of a shortcode, while the [/button] indicated the end.
You can easily see each ﬁeld located in the shortcode, and you can edit these ﬁelds within the shortcode code, later if desired.
You can also manually type in the shortcodes, copy and paste them, and move them around. Shortcodes can seem complicated at
ﬁrst, but once you start using them, you’ll ﬁnd that they’re pretty easy understand.
Now let’s give a quick review of each shortcode below.
Alerts [alert][/alert]
Alerts are great for getting visitor’s attention. Once they’ve read the alert, they can dismiss it by clicking on it.
Alert Color. There are ﬁve diﬀerent alert colors: White, Grey, Red, Yellow and Green.
Alert Text. This is the content that’s in the alert.
SUMMERTIME USER GUIDE
PAGE 29 of 35
Blog Post Scroller [blogposts]
This is a great way to display the ﬁrst few lines of your latest blog posts. It automatically scrolls through them with a link to each
post.
Title. The title that will be displayed above the scroller.
Content or Excerpt. Display content from the actual post or content from the excerpt.
Number of Blog Posts. How many posts would you like it to scroll through?
Category. Type in a speciﬁc category you would like the post’s pulled from. This is optional.
Word Limit. The amount of words from each post displayed.
Buttons [button][/button]
Instead of a simple, underlined link, add a button to get visitor’s attention.
Button URL. This is the page the button will direct users to.
Button Color. There are nine diﬀerent button colors to choose from.
Button Size. Create a small, medium or large button.
Button Type. Create a round or square button.
Button Target. When clicked, select whether you want the link to open in the current browser window or a new browser
window.
Button Content. This is the actual text that will be on the button.
SUMMERTIME USER GUIDE
PAGE 30 of 35
Columns [column][/column],
[column_last][/column_last]
Columns are a great way to break up content into sections.
Begin by choosing a Column Type. This is the size of the column. One third of the page, two thirds, one half, one fourth, or three
fourths of the page.
Next enter the Column Content you’d like in this column. Later on, you can come back and enter more content using the
WYSIWYG.
Next, click the Add Column button at the top to add an additional column. Here you have to think about a little math to make sure
you’re column’s don’t wrap to the next line. For example, if you choose One Third for the ﬁrst column, then you’d want to choose
Two Thirds Last for the second column, because one third, plus two thirds, makes three thirds, or a whole.
You’ll choose Last when it’s the last column in your set, making your columns equal a whole.
Another example, if you choose One Fourth for your ﬁrst column, you’ll want to choose either One Fourth for another column, One
Fourth and One Half Last (making a whole) or just Three Fourths Last (making a whole).
Once you insert your completed column shortcode, it will look something like the example below. This is a One Fourth, One
Fourth, One Half Last example.
[one_fourth] First, One Fourth Content. [/one_fourth] [one_fourth] Second, One
Fourth Content. [/one_fourth] [one_half_last] Final, One Half Last Content. [/
one_half_last]
Which will look like this on the rendered page (borders were added to illustrate the columns):
First, One Fourth Content.
SUMMERTIME USER GUIDE
Second, One Fourth Content.
Final, One Half Last Content.
PAGE 31 of 35
Featured Content Block [featuredcontent][/featuredcontent]
This was used on the homepage of the demo site at http://summertime.mashedthemes.com. The block’s contain a Round Image,
Title, Content and a Button.
Image URL. The URL of the image you’d like to use as a Round Image.
Title. The title that will be displayed below the Round Image.
Content. The content that is displayed below the Title.
Button URL. This is the page the button will direct users to.
Button Color. There are nine diﬀerent button colors to choose from.
Button Size. Create a small, medium or large button.
Button Type. Create a round or square button.
Button Content. This is the actual text that will be on the button.
Gallery Preview [galpreview]
Use this shortcode to pull small images from your gallery.
Title. This is the title that is displayed above the images.
Number of Images. The amount of images it displays.
Google Map [googlemap]
Use this shortcode to easily add a Google Map to any page or post.
Maps URL. This is the URL to the map. Get this URL from maps.google.com, by
clicking on the Link button.
Map Style. Choose normal, satellite or hybrid.
Map Zoom Level. The zoom level at which the map is displayed. Type in 1 (far) to 18 (near).
Maps Height. The height of the map in pixels.
SUMMERTIME USER GUIDE
PAGE 32 of 35
Horizontal Dividers [divider]
Use these to help divide your content.
Divider Style. There are six diﬀerent divider styles to choose from.
Round Image [roundimage]
Display an image as a round image. Note, this does not use TimThumb for dynamic resizing, rather a custom function built into
the theme.
Image URL. The URL of the image you’d like to use as a Round Image.
Image Alignment. Align the image left, center, or right, in your content.
Image Size in Pixels. Enter the size of your Round Image in pixels. We suggest going no smaller than 200 pixels, due to the CSS
having problems keeping the image round.
Tabs [tabs][tab][/tab][/tabs]
Tab groups are a great way to organize content into one area, allowing your visitor to select which tab of content they’d like to read.
Tab Title. The title of this speciﬁc tab.
Tab Content. Type in the content you’d like in this tab. As with columns, you’ll be able to later add additional content in the
WYSIWYG.
Add Tab Button. At the top of the page, this button will add another Tab to this group of tabs. For example, perhaps you’d like
to have a set of tabs for diﬀerent genres of music. You would click Add Tab for each genre type, giving each an appropriate title and
content.
SUMMERTIME USER GUIDE
PAGE 33 of 35
Testimonial Scroller [testimonial_set][testimonial][/testimonial][/testimonial_set]
Show oﬀ the great things your clients are saying about your company.
Title. This is the title for the scroller. Similar to the Blog Post Scroller, this title will be displayed above the testimonies, scrolling
through below it.
Add Another Testimonial to the Set Button. This creates another testimonial set, with it’s own Client’s Name and
Testimonial Content. You can add as many testimonies as you like.
Client’s Name. This is the name of the client who’s given the testimony.
Testimonial Content. This is the actual testimony.
Toggle [toggle][/toggle]
Toggle’s use clickable Plus (+) and Minus (-) buttons to show and hide content to your visitors.
Toggle Content Title. The title that will be clickable by your visitors to either show or hide the content in the toggle.
Toggle Content. The content of this toggle.
Toggle State. Would you like the toggle initially opened or closed on the page.
Vimeo [vimeo][/vimeo]
Embed Vimeo videos directly into your content.
Vimeo Video ID. The ID of the video you’d like to embed, usually found in the embed URL of the video.
Additional Attributes. Any additional attributes you’d like to include with the video.
YouTube [youtube][/youtube]
Embed YouTube videos directly into your content.
YouTube Video ID. The ID of the video you’d like to embed, usually found in the embed URL of the video.
SUMMERTIME USER GUIDE
PAGE 34 of 35
Support
I hope this guide has helped you learn how to administer your new site using my theme. If you have any questions or have found a
bug or problem with this theme, please contact me directly at [email protected].
And again, thank you for purchasing the Summertime Wordpress theme.
SUMMERTIME USER GUIDE
PAGE 35 of 35