Get Rid of Top Margin on Custom WordPress Themes

I found out from experience and from browsing the internet that a lot of people are having issues with a mysterious 28px margin appearing at the top of their blog when developing a custom theme or a page template for an existing theme. This frivolous bug has the potential for people to start looking for other unlimited wordpress hosting websites to try to change their current webhosting wordpress website, and assimilate if that does the trick.

The Problem

The problem is that a built-in core WordPress function inserts an inline style into the head of your webpage with a top-margin set to 28 pix.

The Reason

The reason for the 28px top margin is to make room for the WordPress top admin bar, so you may have noticed that this margin is only there if you are logged in.

The Cause

the cause of the inline style is the wp_head function. It happens most of the time when you do not call the wp_footer function at the bottom of the HTML markup, just before the closing body tag.

The Solution

Therefore, the most common solution to make this go away, is to simply make sure to include the wp_footer function in your theme’s files just before the closing body tag. It can be inserted in either the page.php file or the footer.php file. It can also be inserted in any other page template file as long as it is directly before the ending body tag.

WordPress Hidden Options Page

Amazingly, I have been a WordPress expert for years and never realized there was an semi-hidden options page with a huge variety of settings you can control from a single page in the WordPress admin.

Finding the WordPress options page.

All you have to do is navigate to:

yoursite.com/wp-admin/options.php

and it will take you to the page i am speaking of. Check it out! It will make your life as a WordPress admin much easier.

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…

Creating a WordPress Theme From Scratch

There is a lot to learn about WordPress theme development. In this intermediate level tutorial for aspiring WordPress theme developers, I will describe the bare essentials for developing your own responsive WordPress theme from scratch.

 

What is a Responsive WordPress Theme?

When I speak of responsive WordPress themes, I mean a theme that is mobile friendly with elements that change size and sometimes position according to your current screen size. In my opinion a truly responsive web page should look good in any browser window and any elements on the page should self-adjust according to the window size.

 

Dynamic sizing of elements on the webpage is important. This means that elements should change size and sometimes even shift position while you resize the browser window. In other words, you will see the images change size as you resize the window. Other objects can resize as well,but images are often the number one concern. Divs, text and other inline or block objects can also be sized accordingly while the window size is manipulated. Of course this allows for the page to open at any size and size the elements accordingly.

 

File Infrastructure

The first thing you can do to start your theme is create a directory to house your theme in the wp_content/themes directory of your WordPress installation. Name a new directory after the theme you are creating. In this tutorial, we are creating a theme called responsive_jafty so that is what you can call the directory unless you have a more appropriate theme name in mind, in which case you are free to name it as you please of course.

 

The actual files we will be creating will be style.css, index.php, header.php, sidebar.php and footer.php, the bare essentials to get you started in theme development. These files need to be named as stated above or WordPress will not recognize them as it should.

 

Layout

Before you start coding it is crucial to know what you are doing. The very least you should do is draw a basic wireframe with the main areas of your webpage defined as in the following image:

When developing a professional theme, you will want to do a little more than a simple wireframe, but this works for our learning purposes. In real life, if you were developing a professional theme for yourself or a paying client, you would want to develop a detailed Photoshop rendering of the theme you wish to create. You should at least layout the home page or main posts page in Photoshop including all details. The finished Photoshop template should look exactly like the theme you wish to create. However, a wireframe is often a great way to start if you don’t really know what you want or if you are a stronger developer then you are a designer.

 

Creating Your header.php Script

One of the essential files to create a theme is the header.php file. From looking at the above wireframe, I can tell how I will need to code heaer.php. Here is a working example:

 

<!DOCTYPE html>

<html>

<head>

<title>Jafty Responsive WordPress Theme</title>

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>

</head>

<body>

<div id=”wrapper”>

   <div id=”header”>

   <h1>Jafty Responsive Theme</h1>

   </div><!–end header–>

 

That’s all there is to a simple header file. It just needs a doctype declaration, opening HTML tags an opening wrapper div and the site’s header div with the contents of the header.

Creating the index.php file

The next essential page for your theme is the index.php file that includes the above header as well as the sidebar and footer files. Here is a working example of a simple index.php page:

 

<?php get_header(); ?>

 

   <div id=”main”>

      <div id=”content”>

      <?php if (have_posts()) : while (have_posts()) :     

 

   the_post(); ?>

      <h1><?php the_title(); ?></h1>

      <h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>

      <p><?php the_content(__(‘(more…)’)); ?></p>

      <hr>

      <?php endwhile; else: ?>

          <p><?php _e(‘Sorry, no posts matched your criteria.’);

 

