Author: Fredrik

Welcome to Themeology!

themeology

Themeology is perfect for business sites, photography blogs, photoblogs, and portfolios! This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts like this one or sub-pages as you like and manage all of your content inside of WordPress. The entire theme includes non-obtrusive JQuery tricks too, so the theme will be as slick any any website you’ve ever used!

Read more

Themeology Control Panel

cpanelsmall



The Themeology Control Panel includes everything that you need to setup and customize your site. Everything from the theme-skin and logo to the homepage layouts and navigation settings is covered in one easy to use jQuery options panel. Check out the full list and a quick video preview below:

[left_col]

Design Settings

  • Skin Selector (20 Skins)
  • Custom Logo Image
  • Custom Browser Icon
  • Cufon Font Replacement Settings
  • Body Font Selector
  • Custom CSS Panel
  • Alpha Loader
  • Stagger Image Gallery Loader

Navigation Options

  • Full Menu Builder (WP 3.0x Ready)
  • Search Bar (on/off)
  • Social Media (on/off)
  • Center the Navigation (on/off)
  • Navigation Width

Social Media Options

  • Twitter
  • Facebook
  • Vimeo
  • Flickr
  • LinkedIn
  • Tumblr
  • Email
  • RSS

[/left_col]

[right_col]

Nivo Slider Options

  • Show the Slider? (on/off)
  • Slider Skin (Light/Dark)
  • Slider Category
  • Number of Slices
  • Animation Effect (random, slice, fade, directional, etc.)
  • Animation Speed
  • Pause Time

ShoutSpace & BlurbSpace Options

  • Turn each Homepage Module on or off
  • Enter your own images, icons, and text in each Homepage Module
  • Custom Cufon Styling

Footer Options

  • Turn Advertising on or off
  • Customize Advertisements and Destination URLs
  • Custom Copyright Text
  • Footer Navigation Builder

[/right_col]

Read more

Slider Post 1

This is a slider post! Notice the ”Custom Fields” below – they are how you customize this slide. Essentially, all you NEED is the following:

1. featured_slide_img

The ”featured_slide_img” custom field will allow you to enter a URL to the image of your choosing. Just upload it from the ”Add Media” button above this text-editor and grab the File URL from the image. Remember it needs to be 940 x 284 px to fit into the slider.

Some optional things you can add:

2. featured_slide_caption – Quite simply, this field will add a basic text caption to the bottom of your image. No HTML, sorry! This version of the Nivo Slider doesn’t support that yet.

3. featured_slide_destination – Want this slide to link to somewhere? Add your destination URL here.

4. launch_this_in_a_lightbox – Want to launch a lightbox from the slide? Use this one instead of the ”featured_slide_destination” and whatever link you put in there will load into a lightbox. Keep in mind there are limitations to this – it’s probably best to just link to images unless you are pretty comfortable with the prettyPhoto slider settings.

Read more

Slider Post 2

This is a slider post! Notice the ”Custom Fields” below – they are how you customize this slide. Essentially, all you NEED is the following:

1. featured_slide_img

The ”featured_slide_img” custom field will allow you to enter a URL to the image of your choosing. Just upload it from the ”Add Media” button above this text-editor and grab the File URL from the image. Remember it needs to be 940 x 284 px to fit into the slider.

Some optional things you can add:

2. featured_slide_caption – Quite simply, this field will add a basic text caption to the bottom of your image. No HTML, sorry! This version of the Nivo Slider doesn’t support that yet.

3. featured_slide_destination – Want this slide to link to somewhere? Add your destination URL here.

4. launch_this_in_a_lightbox – Want to launch a lightbox from the slide? Use this one instead of the ”featured_slide_destination” and whatever link you put in there will load into a lightbox. Keep in mind there are limitations to this – it’s probably best to just link to images unless you are pretty comfortable with the prettyPhoto slider settings.

Read more

Slider Post 3

example05

This is a slider post! Notice the ”Custom Fields” below – they are how you customize this slide. Essentially, all you NEED is the following:

1. featured_slide_img

The ”featured_slide_img” custom field will allow you to enter a URL to the image of your choosing. Just upload it from the ”Add Media” button above this text-editor and grab the File URL from the image. Remember it needs to be 940 x 284 px to fit into the slider.

Some optional things you can add:

2. featured_slide_caption – Quite simply, this field will add a basic text caption to the bottom of your image. No HTML, sorry! This version of the Nivo Slider doesn’t support that yet.

