A) Getting Started

In order to begin installing Redbusiness theme. You need the WordPress version above 3.0, the latest one is better. Here is the download URL. Once you downloaded and set it up, You are ready to go.

Installation
Upon downloading the zip file, you will unzip the file. Upload this folder to your themes folder at: your WordPress installation root directory /wp-content/themes

Log into WordPress administration and click on the Appearance >> Themes tab. After that is done, activate the theme as you would activate any other theme.

B) Home Page options

The home page is designed as a custom post type. As you may see there is a new post type: “Home Page” in the left side navigation besides the ordinary wordpress types. Add a new element for the home page by clicking “Add New”, and select “Introduction” or “bits” section for your need.

1. Welcome Section

See the screenshot for introduction section. this section is designed to let you have a brief introduction on the corporation or the website.

2. Bits Section

And add a new element for bits section on the home page, which displayed under the introduction section. It is better to add three bits, as it is a three column layout. Please note, you can add photos in the “image for posts” custom fields. and it thumb nails are generated automatically in the home page. so don’t worry about the size.

C) Gallery Page setup

The Gallery page is designed as a custom post type. As you may see there is a new post type: “Portfolio” in the left side navigation bellow the “Home Page” type. Add a new element for the portfolio by clicking “Add New”.

Input every necessary fields.

D) Other Pages

Two Pages are predefined: About and Services.The menus About us and Services link to the two pages.

please note, name the pages exactly the same with the figure shows.

E) Widget

Redbusiness has 3 ready made widgets.

1. The first one is “Right Sidebar” will show on every page (with right sidebar page style)
2. The second one is “Contact Sidebar” will show on contact page.
3. The third one is “Service Sidebar” will show on service page.

To add content to sidebar simple go to Appearance > Widgets and drag item into certain sidebar.

Finally

Click preview to check out your website. How do you like it?

Here is a screencast for installation guide. In case the manual does not cover everything.

Are these steps too complicated? Fine, there are three other simpler but expensive ways:

1. Import everything from my demo site

wordpress support export and import from another wordpress functionality. So you can get a copy of my demo site data file and import to your site. Everything is there, and you just need to do some customization. However it is not free, it will cost you 1$.

2. Import everything from my demo site from sql

As everything is stored in the mysql database, you can grab an exported sql database from me. and replace the url to yours and import to your database. And you also need to do some customization. it will cost you 1$ too.

3. Ask me for help. I will setup the site for you

Ok, this is the easiest way. You just send me an email, and then everything is ready. Ok, but it will cost you 20$.

Any way, I hope you can take care all of it by yourself. Of course, i am also glad to help.

From Dec 24th 2011 to Jan 2ed 2012 – sell on us for free instead of 10% fee. You can sell your digital goods (downloadable) on pengbosShop without payment. Submit your digital goods details to me through the contact form. Once it is confirmed by Admin, your good will appear on the PengbosShop.

I sincerely hope that you find our offer valuable goods and services to you, and perhaps you can use the theme to build a website for your client. Please keep in mind that this special deal is valid only for 10 days and then will be offered at the normal price.

[updated on Jan 3rd]
The offer is ended, and the template and services are back to normal prices. Thanks for your attention.

This work is licensed under a Creative Commons Attribution 3.0 Unported License.

If you want to get a regular license for commercial usage, and don’t want the credit links at the footer, please buy a license from pengbosShop

download link:

redbusiness_v0.1

(Size 217.1 kB)

the installation guide: http://pengbos.com/blog/redbusiness-theme-installation-manual

In the new version, i fixed this significant issue by including the wp_head() call in the header.php. Besides this, the issues mentioned in the prior blogs like
1. security issue in timthumb script
2. sending email issues
are all fixed in this new version (actually the v0.1 also includes these fixing)

The download url is

corporattica v0.2 (Size 543.5 kB)

This release is more like a bug fix release, there is no design changes. So please refer to the old version for features and credits and installation guide.

V0.1 http://pengbos.com/blog/a-new-free-premium-wordpress-theme-corporattica-is-ready

Installation Guide: http://pengbos.com/blog/corporattica-theme-installation-guide

This security vunlnerability may lead to hacker’s attack to the wordpress site. So it is very urgent to fix this issue.

The good news is the author of TimThumb and the author of WordThumb have worked together to release TimThumb v2 which fixes these security issues.

Now all wordpress themes from Pengbos.com are patched with the latest TimThumb v2, you can download any of them, and reinstall theme to fix this issue.

You can also replace the timthumb manually by yourself like described below.

1. download the latest timthub script from http://timthumb.googlecode.com/svn/trunk/timthumb.php

2. replace the timthumb.php in the scripts folder in the theme location with the latest version.

That’s it.

Please upgrade the timthumb as soon as possible!!

