CSSReflex » tutorials

10+ Rare WordPress Theme Options Page Tutorials To Get You Started

Naeem Noor — Mon, 15 Feb 2010 15:08:59 +0000

In this post I am going to present you roundup of Rare WordPress Theme Options Page Tutorials. Theme Options Page have become a necessity in every WordPress themes free and premium, and are very user friendly and self explanatory to set up. With the presence of the Options Page the user don’t have to edit the code manually. These are the only tutorials I could find. I hope you find these tutorials valuable. Subscribe to the feed if you would like to be informed for the latest posts.

You may also be interested in one of these older posts
Awesome And Free Fonts For Web Designers
13 Magnificent Free WordPress Portfolio Themes
13 Free Professional Looking WordPress Magazine Style/CMS Themes
25 Essential Tutorials And Resources For Learning CSS3

1. Create An Options Page For Your WordPress Theme

2. How To Create A Theme Options Page For Your WordPress Theme

3a. Create An Awesome WordPress Theme Options Page Part 1

3b. Create An Awesome WordPress Theme Options Page Part 2

4. Create A Settings Page for WordPress Theme

5. How To Add Options Page To Hybrid News Theme

6. WordPress Theme Design with Options Adminstration

7. How To Make A Control Panel For Your WordPress Theme

8. Add An Options Page To Your WordPress Theme

9. Create An Advanced Options Page in WordPress

10. Adding Theme Options To WordPress Child Themes

11. A Video Tutorial by AMPtutorials

12. Thematic Theme Options Panel

13. How to Create a Better WordPress Options Panel

Theme Options Page Frameworks

1. WordPress Theme Options Framework

2. WordPress Theme Toolkit Admin

If i’ve missed any of the tutorials, please inform me by commenting below.

Simple Page Peel Effect for Blogger

Naeem Noor — Mon, 18 May 2009 12:17:17 +0000

Hello, in this post i’m gonna show you how to implement the page peel effect for blogger. This was origianlly done by Sohtanaka.

How to Use

Simply copy all of the code on this page to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).

Next, locate this line in your blog template:

Paste the code from your clipboard directly before this line.

Now add the following code just after

View Demo

Five Cool XHTML & CSS Video Tutorials

Naeem Noor — Sun, 17 May 2009 19:33:16 +0000

Here is a list of helpful xhtml and css video tutorials which i found around the web.

Understanding Divs, Css, and How They Work Together by Ethan and Adam

If you are new to XHTML, you should not miss this video. This video will help you understand how DIVs and CSS work together. The tutorial work on Dreamweaver and with this, it’s more easier to follow what the author was doing. In this website, you can find other videos, maybe useful for anyone who is beginner with CSS, Web layout in PTS…
Watch the Video

Create a Fully CSS Website Layout by Nathaniel

The most famous people in Youtube about posting Design Tutorial Videos. In this video, you will see how to design a complete basic website layout with css, learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! And there are other videos in his website helpful for designer. Check it all!
Watch the Video

CSS Tips & Tricks series by Stephen Korecky

Not a big collection but this series is helpful for you, who want to learn CSS Tips and Tricks that users on over the internet are doing. This series contains 8 episodes and maybe continue to update.
Watch the Video Series

How to Convert a PSD to XHTML by Jeffrey Way

This video is a complete tutorial from PSD slicing and CSS styling… You can see how he did this video with PST, Visual Studio … He said this movie will shows you exactly how to convert a PSD into perfect XHTML/CSS. Yes, i think so.

Watch the Video

Converting a Photoshop Mockup by Chris Coyier

The video below is a part two of series made by Chris Coyier after lots of great feedbacks he received with part one right here. Because of part one is just 10 minutes lenght, he did the part two and in the great video he did, he show you everything, exactly how he created the CSS-Trick layout, but it’s just a mini-version of the current version of CSS-Tricks.
Watch the Video

Blogger Template – Classic XP

