17 May, 2012

Insert 'Read More' button in Blogger Imported posts in Wordpress

If you have just imported your posts and comments from Blogger to WordPress then you might have faced two problems:
1. There is a '>' symbol prepended to each post title and post content.
2. Your 'Read more' button from blogger posts is missing.
I have found a simple solution for these problems.

Removing '>' symbol form WordPress posts

To remove '>' symbol from post titles and content, just run following two queries on you wordpress database:
UPDATE wp_posts SET post_title = TRIM(LEADING '>' FROM post_title)
UPDATE wp_posts SET post_content = TRIM(LEADING '>' FROM post_content)

Adding 'Read More' link in WordPress posts

To add 'Read More' link in blogger imported posts you need to run following MySql query on your wordpress database:
UPDATE wp_posts SET post_content = REPLACE(post_content, "<a name='more'></a>", '<!--more-->');
UPDATE wp_posts SET post_content = REPLACE(post_content, "<a name="more"'></a>", '<!--more-->');
Blogger identifies the 'Read More' link by "<a name='more'></a>" code snippet. But WordPress does this by finding "<!--more-->". So we have replaced all occurrences of "<a name='more'></a>" with "<!--more-->". Hope this works for you.
Note: Please take backup of your database before applying above hacks.

Insert 'Read More' button in Blogger Imported posts in Wordpress

If you have just imported your posts and comments from Blogger to WordPress then you might have faced two problems:
1. There is a '>' symbol prepended to each post title and post content.
2. Your 'Read more' button from blogger posts is missing.
I have found a simple solution for these problems.

Removing '>' symbol form WordPress posts

To remove '>' symbol from post titles and content, just run following two queries on you wordpress database:
UPDATE wp_posts SET post_title = TRIM(LEADING '>' FROM post_title)
UPDATE wp_posts SET post_content = TRIM(LEADING '>' FROM post_content)

Adding 'Read More' link in WordPress posts

To add 'Read More' link in blogger imported posts you need to run following MySql query on your wordpress database:
UPDATE wp_posts SET post_content = REPLACE(post_content, "<a name='more'></a>", '<!--more-->');
UPDATE wp_posts SET post_content = REPLACE(post_content, "<a name="more"'></a>", '<!--more-->');
Blogger identifies the 'Read More' link by "<a name='more'></a>" code snippet. But WordPress does this by finding "<!--more-->". So we have replaced all occurrences of "<a name='more'></a>" with "<!--more-->". Hope this works for you.
Note: Please take backup of your database before applying above hacks.

16 May, 2012

jCouch - A jQuery Plugin for Distraction Free Page View

jCouch is a very lightweight jQuery plugin that provides you the feature of viewing a web page in distraction free mode. If your website is text oriented and the visitors on your site prefer reading your site content then this plugin will allow the users to read your web pages in the most convenient way without being distracted by other less useful content on the site. The plugin allows you to combine the selective parts of the web page in a single view. See the live demo.
 Features
  • Light weight
  • Easily customizable
  • Zoom text feature
  • Full jQuery Selectors Support
  • Disable on pressing 'Esc'
Live Demo Download Script

Options

target: (required, string) The elememts to be included in couch mode (comma separated), eg. #header, .post-body, h2
bgColor: (optional, string) Background color of the couch mode. eg. '#ffffff', 'red' etc. Default is white
width:(optional, string) Width of the content in couch mode. eg.'500px', '65%'. Default is full screen.
amplify:(optional, numeric) Factor by which the text-size is to be zoomed. eg. 0.2, 0.5 etc.

How to Use

You need to include following files in your web page before using jCouch:
  • jCouch CSS file
  • jQuery library file
  • jCouch JS file
<link href="jCouch.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jCouch.min.js" type="text/javascript"></script>

Sample Usage 1

$(function(){
// The selectors of couch buttons
// Multiple selectors can be used to enable couch mode
$('.couchBtn, .couchImg').jCouch({
target: 'h1,#post-data', //list of elements to be couched
bgColor: '#ffffff', //background color
width: '500px', //width of couched content
amplify: 0.2 //Factor by which text is to be zoomed
});
});

Sample Usage 2

$(function(){
$('#couchBtn2').jCouch({
target:'#leftcol .widgets',
bgColor: '#f7f7f7'
});
});

Sample Usage 3

$(function(){
$('#couchBtn3').jCouch({
target:'#leftcol .widgets:nth-child(2)', //jQuery selectors are supported in target
bgColor: '#C1371A',
width: '250px'
});
});

Sample Usage 4

