Tag Archives: WordPress

How to build this pop-up window in WordPress

This is one pop-up window in WordPress:

I used the code as below, but can’t get the pop up window as above:
window.open(‘popup.php’,’popup window’,
‘height=300, width=300, top=180, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no,titlebar=no,channelmode=no’);

Added:

I got some answer from linkedin.com. It is built by lightbox. I think about uploading, it uses AJAX.

WordPress 3.0 uses thickbox, but its author has stopped updating it. So, I will try fancybox.

some useful links:

Updated: Which Lightbox is Right for You? 
Rounding Up the Top 10 jQuery Lightbox Scripts 

http://fancybox.net/

How to create an editor with customized toolbar using tinyMCE like one in WordPress

At first, the editor I built for my website used <iframe>, etc. , and it doesn’t work on firefox. I tried to change to the one that WorkPress uses.

Here I wrote down what I found and think worth to share, also as my note.

All the icons in the toolbar are in one file: irons.gif. Then, how to pick up one of them and show it one the toolbar.
Here one icon is 20px x 20px. Then the code for the first icon is as below:

.icons {
background: url(icons.gif) no-repeat 20px 20px;
background-position: 0 0px;
}

For the second icon:

background-position: 0 -20px;

third:
background-position: 0 -40px;

In the WordPress new post webpage, it includes “Code” and “Visual” tabs. The editor area in the webpages for the two tabs should use the same <textarea>. WordPress uses the code from tinyMCE. Here is the link, where the code can be downloaded here:
http://tinymce.moxiecode.com/

I downloaded this package:

Development package This package contains development tools and full source code.
tinymce_3_3_9_1_dev.zip

and the folder “tinyMCE” includes all the functions I need.

The file “tiny_mce\themes\advanced\skins\default\ui.css” is used.

Put the code below in a file and put it in the same folder with tinyMCE. Then open the file below with IE, it is an editor with a customized toolbar.

Here, remove or exchange the items in the theme_advanced_buttonsx below, the icons in the tool bar can be removed or exchanged. One theme_advanced_buttonsx represent one line in the tool bar. Here I just keep 3 of them, so there are 3 lines of icons on the tool bar.

<html>
<head>
<!– TinyMCE –>
<script type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins :

“pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,
insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,
noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave”,
// Theme options
theme_advanced_buttons1 :
“bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,
formatselect,fontselect,fontsizeselect”,theme_advanced_buttons2 :
“cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,
blockquote,|,undo,
redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 :
“hr,removeformat,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,

ltr,rtl,|,fullscreen,insertlayer,
moveforward,movebackward,absolute,|,styleprops,|,cite,del,ins,attribs,|,visualchars,nonbreaking,
template,pagebreak,restoredraft,help”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,

content_css : “css/content.css”,  // this .css defines the format of contents shown in the editor

// Style formats
style_formats : [
{title : ‘Bold text’, inline : ‘b’},
{title : ‘Red text’, inline : ‘span’, styles : {color :’#ff0000′}},
{title : ‘Red header’, block : ‘h1′, styles : {color :’#ff0000’}},
{title : ‘Example 1’, inline : ‘span’, classes :’example1′},
{title : ‘Example 2’, inline : ‘span’, classes :’example2′},
{title : ‘Table styles’},
{title : ‘Table row 1’, selector : ‘tr’, classes :’tablerow1′}
],
});
</script>
<!– /TinyMCE –></head>

<body>

<form>
<div>
<textarea id=”elm1″ name=”elm1″ rows=”15″ style=”width:700px;”></textarea>
</div>
<div align=”center” style=”width:700px;”>
<input style=”width:100px;”  type=”submit”  name=”save” value=”submit”

/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input style=”width:100px;”  type=”reset” name=”reset” value=”reset” />
</div>
</form>

</body>
</html>

Below is some idea about adding an icon. I didn’t test it.

If one icon needs to add, a functon needs to add in .js like:

function() a.create(“tinymce.plugins.newPlugin”,
{init: function(b,c){b.addCommand …
b.addButton(“new”)}});

in ui.css, add a line like below:
.defaultSkin span.mce_new {background-position:-60px -20px}

If the icon is wider than 20px, some changes should be made as below:

In ui.css, the line defines the width and height of the icon:

.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; width:20px; height:20px}

The “width” should be removed so the wider icon can be used:

.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; height:20px}

Below is what I got for my website:

Related link: http://tinymce.moxiecode.com/

WordPress doesn’t send an email to the one who leaves a comment when the blogger replies the comment

WordPress 3.0 doesn’t send an email to the commentators when the blogger replies the comment. By default, WordPress sends an email notice to the blogger when someone leaves a comment.

At least the WordPress I use works in this way. I tried it today. Maybe the designer thinks that the visitors should go back to the webpage to check the reply.

move blogs from one WordPress to another

I want to move my blogs from the WordPress 3.0.1 in the folder: wordpress301 to a WordPress 3.0 in the folder: iblog .

First, I exported from the WordPress 3.0.1 database and then imported it into the WordPress 3.0 database. The webpages turned broken ( I wonder if it is ok if I transfer the database from the version 3.0 to 3.0.1. ).

Then, I just transfered some tables and keep some tables unchanged.

comments in the tables:
wp_commentmeta
wp_comments

blogs in the tables:
wp_posts

categories in the tables:
wp_terms
wp_term_relationships
wp_term_taxonomy

configurations in the tables. I keep those tables unchanged:
wp_postmeta
wp_links
wp_options
wp_usermeta
wp_users

Then, I replace /wordpress301/ to /iblog/ in the sql file of table wp_posts before I import it in the database, and redirect www.**.com/wordpress301 to www.**.com/iblog. Now everything seems fine.