If you have any more questions, please don’t hesitate to send me an email, i will try my best to help.

But, how to enable the lightbox feature in your own post too? Here is the demo http://demo.pengbos.com/corporattica/?p=13

First, let’s look at the javascript, which enables the fancyZoom, in the header.php

		$(document).ready(function() {
			$('div.photo a').fancyZoom();
                }

This will add the Zoom Effect to any a tag in the div tag classed with photo, and will show content relating to the id referenced in the href of the a tag.

As, the javascript has already been there in the header.php, you have to write html in your post follow the pattern as described above.

<div class="photo">    
       <a href="#yourcontentid">
           <!--please add you img tag or text content here -->
       </a>
</div>    
<div id="yourcontentid">
            <!--please add you img tag or text content here -->
</div>

This is an html template that follows the javascript for enabling fancyzoom in your post. For a template, you can not change some predefined tags, but you can add your own content.
Here are the rules that used by the javascript to enable the fancyzoom, so you should not change:
1. the structure of the html cannot be changed.
2. the class name “photo” for the first div tag cannot be changed.

But, you can change：
1. you can change the href value, but it must be consistent to the id of the second div.
2. add your content to the a tag, and div tag.

as fancyZoom can add Zoom effect to both images and text. So you can put img tag or text to the above template.

Here is an example on how to add thumbnail image to the post, and popup a lightbox with a full sized image on click.

<div class="photo">    
      <a href="#image1">
           <img src="http://demo.pengbos.com/corporattica/wp-content/uploads/2011/03/portfolio-150x150.jpg" alt="" title="portfolio" width="150" height="150" class="aligncenter size-thumbnail wp-image-37" />
      </a>
</div>    
<div id="image1">
       <img src="http://demo.pengbos.com/corporattica/wp-content/uploads/2011/03/portfolio.jpg" alt="" title="portfolio" width="492" height="280" class="aligncenter size-full wp-image-37" />
</div>

see the final effect from the demo here http://demo.pengbos.com/corporattica/?p=13

To fix this bug:

1. Just download the theme again, I have already uploaded the fixed version. Replace the theme files with the latest files.

2. You can also fix it by yourself follow the steps:

$.post(theme_template_dir+"/send_email.php", $("#contacts").serialize(),function(result){

	 $('#send_message').remove();

All set!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<html>
<head>
<title>pengbo's readonly test</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"
	type="text/javascript"></script>
</head>
<body>
<center>
<h2>Readonly?</h2>
<table>
	<tr>
		<td>username</td>
		<td><input name="username" type="text" value="pengbos" size=70 id="username"
			class="inputbox" /></td>
	</tr>
	<tr>
		<td>mail_to_adderss</td>
		<td><input name="mail_to_address" type="text" id="mail_to_address"
			value="pengbos.com@gmail.com" size=70 class="inputbox" /></td>
	</tr>
	<tr>
		<td align="center" colspan="2"><input type="button" value="edit"
			onclick="submitClick(this)"></td>
	</tr>
</table>
</center>
</body>
<script>
	function submitClick(b) {
		if (b.value == "edit") {
			b.value = "submit";
			$(".inputbox").attr("readonly", false);
 
		} else if (b.value == "submit") {
			b.value = "edit";
			$(".inputbox").attr("readonly", true);
		}
	}
	$("document").ready(function() {
		$(".inputbox").attr("readonly", true);
	});
</script>
</html>

it worked in Firefox, but it just did not work in IE 8 (or other IE versions like IE 6,7 ).

Test it against FF/IE: Demo

When i use “Developer Tools” to debug, i found that, when i clicked edit, one of the element’s attribute “isContentEditable” is still false.

If we use raw javascript(without jQuery) to implement this feature, we will write:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

	function submitClick(b) {
		if (b.value == "edit") {
			b.value = "submit";
			//$(".inputbox").attr("readonly", false);
			document.getElementById("mail_to_address").setAttribute("readOnly","");
 
			document.getElementById("username").setAttribute("readOnly","");
 
		} else if (b.value == "submit") {
			b.value = "edit";
			//$(".inputbox").attr("readonly", true);
			document.getElementById("mail_to_address").setAttribute("readOnly","readonly");
                        document.getElementById("username").setAttribute("readOnly","readonly");
		}
	}

And, if we use the debug tool to look into the element, we will find that:

The difference is that the “isContentEditable” is changed to “true”, which is the expected result. So why does jQuery 1.6.2 not change the value to “true”?

Let’s exam jQuery’s source code. first, let’s look at the “attr” function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

attr: function( elem, name, value, pass ) {
		var nType = elem.nodeType;
 
		// don't get/set attributes on text, comment and attribute nodes
		if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
			return undefined;
		}
 
		if ( pass && name in jQuery.attrFn ) {
			return jQuery( elem )[ name ]( value );
		}
 
		// Fallback to prop when attributes are not supported
		if ( !("getAttribute" in elem) ) {
			return jQuery.prop( elem, name, value );
		}
 
		var ret, hooks,
			notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
 
		// Normalize the name if needed
		if ( notxml ) {
			name = jQuery.attrFix[ name ] || name;
 
			hooks = jQuery.attrHooks[ name ];
 
			if ( !hooks ) {
				// Use boolHook for boolean attributes
				if ( rboolean.test( name ) ) {
 
					hooks = boolHook;
 
				// Use formHook for forms and if the name contains certain characters
				} else if ( formHook && name !== "className" &&
					(jQuery.nodeName( elem, "form" ) || rinvalidChar.test( name )) ) {
 
					hooks = formHook;
				}
			}
		}
 
		if ( value !== undefined ) {
 
			if ( value === null ) {
				jQuery.removeAttr( elem, name );
				return undefined;
 
			} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
				return ret;
 
			} else {
				elem.setAttribute( name, "" + value );
				return value;
			}
 
		} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
			return ret;
 
		} else {
 
			ret = elem.getAttribute( name );
 
			// Non-existent attributes return null, we normalize to undefined
			return ret === null ?
				undefined :
				ret;
		}
	},

