Teddy WordPress Theme2.2.2 Using FTP: • Login to your FTP server and navigate to your WordPress...

Thank you for purchasing Teddy.If you have any questions that are beyond the of this documentation, please feel

free to email via my user page contact form here.

Teddy WordPress Theme Documentation

By bwsm / uiueux studio www.uiueux.com [email protected]

Last edited: 2013-4-20

http://themeforest.net/user/bwsm


http://www.uiueux.com

http://www.uiueux.com

mailto:[email protected]

mailto:[email protected]

Content

1. Frequently Asked Questions

2. Installation3. Adding Content

4. Pages and Menus

5. Shortcode6. Theme Options

7. Translate8. JavaScripts

9. Sources and Credits

Teddy WordPress Theme - Documentation

1. Frequently Asked Questions

1.1 Create a homepage (for beginner)

1) to create a page for the homepage content – then

2) go to Settings > Reading: Front page displays and

3) select a page which display as the homepage to be your Front page4) Save Changes

1.4 How to crop a specific area of a uploaded image to be the thumbnail

With the function comes with WP, we could crop a specific area from a uploaded image:1) edit a gallery post

2) upload a image (not feature image)

3) in Add Media window, press the Edit Image button to crop a area for your thumbnail.

1.6 Quickly set up Contact page and About page

Please refer to 9. Appendix.

2. Installation

To use a WordPress theme you must have a working version of Wordpress already installed. For information in regard to installing the WordPress platform, please refer to the WordPress Codex-http://codex.wordpress.org/Installing%20WordPress

2.1 Extract the package file


http://codex.wordpress.org/Installing%20WordPress

http://codex.wordpress.org/Installing%20WordPress

After extract the main zip file, you'll see these folders and files:

Teddy - main theme folder

‣ img - UI images folder

‣ js - javascript files folder

‣ styles - css file folder

‣ functions - Options and widgets php files

‣ languages - po mo files for muti-languages

Teddy Documentation.pdf - help file

Teddy.theme.wordpress.demo.data.xml - dummy content file

Teddy.zip - zipped theme file

Log - log file and history version

Psd - Layered psd files

2.2 Install theme file

This template works well for WordPress 3.5, update yours if needed.

Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

2.2.1 Using WordPress Theme Upload:

Be sure to extract the file "teddy.zip" from the ThemeForest download before uploading.

Using the ThemeForest ZIP file directly will result in a "Missing Style Sheet" error.

• Login to your WordPress admin.

• In the "Appearance > Themes" menu click the tab "Install Themes"

• At the top of the page click, "Upload", then click the file input to select a file.

• Select the zipped theme file, "teddy.zip", and click "Install Now"

• After installation you will receive a success message confirming your new install.

• Click the link "Activate"


2.2.2 Using FTP:

• Login to your FTP server and navigate to your WordPress themes directory.

• Normally this would be "wp-content/themes"

• Extract folder "teddy" from the zipped theme.

• Copy the folder "teddy" to your themes directory.

• After the files finish uploading, login to your WordPress admin.

• In the "Appearance" menu click "Themes"

• Click "Activate" for the theme "Teddy Theme"

3. Adding Content

3.1 Setup Categories

Before adding items(posts), it is recommended to setup the category structure for your next work. Then when you add or update your post, you could select the categories directly.

3.2 BackSlider

Use the plugin BackgroundSlider you could create multiple sliders for different pages. It is recommended to add a Slider before adding post/pages if you want to use background slider.

If a slider be set to be default slider, then it would be applied to all pages and post content pages.

If you set a particular BgSlider for a page, the Default Slider woud be replaced for the current page.


3.3 Adding Posts

This theme provide 4 formats for your post, you could choose either of them to match your need when creating a post. Theses formats would affect the layout of post in list page and content page.

• Standard

The standard format will show the title, content and featured image(optional) in the list page. It looks like:


Standard Post with Featured Image:

Blog: There are 3 layouts for standard post, you could choose the “Blog” to post a blog, a blog with feature image will looks like:


• Gallery

The Gallery Post is used to post images, the latest uploaded image will be display in the list. There are 6 Layouts for gallery post in list page,

A


B

C

D


E

F

• Audio

The Audio Post support mp3 format audio files and SoundCloud items. Post will looked like:


• Video