Naeem Noor — Sun, 03 May 2009 19:35:04 +0000

Hello Bloggers, good news for everyone as you know that i’ve redesigned my blog and bought a domain(cssreflex). So I’ve decided to release my old blogger template. It’s named as Classic XP.

Info

Designer: Naeem Noor
Theme tested in: IE6, IE7, Firefox, Safari and Opera. – Blogger Beta

Preview

Demo Here

How to use it

!Before changing your template, don’t forget to backup your template and your widgets!

To edit navigation follow these steps → Login → Layout → Edit HTML → and find this code :


 HOME

 PAGE 1

 PAGE 2

 PAGE 3

 PAGE 4

Tabs

Tabs are widgetized and self explanatory.

Download

Blogger Template – Cosmo+

Naeem Noor — Sun, 12 Apr 2009 20:43:00 +0000

Info

Designer: Digital Visions Queenstown Converted by: Naeem Noor Theme tested in: IE6, IE7, Firefox, Safari and Opera. – Blogger Beta

Preview

Demo Here

How to use it

!Before changing your template, don’t forget to backup your template and your widgets! To edit navigation follow these steps → Login → Layout → Edit HTML → and find this code :

 About
 Page 1
 Page 2
 RSS Feed

 Home
 About
 Page 1
 Page 2

Delete ‘#’ and replace with your target link, don’t forget to save your template.

Changing the Logo

To change the logo image to your own, replace the logo.gif with your own logo. PSD file included in the package.

Download

Blogger Template – Blueprint

Naeem Noor — Wed, 01 Apr 2009 07:48:00 +0000

Info

Designer: Joshua Sowin Converted by: Naeem Noor IE 6 & 7 | Firefox 2 & 3 | Safari – Blogger Beta Demo Here

How to use it

!Before changing your template, don’t forget to backup your template and your widgets! To edit navigation follow these steps → Login → Layout → Edit HTML → and find this code :

    Home
 Contact Me
 page 1
 page 2
 RSS Feed

Delete ‘#’ and replace with your target link, don’t forget to save your template. Update: –Fixed Comments Problem.

Download

Add Sexy Bookmarks to Blogger

Naeem Noor — Sat, 28 Mar 2009 10:33:00 +0000

Update: Get the latest SexyBookmarks widget from here

Hello Fellow bloggers! Good news for blogger.com users, now they can add the Sexy-bookmark wordpress plugin. by following these simple steps:

Now, Lets begin.

!Before changing your template, don’t forget to backup your template and your widgets! 1. First of course go to your template editor and tick the ‘Expand Widget Template’. 2. Put this code before

3. Now Put the below code after

Dont Forget to replace my feedburner id(naeemnur) with yours. As for the wordpress users they can download the plugin here you can see the demo below>

Blogger Template – Falling Dreams

Naeem Noor — Thu, 26 Mar 2009 10:10:00 +0000

Info

Designer: Razvan Teodorescu
Converted by: Naeem Noor
IE 6 & 7 | Firefox 2 & 3 | Safari – Blogger Beta
Demo Here

How to use it

!Before changing your template, don’t forget to backup your template and your widgets!

To edit navigation follow these steps → Login → Layout → Edit HTML → and find this code :


 
 Home

 About

 Photos

 Links

 Contact

Delete ‘#’ and replace with your target link, don’t forget to save your template.

Download

Blogger Template – Andrea

Naeem Noor — Wed, 11 Mar 2009 20:24:00 +0000

Info

Designer: Lucian Marin
Converted by: Naeem Noor
IE 6 & 7 | Firefox 2 & 3 | Safari @ Blogger Beta
Preview Here

How to use it

!Before changing your template, don’t forget to backup your template and your widgets!

To edit navigation follow these steps → Login → Layout → Edit HTML → and find this code :


 
 Home

 Contact Me

 page 1

 page 2

 

 RSS Feed

Delete ‘#’ and replace with your target link, don’t forget to save your template.