3. featured_slide_destination – Want this slide to link to somewhere? Add your destination URL here.

4. launch_this_in_a_lightbox – Want to launch a lightbox from the slide? Use this one instead of the ”featured_slide_destination” and whatever link you put in there will load into a lightbox. Keep in mind there are limitations to this – it’s probably best to just link to images unless you are pretty comfortable with the prettyPhoto slider settings.

Read more

Slider Post 4

example04

This is a slider post! Notice the ”Custom Fields” below – they are how you customize this slide. Essentially, all you NEED is the following:

1. featured_slide_img

The ”featured_slide_img” custom field will allow you to enter a URL to the image of your choosing. Just upload it from the ”Add Media” button above this text-editor and grab the File URL from the image. Remember it needs to be 940 x 284 px to fit into the slider.

Some optional things you can add:

2. featured_slide_caption – Quite simply, this field will add a basic text caption to the bottom of your image. No HTML, sorry! This version of the Nivo Slider doesn’t support that yet.

3. featured_slide_destination – Want this slide to link to somewhere? Add your destination URL here.

4. launch_this_in_a_lightbox – Want to launch a lightbox from the slide? Use this one instead of the ”featured_slide_destination” and whatever link you put in there will load into a lightbox. Keep in mind there are limitations to this – it’s probably best to just link to images unless you are pretty comfortable with the prettyPhoto slider settings.

Read more

Slider Post 5

This is a slider post! Notice the ”Custom Fields” below – they are how you customize this slide. Essentially, all you NEED is the following:

1. featured_slide_img

The ”featured_slide_img” custom field will allow you to enter a URL to the image of your choosing. Just upload it from the ”Add Media” button above this text-editor and grab the File URL from the image. Remember it needs to be 940 x 284 px to fit into the slider.

Some optional things you can add:

2. featured_slide_caption – Quite simply, this field will add a basic text caption to the bottom of your image. No HTML, sorry! This version of the Nivo Slider doesn’t support that yet.

3. featured_slide_destination – Want this slide to link to somewhere? Add your destination URL here.

4. launch_this_in_a_lightbox – Want to launch a lightbox from the slide? Use this one instead of the ”featured_slide_destination” and whatever link you put in there will load into a lightbox. Keep in mind there are limitations to this – it’s probably best to just link to images unless you are pretty comfortable with the prettyPhoto slider settings.

Read more

Slider Post 6

example06

This is a slider post! Notice the ”Custom Fields” below – they are how you customize this slide. Essentially, all you NEED is the following:

1. featured_slide_img

The ”featured_slide_img” custom field will allow you to enter a URL to the image of your choosing. Just upload it from the ”Add Media” button above this text-editor and grab the File URL from the image. Remember it needs to be 940 x 284 px to fit into the slider.

Some optional things you can add:

2. featured_slide_caption – Quite simply, this field will add a basic text caption to the bottom of your image. No HTML, sorry! This version of the Nivo Slider doesn’t support that yet.

3. featured_slide_destination – Want this slide to link to somewhere? Add your destination URL here.

4. launch_this_in_a_lightbox – Want to launch a lightbox from the slide? Use this one instead of the ”featured_slide_destination” and whatever link you put in there will load into a lightbox. Keep in mind there are limitations to this – it’s probably best to just link to images unless you are pretty comfortable with the prettyPhoto slider settings.

Read more

Theme Typography

While custom control panels and plugins are great, one of the strongest points of Themeology is it’s meticulous attention to details in the area of typography. Every major type element has been addressed; You can even change both the Title Fonts and Body Fonts with the flip of a switch in the dashboard; Heck, you can even disable the title-font-replacement if you feeling like straight forward web-fonts instead of the flashy new stuff.

[left_col]

Custom Title Fonts

