Category: Web Development

How to target IE 8 and bellow inside your css

body {
color: red; /* all browsers, of course */
color : green9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

Setting Up VirtualHosts in XAMPP on Mac

Setup your hosts file first

If you don’t know how to edit your hosts file in mac, please visit my previous post here

Enable VirtualHosts

The first thing you’ll need to do is open the file/Applications/XAMPP/xamppfiles/etc/httpd.conf in your favourite text editor. Look for the following lines:

# Virtual hosts
#Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Uncomment the second line by removing the hash (#), so that Apache loads your custom VirtualHosts configuration file:

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Create your VirtualHosts

Open the file /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf. Towards the bottom of the file you will see some example VirtualHosts, which you should comment out or delete.

At the bottom of the file, add ‘localhost’ as the default named VirtualHost:

<VirtualHost *:80>
   DocumentRoot /Users/???/Documents/workspace/trunk/htdocs
   ServerName test.myserver.local
  <Directory "/Users/???/Documents/workspace/trunk/htdocs">
     AllowOverride All
  </Directory>
</VirtualHost>

How to Modify your hosts file on MAC

Editing the hosts file

Editing the hosts file in Mac OS X – Leopard, is a pretty easy task, especially if you are familiar with the terminal.

Step 1 – Open the Terminal.app

Either by start typing Terminal on the Spotlight, or by going into Applications -> Utilities -> Terminal.

Step 2 – Open the hosts file

Open the hosts by typing on the Terminal that you have just opened:

$ sudo nano /private/etc/hosts

Type your user password when prompted.

Step 3 – Edit the hosts file

The hosts file contains some comments (lines starting with the # symbol), as well as some default hostname mappings (e.g. 127.0.0.1 – localhost).
Simply append your new mappings underneath the default ones. Or edit one of the default values if you know what you are doing!
You can navigate the file using the arrow keys.

Step 4 – Save the hosts file

When done editing the hosts file, press control-o to save the file.
Press enter on the filename prompt, and control-x to exit the editor.

Step 5 – Flush the DNS cache

On Leopard you can issue a simple Terminal command to flush the DNS cache, and have your host file changes to take immediate effect:

$ dscacheutil -flushcache

You can now test your new mapping on the browser

There was an error executing the following command with VBoxManage: [“hostonlyif”, “create”]

I had this error where I tried to turn my vagrant up.
I fixed this issue by restarting my VirtualBox true the terminal.

Here is how to restart your VirtualBox, using command line:

sudo /Library/StartupItems/VirtualBox/VirtualBox restart

How to make your Vimeo or YouTube video responsive

First of all wrap the video embed code with a’div’and specify a 50% to 60% padding bottom. Then, name and specify the child elements i.e ‘iframe’, ‘object’, ‘embed’ as having 100% width, 100% height, with absolute position. This forces all the embed elements to expand to full-width automatically!

Here is the html mark up

<div class="video-wrapper">
   <iframe width="500" height="281" 
src="http://www.youtube.com/watch?v=1CKgKKxyhBI" frameborder="0" allowfullscreen="">
   </iframe>
</div>

Using CSS you can set the video to be responsive.

.video-wrapper { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; overflow: hidden; 
} 
.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
}

Enjoy!

Tags archive page won’t show up for custom post types and takes you to a blank or 404 page

This is another bug within WordPress where it only looks for tags on posts and not the custom post types. Here is how to solve this problem.

If you are seeing the 404 page, chances are that you don’t have the tag.php file so go ahead and create tag.php if you don’t have one already.

Copy and paste the following code in your functions.php  file.

add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
if ( is_category() || is_tag() && empty( 
$query->query_vars['suppress_filters'] ) ) {
$post_type = get_query_var('post_type');
if($post_type)
$post_type = $post_type;
else
$post_type = array('REPLACE WITH YOUR OWN ARRAY');
$query->set('post_type',$post_type);
return $query;
}
}

Make sure to add your own array in the code. Example: ‘books, magazines, apps’

Most Useful WordPress Plugins

Here are some useful plugins for WordPress which are tested and bug free.