?></p>

      <?php endif; ?>

      </div><!–end content–>

   </div><!–end main–>

   

 

   <div id=”sidebar”>

   <?php get_sidebar(); ?>

   </div><!–end sidebar–>

 

<div id=”delimiter”></div>    

   

   <div id=”footer”>

   <?php get_footer(); ?>

   </div><!–end footer–>

</div><!–end wrapper div–>

</body>

 

</html>

That’s a very basic working example which you may expand upon as necessary to get the desired results. Now lets move on to the footer and sidbar pages next.

 

Creating Your sidebar.php Script

The sidebar.php script just needs to have a few built in functions from WordPress to get your sidebar objects into your template such as categories and archives as in the following example code for sidebar.php:

 

<h2 class=”sidebartitle”><?php _e(‘Categories’); ?></h2>

<ul class=”catlist”>

<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>

</ul>

<h2 class=”sidebartitle”><?php _e(‘Archives’); ?></h2>

<ul class=”archivelist”>

<?php wp_get_archives(‘type=monthly’); ?>

</ul>

 

That concludes sidebar.php, now move on to footer.php to finish our PHP files.

 

Coding footer.php

The footer.php script just needs to have the content for the footer widget. It is nice to have footer.php file so making changes to one file will change the footer throughout the entire site.

 

<h2>Another WordPress Site created by Jafty Interactive Web

 

Development</h2>

&copy; 2013-2035 Jafty Interactive Web Development.

 

That’s a start, you can add what is appropriate for your own footer.

 

The Magic is in the Style Sheet!

The style sheet is probably the single most important file for a new theme. It is what WordPress uses to recognize the theme and provide information in the WordPress admin area regarding your theme, so be careful to include all the necessary elements indicated in the below example:

/*

Theme Name: Responsive Jafty

Theme URI: http://jafty.com/

Description: A bare-bones responsive WordPress theme example.

Author: Ian L.

Author URI: http://jafty.com/

Version: 1.0

Tags: blue, white, two-columns, flexible-width, flexible-header, http://wordpress.org/extend/themes/tag-filter/

 

License:

License URI:

 

General comments (optional).

*/

body {

text-align:center;

}

 

#wrapper{

display: block;

border: 1px #000 solid;

width:90%;

max-width:1400px;

margin:0px auto;

}

 

#header{

border: 2px #000 solid;

}

 

#sidebar{

width: 35%;

height:500px;

border: 2px #000 solid;

float: left;

}

 

#main{

width: 62%;

border: 2px #000 solid;

float: right;

}

 

#delimiter{

clear:both;

}

 

#footer{

border: 2px #000 solid;

}

There you have it. Notice the tags I used. Those help people searching for themes find what they are looking for, so will help make your theme popular if people are searching for the attributes of your particular theme. There are only certain tags that will work here. For a list of working tags, see: http://wordpress.org/extend/themes/tag-filter/

 

Putting It All Together

Okay, we have laid out all the theme elements above. It is time to put it all together and have a working responsive WordPress theme. It is just a start, but you can build on this. It is fluid and adjustable. When you are done, you will probably want to add a section of JavaScript code or Jquery code to resize images on page resize.

 

Now simply upload all the files to the new theme directory we created at the start of the tutorial, then go to your WordPress installation and activate the theme from the admin console. Simple as that! When you open your site you will see a very basic wireframe responsive theme layout as in the two examples below that demonstrate the way it will look in two vastly different screen sizes:

 

 

Above is a narrow screen size and below is a wider size. Notice the way it behaves:

Using JavaScript in WordPress

EmployWorkers.com Virtual Work

Need to hire the perfect coder, designer, developer or graphics specialist? EmployWorkers has all areas of Information technology covered and more.

Virtual employment agency
Where work that needs done, gets done.

Need to find work in the Information Technology field, EmployWorkers.com is for you! We employ all skilled workers in a vast array of areas including, but not limited to graphic design, logo design, Photoshop, web design, web development, application development, special needs coding, PHP, HTML, CSS, SEO, writing of all types, programming of all types and much more. If you need work, visit employworkers.com today and sign up for free. Finding work online has never been easier!

I, Ian L. of Jafty.com have created employworkers.com to fill a niche left open by the buyout of Vworker.com. They had a simpley to use website for posting jobs and finding work. I have expanded on the idea by making it even easier to sign up, post jobs and find work all for free. You never pay a cent, we collect a small percentage of the project price only in cases where a job was completed satisfactory and accepted by the employer. We have a zero risk policy where you don’t pay anything until you are satisfied with our services. Money for projects is held in escrow so the worker knows he will be paid once he fulfils his contract with the employer, but employers can dispute at any time they feel there is a breech in the contract and get their escrowed funds returned to them hassle free. Most times you will find that satisfaction is standard however because employworkers.com uses a skilled pool of workers and expertly matches the most qualified workers with your project.