we can also debug the code step by step in the developer tool. the passed in parameters are: name is “readOnly” value is “false”
when the regular express rboolean test this name readOnly, it returns true as it is a boolean attribute. So there is a boolean hook involved: boolHook (see the highlighted line by yellow in the following diagram).

as the passed in value is false, and there is a boolHook, the code runs into the line 49.

the boolean hook calls set function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Hook for boolean attributes
boolHook = {
	set: function( elem, value, name ) {
		var propName;
		if ( value === false ) {
			// Remove boolean attributes when set to false
			jQuery.removeAttr( elem, name );
		} else {
			// value is true since we know at this point it's type boolean and not false
			// Set boolean attributes to the same name and set the DOM property
			propName = jQuery.propFix[ name ] || name;
			if ( propName in elem ) {
				// Only set the IDL specifically if it already exists on the element
				elem[ propName ] = true;
			}
 
			elem.setAttribute( name, name.toLowerCase() );
		}
		return name;
	}
};

The boolean hook is really simple, if the value is false, remove the attribute, and if the value is true, it set attribute. In our case, it calls “jQuery.removeAttr( elem, name );”

following is the remove Attr function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

	removeAttr: function( elem, name ) {
		var propName;
		if ( elem.nodeType === 1 ) {
			name = jQuery.attrFix[ name ] || name;
 
			if ( jQuery.support.getSetAttribute ) {
				// Use removeAttribute in browsers that support it
				elem.removeAttribute( name );
			} else {
				jQuery.attr( elem, name, "" );
				elem.removeAttributeNode( elem.getAttributeNode( name ) );
			}
 
			// Set corresponding property to false for boolean attributes
			if ( rboolean.test( name ) && (propName = jQuery.propFix[ name ] || name) in elem ) {
				elem[ propName ] = false;
			}
		}
	},

In IE the criteria: jQuery.support.getSetAttribute is false. So the code runs into
jQuery.attr( elem, name, “” );
elem.removeAttributeNode( elem.getAttributeNode( name ) );

and it calls attr function again. This time, the passed in value is an empty string instead of false.

but when the code runs into the boolean regular expression check, it only checks the name. (code line 30 in the attr function) and it get the boolHook again. And then the code runs into hoolHook’s set function. It is different from the first invocation, at this time, the passed in value is an empty string, instead of false. However, boolHook takes this values as “true”(see code at line 8 of boolHook’s set function). And it call elem.setAttribute( name, name.toLowerCase() ); it is totally not expected.

As in the attr function (line 30), it does not check if the value is boolean or string. but in fact, we need to check the value as well, if value is a boolen, then introduce hook, otherwise, don’t use boolHook.

If change the code to check the value type as well, the hooks will not be assigned a boolHook. And the code will run to line 53 in attr function. the result is just the same as our raw javascript way. And it will change the “isContentEditable” value during the removeAttr call.

so the code in line 30 in the attr function can be changed to:

1
2
3
4
5
6

// Use boolHook for boolean attributes
if ( rboolean.test( name ) &&
	(typeof value === "boolean" || value === undefined || value.toLowerCase() === name.toLowerCase()) ) {
 
	hooks = boolHook;
}

Actually, jQuery 1.6.1 is doing this way. I am not sure why does version 1.6.2 have this change.

Thats’ what i found. Hope it help you with “readOnly” issues too.

This is my first time to corporate with a design company. As i am better in developing than design, and flidesigns is a professional design company, so this kind of corporation is really very beneficial to both of us. And it is a good experience to corporate with a design agent. A good start.