Monthly Archives: June 2013

Simple Ajax Example

Here is a simple Ajax example to grab a value from a PHP file. The same method would be used for a .txt file or a json request value.

JavaScript Code:

function get_txt(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var returnval=xmlhttp.responseText;
alert(returnval);
    }
  }
xmlhttp.open("GET","phpscript.php",true);
xmlhttp.send();
}

PHP Code:

<?php

echo "This text came from a PHP file!";

?>

To test, simply save the JavaScript code in an HTML file in the header and save the PHP code in a PHP file named phpscript.php. Then add the following button in the body of the HTML file:

<input type="button" value="TEST" onclick="get_txt()" />

Add Most Popular Posts List to WordPress

Today I had a project that required the addition of a list of the top ten most popular posts to the sidebar of a WordPress blog. Here is the code I eventually got to work after trying several plugins that did not work because of the custom theme I was using. So if you have a similar problem, use this simple code snippet to show the top ten posts according to the number of comments made on each.

Add this code wherever in your theme template you want the most popular posts to display. I wrote this code for the sidebar, so I put mine in sidebar.php:

<!--posts by popularity:-->
<br /><br />
<div>
    <h3>Most Popular Posts</h3>
</div>

<div>
<ul>
<?php
$popular_posts = $wpdb->get_results("SELECT id,post_title FROM {$wpdb->prefix}posts WHERE post_status='publish' AND post_type='post' ORDER BY comment_count DESC LIMIT 0,10");
foreach($popular_posts as $post) {
    print "<li><a href='". get_permalink($post->id) ."'>".$post->post_title."</a></li>n";
}
?>
</ul>
</div>

Then you can add your own styles in style.css or use the ones I did below:

.related_head{
width:320px;
border:2px solid #f9a86f;
background:#f9a86f;
border-radius:15px 15px 0px 0px; /*topleft, topright, bottomright, bottomleft*/
}

.related_head h3{
text-align:center;
text-decoration: underline;
font-size:135%;
color:#dbe475;
}

.related_content{
width:320px;
border:2px solid #f9a86f;
border-radius:0px 0px 15px 15px;
}

.related_content a{
font-size:125%;
}

Get Rid of submenu indicator in Udesign WordPress Theme

Are you as annoyed with that little character after the menu items that have sub-menus in the Udesign theme's main navigation as I am? Here is the simple solution. Nothing is generally simple when making changes to the UDESIGN theme, so I like to post little hints to help people who may be struggling. To get rid of that little character after main navigation menu items, ,simply add the following line of code to the style.css file inside the Udesign theme's style1/css folder:

span.sf-sub-indicator{display:none !important;}

Migrating from Drupal to WordPress

Today I had a job where I had to migrate all the posts in a Drupal blot over to a WordPress blog. First I searched for a plugin or existing application to do this and came up blank. Therefore, I wrote my own. Here are the details for anyone needing to attempt the same thing. Unfortunately, there is no easy way to migrate from Drupal to WordPress, but you can hire me to do it for you now that I know exactly what is involved and have done it successfully. I charge about $200 though, so if you think its worth the investment, contact me at linian11@yahoo.com

 

Step one:

First I examined how WordPress imports XML files. This was crucial because my PHP program was going to write these XML files on the fly from scraping the Drupal site. You may ask why I chose this method and I will tell you. I didn't have either Cpanel access or database access to either the Drupal site or the WP site. Besides that, even if I did have all the access I wanted, the techniques I read about online for using sql queries to migrate the data were inconsistent and unreliable to say the least.

 

Step Two:

Next, I wrote a PHP script to parse the Drupal site and extract the individual post contents. Then I made the script write XML output and save it to an .xml file which later I would import into WordPress.

 

If anyone would like to have this done, I have the script and would have to modify it on a per case basis to make it work with your Drupal and WordPress installations, but I can do it and will do it for cheap since I have a good head start.

 

 

Editing Style of the Cheope WordPress Theme

This tutorial describes how to make changes to the U-Design WordPress theme and most of the content will probably apply to most other themes as well.

Finding the element you wish to edit To find what you need to edit, I use Firefox with the Firebug plugin. Right click on the page element you wish to change the style of and select "Inspect Element" to view it's HTML and CSS code at the bottom of your browser window.

In my case, I wanted to change out the background in the U-Design theme so I clicked on an area where only the background was visible and got the div id for that element which in my case was "top-wrapper" there are several sections to the background in the U-Design theme, that is the top one. I checked all the CSS files in the source code and that top-wrapper element wasn't listed in any of them, so I went to FTP client and searched around to find it in

Finding the style sheet that has the CSS

Next you have to find the style sheet that has the CSS declaration you are seeking. Do this by looking at the source of the page and do a search for ".css" to quickly find the style sheet names. Then go to your FTP client and locate the file to download for editing.

The trick with UDESIGN styles to change the background:

Finally I figured out through hours of trial and error that the way to get the full background image implemented in UDESIGN theme was to go to the wp admin and go to "settings" click on "page-navi" and uncheck the box that said to use pagenavi styles...