----------------------------------------------------------------------------------------------------------------------------

Accende Church Theme - Shortcodes Documentation

----------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------

Table of Contents:

What are Shortcodes and how to use them?

Media Shortcodes

Column Shortcodes

jQuery and other Shortcodes


----------------------------------------------------------------------------------------------------------------------

What are Shortcodes and how to use them?

----------------------------------------------------------------------------------------------------------------------

WordPress Shortcodes are small snippets of code, which help a Website Manager to output complex HTML/CSS/jQuery codes with minimum of programming knowledge.

A simple shortcode looks like this:

[img title="Example Logo"]http://example.com/images/logo.png[/img]

The output will be an image with a title, and the HTML source code will look like this:

<img src="http://example.com/images/logo.png" alt="Example Logo" />

You don`t need to know any HTML/CSS to output complex pieces of code; the only task you have to perform is to copy, paste and adjust the Shortcode snippets.

Further reading:


----------------------------------------------------------------------------------------------------------------------

Media Shortcodes

----------------------------------------------------------------------------------------------------------------------

Check out the Live Examples!

Embed Google Map

--------------------------------------------------------

The Code:

-----------------

[googlemap src="mapURL" width="643" height="400"]

Note:

------------

src="mapURL" => copy and paste the map URL from Google Maps

YouTube Embed

--------------------------------------------------------

The Code:

-----------------

[youtube]http://youtu.be/WdEWzqsfeHM[/youtube]

Note:

------------

http://youtu.be/WdEWzqsfeHM => copy the YouTube URL ( click on Share and copy the URL)

Vimeo Embed

--------------------------------------------------------

The Code:

-----------------

[vimeo]http://vimeo.com/38073758[/vimeo]

Note:

------------

copy the full Vimeo URL

Embed Google Videos

--------------------------------------------------------

The Code:

-----------------

[googlevideo id="3323021761394989726" width="643" height="400"]

Note:

------------

id="3323021761394989726"  => copy the ID from the URL


Embed Flickr Slideshows

--------------------------------------------------------

The Code:

-----------------

[flickrslide name="cubagallery" id="36587311@N08" width="643" height="400"]

Note:

------------

name="cubagallery" => enter the name of the Flickr Member ( copy it from the URL: http://www.flickr.com/photos/cubagallery )

id="36587311@N08" => insert the Flickr User ID ( click on the Avatar and copy it from the new URL: http://www.flickr.com/photos/36587311@N08 )

or use this service: http://idgettr.com/


Embed Flickr Photoset Slideshows

--------------------------------------------------------

The Code:

-----------------

[flickrslideSet name="envato" id="52617155@N08" width="643" height="400" set="72157630337558204"]

Note:

------------

name="envato" => enter the name of the Flickr Member ( copy it from the URL: http://www.flickr.com/photos/envato )

id="52617155@N08" => insert the Flickr User ID ( click on the Avatar and copy it from the new URL: http://www.flickr.com/photos/52617155@N08 )

or use this service: http://idgettr.com/

set="72157630337558204" => click on Sets (under the username), open a Set and copy the ID from the URL


Embed Picasa Slideshows

--------------------------------------------------------

The Code:

-----------------

[picasaslide username="andiszek" album="5114798791984477489" width="643" height="400"]

Note:

------------

username="andiszek" =>add the Picasa Username.

album="5114798791984477489" =>add the album ID. Click on an album and copy the ID from the URL.


Embed PDF files using the Adobe PDF viewer

--------------------------------------------------------

The Code:

-----------------

[pdf url="http://www.YourSite.com/YourPDF.pdf" width="643" height="400"]

Note:

------------

url="http://www.YourSite.com/YourPDF.pdf" => upload the PDF to a server and add the URL

Embed DOC files using the Google Document Viewer

--------------------------------------------------------

The Code:

-----------------

[document]http://xa.yimg.com/kq/groups/22582400/1702216911/name/LAB.docx [/document]

Note:

------------

Upload the document to a Server and add the URL to the Shortcode

Website Snapshots

--------------------------------------------------------

The Code:

-----------------

[snapshot url="http://www.google.com" title="Google Snapshot" link="1"]

Note:

------------

url="http://www.google.com" => Add the URL

title="Google Snapshot" => the title of the snapshot

link="1" => add a link to the target site? (1=yes, 0=no)

Google Pie Charts

--------------------------------------------------------

The Code:

-----------------

[chart data="41.52,37.79,20.67,0.03" bg="fff" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="642x350" title="Traffic Sources" type="pie"]

Note:

------------


----------------------------------------------------------------------------------------------------------------------

Column Shortcodes

----------------------------------------------------------------------------------------------------------------------

General Important Note:

------------------------------------

Please make sure that the last column has always the _last suffix attached! Without it, the columns will not work properly!

Example:

Check out the Live Examples!

1/2-1/2 Columns

--------------------------------------------------------

The Code:

-----------------

[half]Your Column content goes here.... [/half]
[half_last]Your Column content goes here.... [/half_last]

1/3-1/3-1/3 Columns

--------------------------------------------------------

The Code:

-----------------

[one_third]Your Column content goes here.... [/one_third]
[one_third]Your Column content goes here.... [/one_third]
[one_third_last]Your Column content goes here.... [/one_third_last]

1/4-1/4-1/4-1/4 Columns

--------------------------------------------------------

The Code:

-----------------

[one_fourth] Your Column content goes here....[/one_fourth]
[one_fourth] Your Column content goes here....[/one_fourth]
[one_fourth] Your Column content goes here....[/one_fourth]
[one_fourth_last] Your Column content goes here....[/one_fourth_last]

1/5-1/5-1/5-1/5-1/5 Columns

--------------------------------------------------------

The Code:

-----------------

[one_fifth] Your Column content goes here...[/one_fifth]
[one_fifth]Your Column content goes here... [/one_fifth]
[one_fifth]Your Column content goes here... [/one_fifth]
[one_fifth]Your Column content goes here... [/one_fifth]
[one_fifth_last] Your Column content goes here...[/one_fifth_last]

2/3-1/3 Columns

--------------------------------------------------------

The Code:

-----------------

[two_third]Your Column content goes here.... [/two_third]
[one_third_last]Your Column content goes here....[/one_third_last]

1/3-2/3 Columns

--------------------------------------------------------

The Code:

-----------------

[one_third]Your Column content goes here....[/one_third]
[two_third_last]Your Column content goes here....[/two_third_last]

1/4-3/4 Columns

--------------------------------------------------------

The Code:

-----------------

[one_fourth]Your Column content goes here....[/one_fourth]
[three_fourth_last]Your Column content goes here....[/three_fourth_last]

3/4-1/4 Columns

--------------------------------------------------------

The Code:

-----------------

[three_fourth]Your Column content goes here....[/three_fourth]
[one_fourth_last]Your Column content goes here....[/one_fourth_last]

1/4-1/4-1/2 Columns

--------------------------------------------------------

The Code:

-----------------

[one_fourth]Your Column content goes here....[/one_fourth]
[one_fourth]Your Column content goes here....[/one_fourth]
[half_last]Your Column content goes here....[/half_last]

1/2-1/4-1/4 Columns

--------------------------------------------------------

The Code:

-----------------

[half]Your Column content goes here....[/half]
[one_fourth]Your Column content goes here....[/one_fourth]
[one_fourth_last]Your Column content goes here....[/one_fourth_last]

1/4-1/2-1/4 Columns

--------------------------------------------------------

The Code:

-----------------

[one_fourth]Your Column content goes here....[/one_fourth]
[half]Your Column content goes here....[/half]
[one_fourth_last]Your Column content goes here....[/one_fourth_last]


----------------------------------------------------------------------------------------------------------------------

jQuery and other Shortcodes

----------------------------------------------------------------------------------------------------------------------

Check out the Live Examples!

jQuery Tabs

--------------------------------------------------------

The Code:

-----------------

[tabs]
[tab title="First Button" selected="selected"]
FirstTab Content
[/tab]
[tab title="Second Button"]
Second Tab Content
[/tab]
[tab title="Third Button"]

Third Tab Content
[/tab]
[/tabs]

Note:

------------

title="First Button" => the Button Name

selected="selected" => this tab will be selected by default

jQuery Accordion

--------------------------------------------------------

The Code:

-----------------

[accordion name="my_accordion"]
[panel title="Panel 1 Button" open="yes"]
Panel 1 Text
[/panel]
[panel title="Panel 2 Button"]
Panel 2 Text
[/panel]
[panel title="Panel 3 Button"]
Panel 3 Text
[/panel]
[/accordion]

Note:

------------

Give each accordion instance an unique name.

[accordion name="my_accordion"]

Open a panel by default:

[panel title="Panel 1 Button" open="yes"]

jQuery Toggle

--------------------------------------------------------

The Code:

-----------------

[accordion toggle="yes" name="my_toggle"]
[panel title="Panel 1 Button"]
Panel 1 Text
[/panel]
[panel title="Panel 2 Button"]
Panel 2 Text
[/panel]
[panel title="Panel 3 Button"]
Panel 3 Text
[/panel]
[/accordion]

Note:

------------

in order to produce a Toggle, it`s important that you add toggle=”yes” to the code.

If you don`t add this, the default accordion will be displayed.

Example:

[accordion toggle="yes" name="my_toggle"]