WP Simple Survey

  • The test is in multiple choices and you can have as many answers for every single question.
  • Each answer can have its own score which the results can be determined based on the total of your scores.
  • This one has a nice progress bar that shows your progress on the quiz.
  • Forces the user to input their Information such as name and email, you can capture more info on pro version.
  • Has a database which can be managed, imported and exported on pro version.
  • You can direct the users into deferent pages based on the result of the quiz.
  • It comes with 3 ranges of scores. Failing, passing and excellent but you can add more ranges in pro version.
  • It sends the results to any email that you wish.

Link to Plugin

mTouch Quiz

  • This one is very easy to use.
  • You can have hints to answers.
  • It’s smart phone compatible
  • On pro version you can have contact form 7 and Gravity plug-ins and add-ons installed.
  • On pro version you can have timers on each question

Link to Plugin

BuddyPress ScholarPress Courseware.

This one turns the WordPress Buddy Press into an online school with all the features you need.

  1. Class Dashboard
    • Progress Indicator
    • Overall status
    • Student evolution (based on received grates)
  2. Courses / Curriculum
  3. Lectures
    • Handbook/Tree style for content organization
    • Bookmarking of lectures
  4. Bibliography
    • Web API’s integration with WorldCat/ISBNdb
    • BibTex Import
  5. Assignments
    • Responses
    • Quizzes/Tests form builder with automatic grading and response evaluation
    • Forum/bbPress integration
    • Gradebook
    • CSV Import
  6. Schedules
    • Calendar
    • Month, Week, Day view
    • Integrates with Assignments due date
    • iCal export/feed
  7. Customization using an external CSS
  8. Notifications/Emails
  9. Activity Streams
  10. Localizations

Link to Plugin

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Link to Plugin

lightbox Gallery

Changes to the lightbox view in galleries.

Link to Plugin

Under Construction

Makes it so your site can only be accessed by users who log in. Useful for developing a site on a live server, without the world being able to see it.

Link to Plugin

WordPress SEO

The first true all-in-one SEO solution for WordPress, including on-page content analysis, XML sitemaps and much more.

Link to Plugin

WordPress Database Backup

On-demand backup of your WordPress database.

Link to Plugin

WordPress Bugs, Errors and Solutions

You do not have sufficient permissions to access this page

The Problem:

When you try to login into you admin panel after tying your username and password you see a white page with the following line: “You do not have sufficient permissions to access this page”

Why This is Happening:

This is a database related issue. Sometimes when you install the WordPess, you set up the database table prefix to something other than “wp_” and if you use uppercase or any othe characters then this error will take place.

How to fix it:

  1. Get into your PHP my admin database.
  2. Back up your database incase anything goes wrong.
  3. Look into the table that ends with _usemeta.
  4. Fix the prefix exactly how it shows on the table name. Here are the name of some tables to look forwp_autosave_draft_ids
    wp_capabiliates
    wp_metaboxorder_post
    wp_user_level
    wp_usersettings
    wp_usersettingstime

Images not showing on media library after changing the domain name

The Problem:

When you migrate the WordPress from one domain to another one you may experience a problem with your images not showing in the media library.

Why This is Happening:

The problem is that the old domain name still exists on the image path URL and that’s why you can’t see the image.

How to Fix it:

Go to settings > media and un-check the “Organize my uploads into month- and year-based folders”.
I still don’t know why this works like this but I believe it’s a bug in WordPress.

 

How to secure WordPress 3 sites

  1. Backup your site
    it’s highly suggested to backup the database regularly in case if the site gets hacked or crashed.
    One way to back up the entire site easily is true a plug-in called “backwpup”
  2. Keep your WordPress updated
    you need to keep your site updated in order to have the latest security and bug fixes. Here are the 3 things you need to constantly update, when the update is available.
  1. WordPress version
  2. Plug-ins
  3. Themes