Go ahead and visit EmployWorkers.com today and give it a try whether you are an employer seeking assistance on a project or a worker looking for your next project, we have got you in mind!

Hiring Virtual Workers

When you need a project done, there is nothing more discouraging sometimes than finding the perfect person for the job. Virtual workers are in abundance, but finding the right one is often a trick that takes time and trial and error to to get right.

The best site out there in my opinion was Vworker.com. Unfortunately, they were recently bought out by freelancer.com who doesn’t quite meet up to the standards Vworker did as far as ease of use of their site and reliability of their worker pool.

The above are two main reasons I decided to start a site called employworkers.com that will facilitiate employers and workers both seeking to work virtually from the home or office. I modeled the site, not after Vworker, but with the same principals in mind. I concentrated foremost of ease of use and allowing only quality workers into the worker pool. The workers will be tested on every category they would like to work under, so employers are sure to get a worker who knows the subject matter at hand.

Adding List of All Posts to WordPress Sidebar

In this tutorial, I will show you the method I used to add all posts to my sidebar. You can see the code in action to the right of this page.

Simple method to include all posts in WordPress sidebar

The easy method that I first used was just to use the wp_get_archives WordPress function with defaults. To do this, simply add the following code to the top of your theme’s sidebar.php file:

<h2>All Posts:</h2>
<?php wp_get_archives(‘type=postbypost’); ?>   

Adding custom post list to WordPress sidebar

I decided I wanted my list styled to my needs however and ended up with the following code to get what you see in the sidebar of this page:

<h2>All Posts:</h2>
 <?php $args = array(
    ‘type’            => ‘postbypost’,
    ‘limit’           => ”,
    ‘format’          => ‘custom’,
    ‘before’          => ‘<li>’,
    ‘after’           => ‘</li>’,
    ‘show_post_count’ => true,
    ‘echo’            => 1,
    ‘order’           => ‘DESC’
); ?>    

<ol>
 <?php wp_get_archives( $args ); ?>
</ol>

The above code demonstrates all the possible arguments you can use with the wp_get_archives function. I wanted an ordered list and the default HTML type shows a list without numbers, so I changed it to custom and used the before and after arguments to place li tags before and after each post title and surrounded the function all with ol tags to complete the layout.

How to Add a File Download Link to WordPress or any Website

Some files naturally download with a regular link tag, but what do you do if you want to provide a link to a PHP file for users to download? This is the solution I used. It can be used to download txt files or other file types as well. Experimentation is your friend.

Add the following code to a file named downloadPHP.php:

<?php

$filename = $_GET[“fnm”];//add your own validation here.
  ob_end_clean();
  header(“Content-Type: application/octet-stream; “);
  header(“Content-Transfer-Encoding: binary”);
  header(“Content-Length: “. filesize($filename).”;”);
  header(“Content-disposition: attachment; filename=” . $filename);
  readfile($filename);
  die();

?>

Save the file as downloadPHP.php and install it in your WordPress root directory or in your website’s root directory if you are not using WordPres or if it’s just easier for you that way.

In your blog post write out your link text using the WYSIWYG editor then select that text and click the link symbol to add a link and add something like:

http://jafty.com/blog/downloadPHP.php?fnm=your_filename.php

Replace jafty.com/blog with the URL to your blog and replace your_filename.php with the file name you want to download and place the file you want to download in the same directory as the downloadPHP.php file or include a path to it with the file name.

or if not in wordpress, simply add the following link tag to download using the above suggestions for changing the format:

<a href=”http://jafty.com/blog/downloadPHP.php?fnm=your_filename.php”>Dowload PHP file</a>

TIPS:

Do not replace the “fnm” variable in the link above and the PHP code above that with anything that could be an “filename” variable in php such as:

filename

thefile

file

I first used “thefile” as the get variable passed to the downloadPHP.php script and it didn’t work because evidently that’s a reserved variable name which I didn’t know. I knew “filename” probably was and “file”, but “thefile” didn’t seem likely. Live and learn.

WARNING!

This script comes with no promises or guarantees and you must use it at your own risk. That said, it is a security risk, so you are responsible for creating your own validation code and security measures if you use this script. The above code is a bare bones style infrastructure meant as a learning mechanism only and needs further precautions in place in a live online environment. So, be careful. It could be exploited by a hacker with malicious intent the way it is.