The Video Post suport Youtube, Vimeo and all other videos with embed codes. You could enter the embed codes or Youtube and Vimeo URl ( e.g. http://www.youtube.com/watch?v=xxxxxxx or https://vimeo.com/xxxxxxxx ):


http://www.youtube.com/watch?v=xxxxxxx




https://vimeo.com/xxxxxxxx

https://vimeo.com/xxxxxxxx

4. Pages and Menus

4.1 Adding pages

To make menus work, you must setup the pages first. The menu you want to display in the site need to be linked to the specified pages.

4.1.1 Adding page

Go to “Pages > Add New” to add a new page. The page could be displayed as a list page or static page depending on your requirement (the drop-down menu named Template).

List page: This option will make you page displayed as a list, you need to assign the category you want to show in this page.

Static Page: If you want it is a static page, such as About us, Contact, you need to input the content into the text editor to edit your page.

Slider: The slider could be showed in any page (optional).

4.1.2 Setup a page as Homepage:

Go to Settings > Reading, select “A static page”, and choose your page you want to show from the drop=down menu “Front page”.


4.2 Custom menus

Navigate to Appearance > Menus, click “+” to create a new menu. It is recommended to create you menu from Pages or Custom. You could select some pages in “Pages” panel and click “Add to menu”, the page items should be displayed in your menus, you could drag and drop the items to order them. Click Save Menu.

In “Theme Locations” panel of left bar, you need to select the menu you created and click Save.


5. ShortcodeFollowing snap shows the ShortCodes provided by this them:

5.1 Buttons

Examples for Buttons:


5.2 Message Box

Examples for Box:

5.3 Line

Examples for Line:

5.4 Title

Examples for Title:

5.5 Bordered Image

These are examples for Image:


5.5 Round Image

It is recommended to upload a square picture for Round Image:

5.6 List

These are examples for Buttons:


5.7 Column

This is an one third + two third Column example:

5.8 Fixed Column

This is an example for Fixed Column with 400px width:

5.9 Icon

These are examples for Icon:


5.10 Embed

You could directly insert the URL of Youtube, Vimeo video or Twitter,

For videos, it is recommended to set a width for the video.

5.11 Social Icons

These are examples for Social Icons (the 1st is for mouseover status):

5.12 Map

Example for Map:


5.13 Contact Form

Example for Contact Form:

6. Theme Options

Navigate to “Appearance > Theme Options”, you could customize most of the appearance elements for your site.


6.1 Appearance > Theme Options > General

Logo(image) － Custom the logo image or logo text, you could also setup your high

resolution logo image for retina displayers.

Sidebar － the Sidebar width and Search bar, copyright options

List Page and Content Page － Text descriptions in the site

System － Email, Track code and the icons for browser and mobile devices.

6.2 Appearance > Theme Options > Social Networks

Setup the social media icons for site and posts.

6.3 Appearance > Theme Options > Color Settings

Most settings about color are in this section. We have provide two color sets for white and

dark style, and you could do many detail settings on the basis of these two skins.

6.4 Appearance > Theme Options > Font Settings

This section is for setting up the text’s fonts: size and type.


7. TranslateTeddy theme is translation and localization ready, you can easily translate the entire plugin for your native language. To do this, please follow the steps below:

7.1 Download Poedit

Poedit is a multiplatform application which you can use to translate .PO files easily and compile them into .MO files. You can download it from here.

7.2 Start translating

Launch Poedit and open the default .PO file (default.po) for editing. It can be found in your "/wp-content/themes/teddy/languages/" folder. When you open this file, you will have a list of the all the available strings for translating. When you save your work, Poedit will generate an MO file, WordPress will use this file to load your translation.

7.3 Use your translation

When you finished, you need to rename your new .PO and .MO files, so WordPress will be able to identify the corresponding language that you made your work for. You have to include in their file name the name of the plugin followed by a dash and the language and country identifier separate with an underscore. Here you can find all the language codes, and here are the country identifiers. For example, your new files will be: fr_FR.po and fr_FR.mo , de_DE.po and de_DE.mo.

After that, you need to copy your new files into your "/wp-content/themes/teddy/languages/" folder.

And that's it, you are ready to go. Please note that your WordPress installation needs to be set to the extract same locale as you specified in your file names. This settings can be found in your wp-config.php file. If you are using WordPress in your native language, you don't have to worry about this setting.

8. JavaScripts


http://www.poedit.net/download.php

http://www.poedit.net/download.php

http://www.gnu.org/software/gettext/manual/html_chapter/gettext_16.html#Language-Codes

http://www.gnu.org/software/gettext/manual/html_chapter/gettext_16.html#Language-Codes

http://www.gnu.org/software/gettext/manual/html_chapter/gettext_16.html#Country-Codes

http://www.gnu.org/software/gettext/manual/html_chapter/gettext_16.html#Country-Codes

This theme imports several JavaScript files. All located in the "js" folder.

jquery.easing.1.3 – jquery easing library

main.js – main custom javascript

jquery.hoverdir.js – Mouseover effect

bootstrap.js – bootstrap layout

jquery.infinitescroll. js – Infinite scroll(items load)

manual-trigger.js – Twitter style pagnaition

Comments-ajax.js – ajax type comments

jquery.isotope.min.js – Waterfall list

jquery.ui.map.js – Google Map

Jplayer.js – HTML5 player

jquery.backslider.min – background slider

jquery.lightbox.min.js – Lightbox

jquery.jscrollpane.min.js – Audio player scroll

jquery.nicescroll.min.js – Scrollbar

9. Sources and Credits

The following elements have been used in this theme.

WordPress Options Panel: http://wptheming.com/2010/11/thematic-options-panel-v2/

Post Formats Admin UI : https://github.com/crowdfavorite/wp-post-formats

TinyMCE: http://www.tinymce.com

Icon: http://www.iconfinder.com/iconsets/picol-vector


http://wptheming.com/2010/11/thematic-options-panel-v2/

http://wptheming.com/2010/11/thematic-options-panel-v2/

https://github.com/crowdfavorite/wp-post-formats

https://github.com/crowdfavorite/wp-post-formats

http://www.tinymce.com/




The End

Thanks again for purchasing Foto. If you have any questions that are beyond the of this documentation, please feel

free to email via my user page contact form here.




Teddy WordPress Theme2.2.2 Using FTP: • Login to your FTP server and navigate to your WordPress...

Documents

Transcript of Teddy WordPress Theme2.2.2 Using FTP: • Login to your FTP server and navigate to your WordPress...