$(function(){
$('#fbcouchBtn').jCouch({
target:'#rightcol .widgets:nth-child(2)',
bgColor: '#3B5998',
width: '250px'
});
});

jCouch - A jQuery Plugin for Distraction Free Page View

jCouch is a very lightweight jQuery plugin that provides you the feature of viewing a web page in distraction free mode. If your website is text oriented and the visitors on your site prefer reading your site content then this plugin will allow the users to read your web pages in the most convenient way without being distracted by other less useful content on the site. The plugin allows you to combine the selective parts of the web page in a single view. See the live demo.
 Features
  • Light weight
  • Easily customizable
  • Zoom text feature
  • Full jQuery Selectors Support
  • Disable on pressing 'Esc'
Live Demo Download Script

Options

target: (required, string) The elememts to be included in couch mode (comma separated), eg. #header, .post-body, h2
bgColor: (optional, string) Background color of the couch mode. eg. '#ffffff', 'red' etc. Default is white
width:(optional, string) Width of the content in couch mode. eg.'500px', '65%'. Default is full screen.
amplify:(optional, numeric) Factor by which the text-size is to be zoomed. eg. 0.2, 0.5 etc.

How to Use

You need to include following files in your web page before using jCouch:
  • jCouch CSS file
  • jQuery library file
  • jCouch JS file
<link href="jCouch.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jCouch.min.js" type="text/javascript"></script>

Sample Usage 1

$(function(){
// The selectors of couch buttons
// Multiple selectors can be used to enable couch mode
$('.couchBtn, .couchImg').jCouch({
target: 'h1,#post-data', //list of elements to be couched
bgColor: '#ffffff', //background color
width: '500px', //width of couched content
amplify: 0.2 //Factor by which text is to be zoomed
});
});

Sample Usage 2

$(function(){
$('#couchBtn2').jCouch({
target:'#leftcol .widgets',
bgColor: '#f7f7f7'
});
});

Sample Usage 3

$(function(){
$('#couchBtn3').jCouch({
target:'#leftcol .widgets:nth-child(2)', //jQuery selectors are supported in target
bgColor: '#C1371A',
width: '250px'
});
});

Sample Usage 4

$(function(){
$('#fbcouchBtn').jCouch({
target:'#rightcol .widgets:nth-child(2)',
bgColor: '#3B5998',
width: '250px'
});
});

09 May, 2012

How to create custom module in TikiWiki

TikiWiki or simply Tiki, is a free and open source wiki-based, content management system and Online office suite written primarily in PHP. Tiki is a powerful all-in-one web-based application, offering collaboration, publishing, commerce, social networking, CRM and office productivity tools. If you have just started your Tiki development then you will frequently need to create custom modules in TikiWiki. In this article I will tell you how to create your custom TikiWiki module from scratch. For creating you own module, you need to add two files in TikiWiki:
  • A php module file
  • A smarty template file

Create the PHP module file

Suppose the name of your module is 'Custom Module', then your module file will be named as 'mod-func-custom_module.php'. This file will contain two important functions. The function with '_info' as suffix will contain the basic information of your module like name, description, required parameters etc. The second function 'module_<module_name>' will contain the core functionality of your module.
<?php
//this script may only be included - so its better to die if called directly.
if (strpos($_SERVER["SCRIPT_NAME"],basename(__FILE__)) !== false) {
header("location: index.php");
exit;
}

function module_custom_module_info() {
return array(
'name' => tra('Custom Module'),
'description' => tra('This is a custom module.'),
'prefs' => array( ),
'params' => array(
'username' => array(
'required' => true,
'name' => tra('Username'),
'description' => tra('Please enter username.')
),
'Email' => array(
'required' => true,
'name' => tra('email'),
'description' => tra('Please enter Password')
'required' => true,
'name' => tra('db'),
)
'common_params' => array('nonums', 'rows')
);
}

#Create the module function
function module_custom_module( $mod_reference, $module_params ) {
global $smarty, $tikilib, $user;

#Get module parameters
$username = $module_params['username'];
$email = $module_params['email'];

$smarty->assign('username', $username);
$smarty->assign('email', $email);
}

Create the PHP smarty template file

TikiWiki uses smarty as the template engine. Template file is mandatory for module creation. Each module has a separate template file. The convention for naming the template file is as 'mod-<module_name>.tpl'. So our module template file will be 'mod-custom_module.tpl'. In this file we will print the smarty variables assigned in the module PHP file.
Username: {$username}
Email: {$email}
Don't forget to clear your TikiWiki cache before the new module can appear in the modules list.

 

© 2013 Jquery Giants. All rights resevered. Designed by Templateism

Back To Top