The theme comes pre-packaged with a very special version of the Mido Font, complete with ALL characters (including the funky stuff like $^*#@). That’s not all though, you can quickly switch to one of the other 5 font-styles included or turn font-replacement off altogether.
[/left_col]

[right_col]

Custom Body Fonts

This brand new option in the control panel allows you to quickly flip between a ”Serif” and a ”Sans-Serif” font stack so that you have exactly what you need for your project. Additional tweaks can be made easily using a little CSS and the Firebug plugin if you so choose.
[/right_col]

[clear]

Superquotes

[superquote]
95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.
[/superquote]

Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic?

Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites:

Standard Blockquotes

Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.

With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designer’s task “to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him”.

Macro-typography (overall text-structure) in contrast to micro typography (detailed aspects of type and spacing) covers many aspects of what we nowadays call “information design”. So to speak, information designers nowadays do the job that typographers did 30 years ago:

Read more

Integrated Shortcodes

best-must-have-wordpress-plugins

Themeology comes jam packed with useful features, like shortcodes, custom admin options, several custom page templates, and more! This page will walk you through the basic shortcodes that come pre-installed and ready for action:

Shortcodes

Shortcodes are a cool feature in WordPress that essentially allows you to do some pretty incredible things by just inserting a ”shortcode” into a page or post. Using Shortcodes is a breeze, just insert one where you want the relevant content to show up and, whallah!, it works like magic. Here’s a list of just a few of the shortcodes included in Themeology. Remember to replace any squiggly brackets ”{” with square brackets ”[", and for the shortcodes that require customization (like the donation shortcode), edit the information in functions/shortcodes.php. Enjoy these!

1. Related Posts

Related posts are an easy way to get your visitors staying longer on your blog. There’s tons of plugins to display them, but you can also use this simple shortcode and be in business in mere seconds!

{related_posts}


Source:
http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress

2. Multiple Column Content on a Post or Page

Just wrap the following shortcodes around a "left" and "right" column of content and the Theme will do the rest - whallah, 2 columns on one page or post!

{left_col}Your Left Column{/left_col}
{right_col}Your RightColumn{/right_col}

[left_col]

This is the Left Column

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
[/left_col]

[right_col]

This is the Right Column

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
[/right_col]

3. Google Charts

Including Google Charts into your posts and pages has never been easier. Just use this shortcode and fill out your own particular details and the chart will be posted automatically, like in this example:

{chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"}

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

Source:
http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress

4. Google Adsense Integration

Use this simple little shortcode to include Google Adsense directly into your pages and posts!

{adsense}

[adsense]

Source:
http://www.wprecipes.com/how-to-embed-adsense-anywhere-on-your-posts

5. Premium Content for Members Only

You can offer premium content for registered visitors by using this shortcode on the premium content pages and posts!

{access capability="switch_themes"}


Source:
http://justintadlock.com/archives/2009/05/09/using-shortcodes-to-show-members-only-content

6. Remove WordPress automatic formatting

Use this shortcode to display code snippets on your blog and remove that pesky WordPress automatic formatting on certain portions of text.

{raw}This is some unformatted text{raw}


Source:
http://wordpress.org/support/topic/280732

7. Add administrative notes

Use this shortcode to leave messages on posts that can only be seen by other admins. The blog owner can now, for instance, make editorial notes on a post.

{note}This is an editorial note - only visible to admins!{/note}

[note]This is a personal note that only admins can see![/note]


Source:
http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/

8. Grab the last image in a post

Use this shortcode to display the last image in any particular page or post!

{postimage}

[postimage]


Source:
http://www.wprecipes.com/wordpress-shortcode-easily-display-the-last-image-attached-to-post

9. Create a Send To Twitter button

Use this shortcode to send posts to Twitter, automajically!

{twitter}

[twitter]


Source:
http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/

10. Embed an RSS Feed

Use this shortcode to display an RSS feed directly in your posts and pages.

{rss feed="http://feeds.feedburner.com/MakeDesignNotWar" num="5"}


Source:
http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/

11. Embed an RSS Button

Use this shortcode to display an RSS button directly in your posts and pages.

{subscribe}

[subscribe]

Source:
http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/

12. Display your blog stats using shortcodes

Display all sorts of awesome information about your blog by installing this plugin and using these shortcodes:

{pagerank}
{feedburner_subscribers}
{alexa_rank}
{technorati_authority}
{technorati_rank}
{user_count}
{post_count}
{page_count}
{comment_count}
{trackback_count}
{avg_comments_per_post}
{category_count}
{tag_count}
{link_count}
{google_backlinks}
{yahoo_backlinks}
{delicious_bookmarks}


Source:
http://www.improvingtheweb.com/wordpress-plugins/blog-stats/

13. Add a Donation Button

Replace the default ‘account’ with your paypal email address, and output using [donate]. Remember you can override the default ‘text’ too in the shortcode. You can style this link with css (as ive done) easily.

{donate}

[donate]

Source:
http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress

Read more