Here is a plugin that notifies you whenever there is a new update available “Update Notifier”

 

  1. Choose a strong password
    using a random mix of numbers, letters, special characters and upper and lower case is a great way to create strong password.
  2. Choose trusted plug-ins
    When you are looking for plug-ins, make sure to choose the ones that have reliable recourses, good reviews, documentations, screenshots and ratings. Also you need to make sure that the plug-in is being updated periodically and compatible with your current version of WordPress.
  3. Remove unused plug-ins
    Eliminate all the unused plug-ins, files and themes by removing them in order to keep your site clean and organized
  4. Protect your configuration files
    the “wp-config.php” is a key file to your site security and you need to keep it protected
  1. Protecting it true htaccess
    drop the following code beneath all the other rules into your htaccess file:# PROTECT WP-CONFIG
    <Files wp-config.php>
    Order Allow,Deny
    Deny from all
    </Files>

    Check to see if it didn’t mess up your website and also you need to check and see if the code is actually working on your website.
    Try to go to your wo-config.php true your browser, here is the address:
    http://yourdomainname.com/wordpress/wp-config.php
    if it’s working you will see a 403 forbidden error as it is expected.

  2. Limiting access true file permissions
    make sure your htaccess and wp-config files access permission on your server is set on 644. 
  • Configuring authentication keys
    we can improve the security of WordPress user log-in process by setting up the secret keys to the site configuration file. In your wpconfig.php file if you look under database credentials where it says: “Authentication Unique Keys and Salts”, you will see that freely installed WordPress doesn’t provide any secret keys and we need to add our own keys in here. The quickest and strongest way to set up the key values is to visit the secret key service that is being provided by WordPress, here is the address:
    http://api.wordpress.org/secret-key/1.1/salt
    then copy and past everything into the wp-config.php file overriding the default code.
  • Customizing database prefix
    it is highly recommended to change the database table prefixes fro wp_ into something unique. The best way to do this is during the installation of your word press where you have the option of typing in any word ad your database table prefix. Here is how to properly name your prefix without messing up your database file naming and orders:
    You should keep wp_ in the beginning followed by the unique name and another underscore followed by the table name, here is an example.
    wp_uiquename_tabelname
    Changing your database table prefix after installation is still possible but it’s a bit more complicated step to take here is a link to a tutorial on that:
    http://www.digwp.com/2010/10/change-database-prefix
    1. 9.   Don’t be Admin
      admin is default username created by WordPress and it’s the first choice of the hackers in order to get into your website true admin logging panel. Changing it to any other name than admin is a good step towards your website security.
    1. Setting up file permissions
      you need to make sure your file and directory permissions are right and the best and most secure way that it can be. There is a very good plug-in that can take the guess work out and scan your files and directories and make sure you are on the right path: “WP Security Scan” 
    2. Preventing directory listings
      you have to make sure that your directories are lucked up and are not visible from the browser if there are no index files in there. If so you can easily secure the directories adding the following code into your .htacess file “Options -Indexes” put it preferably on the top of the file and upload it into the server. If the .htacess is not the option you can just add a black index file into each directory.
    3. Securing admin directory from other IP addresses
      we can improve security by preventing unwanted access to the WordPress admin directory using a small slice of code in .htaccess file that we create in the root of wp-admin directory. Simply create a brand new .htaccess file and paste the following code into the file:
      # SECURE WP-ADMIN
      <FilesMatch “.*”>
       Order Deny,Allow
       Deny from all
       Allow from 123.456.789
      </FilesMatch>
      note:make sure to put the correct ip address in the code where it says Allow from and if you don’t know your ip address you can simply search for “what is my ip address” in the google and you will find a tool that will help you find out your IP address.
    4. Hide your version number
      hackers use your version number to attack your specific version security holes and that information is available for the public in your source code, RSS feed and other places. Here is how you do it: You need to copy and past the following code snippet into your “functions.php” which is located in your theme files if there is not one you need to create one and past the code to the bottom of the document.
      // remove version number from head & feeds
      function disable_version() { return ”; }
      add_filter(‘the_generator’,’disable_version’);
      remove_action(‘wp_head’, ‘wp_generator’);
    5. Protect your site from spammers
      In order to protect your site from spammers you need to install the anti spam plug-in “Akismet” simply get the activation code from the website and activated your plug-in.
    6. Secure your admin page
      we can secure our admin page using a plug-in that gives us many options to have more security. The name is “Login Lock


     

    16-Most Useful Web Development Tools

    Web development wouldn’t be so advanced in such a short time without the help of these cool and useful tools that are available today for free on open source platforms. Here are some of the tools that I have come across and approve.

    1. Firebug The most popular and powerful web development tool
      • Inspect HTML and modify style and layout in real-time
      • Use the most advanced JavaScript debugger available for any browser
      • Accurately analyze network usage and performance
      • Extend Firebug and add features to make Firebug even more powerful
      • Get the information you need to get it done with Firebug.

      http://getfirebug.com/

    2. Fire FTP

      FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers.http://fireftp.mozdev.org/

    3. File Zilla

      It’s a  free FTP solution. Both a client and a server are available. FileZilla is open source software distributed free of charge under the terms of the GNU General Public License.http://filezilla-project.org/ 

    4. Empty Cache Button

      Adds a button to your Firefox that enables you to quickly empty your browser cache and optionally reload your page with just one click.https://addons.mozilla.org/en-US/firefox/addon/empty-cache-button/

    5. Web Developer

      The Web Developer extension adds various web developer tools to a browser.https://addons.mozilla.org/en-US/firefox/addon/web-developer/

    6. XML Developer Toolbar The XML Developer’s Toolbar!!…https://addons.mozilla.org/en-US/firefox/addon/xml-developer-toolbar/
    7. Coda

      The ultimate one-window web development app for the Mac.We code web sites by hand. And one day, it hit us: our web workflow was wonky.http://panic.com/coda/

    8. WAMP

      WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database.http://www.wampserver.com/en/

    9. CMS Systems

      A web content management system (WCMS) is a software system that provides website authoring, collaboration, and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage website content with relative ease. A robust WCMS provides the foundation for collaboration, offering users the ability to manage documents and output for multiple author editing and participation.http://en.wikipedia.org/wiki/List_of_content_management_systems

    10. PHP My Admin

      phpMyAdmin is a free software tool written in PHP intended to handle the administration of MySQL over the World Wide Web. phpMyAdmin supports a wide range of operations with MySQL. The most frequently used operations are supported by the user interface (managing databases, tables, fields, relations, indexes, users, permissions, etc), while you still have the ability to directly execute any SQL statement.http://www.phpmyadmin.net/home_page/index.php 

    11. Ubuntu

      Fast, secure and stylishly simple, the Ubuntu operating system is used by 20 million people worldwide every day.http://www.ubuntu.com/

    12. WinMerge

      WinMerge is an Open Source differencing and merging tool for Windows. WinMerge can compare both folders and files, presenting differences in a visual text format that is easy to understand and handle.WinMerge is highly useful for determining what has changed between project versions, and then merging changes between versions. WinMerge can be used as an external differencing/merging tool or as a standalone application.http://winmerge.org/

    13. F Secure SSH

      SSH Communications Security, SSHSecure Shell, Data-in-Transit software for PC.http://www.ssh.com/

    14. Fiddler

      Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.http://fiddler2.com/fiddler2/

    15. Apache Tomcat

      Apache Tomcat is an open source software implementation of the Java Servlet and JavaServer Pages technologies. The Java Servlet and JavaServer Pages specifications are developed under the Java Community Process.Apache Tomcat is developed in an open and participatory environment and released under the Apache License version 2. Apache Tomcat is intended to be a collaboration of the best-of-breed developers from around the world. We invite you to participate in this open development project. To learn more about getting involved, click here.Apache Tomcat powers numerous large-scale, mission-critical web applications across a diverse range of industries and organizations. Some of these users and their stories are listed on the PoweredBy wiki page.Apache Tomcat, Tomcat, Apache, the Apache feather, and the Apache Tomcat project logo are trademarks of the Apache Software Foundation. http://tomcat.apache.org/

    16. Apache Wicket

      A Java web application framework that takes simplicity, separation of concerns and ease of development to a whole new level.http://wicket.apache.org/