• Skip to main content

Uly.me

cloud engineer

  • Home
  • About
  • Archives

Archives for January 2014

Validating IP Addresses

January 31, 2014

If you have a form that accepts IP addresses, you might want to validate it to make sure it really is a valid IP address. I’m talking about IPv4 since IPv6 is not yet universally implemented. A valid IPv4 IP addresses should fall between the numbers 0.0.0.0 and 255.255.255.255. In this example, we will use a regular expression and a pattern matching function in PHP to see if it’s a real IP address.

First things first, we need to sanitize the input. We can use the following PHP functions. We will assign the sanitized input to a variable.

// sanitize input from form
$ip_address = addslashes(htmlspecialchars(strip_tags(trim($_POST['ip_address']))));

// sanitize input from form $ip_address = addslashes(htmlspecialchars(strip_tags(trim($_POST['ip_address']))));

This is the regular expression that we will use that accepts valid IP addresses.

// the regular expression for valid ip addresses
$reg_ex = '/^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/';

// the regular expression for valid ip addresses $reg_ex = '/^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/';

We will now compare the two variables: $reg_ex and $ip_address to see if IP address passes the test.

// test input against the regular expression
if (preg_match($reg_ex, $ip_address)) { 
   return TRUE; // it's a valid ip address
}

// test input against the regular expression if (preg_match($reg_ex, $ip_address)) { return TRUE; // it's a valid ip address }

We will now place everything in a tidy function so we can use it anytime we want.

function validate_ip_address($ip_address) {
 
  // sanitized ip address
  $clean_ip_address = addslashes(htmlspecialchars(strip_tags(trim($ip_address))));
 
  // the regular expression for valid ip addresses
  $reg_ex = '/^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/';
 
  // test input against the regular expression
  if (preg_match($reg_ex, $clean_ip_address)) { 
    return TRUE; // it's a valid ip address
  }
 
}

function validate_ip_address($ip_address) { // sanitized ip address $clean_ip_address = addslashes(htmlspecialchars(strip_tags(trim($ip_address)))); // the regular expression for valid ip addresses $reg_ex = '/^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/'; // test input against the regular expression if (preg_match($reg_ex, $clean_ip_address)) { return TRUE; // it's a valid ip address } }

Finally, it’s time to call our function.

$ip_address = $_POST['ip_address'];
 
if (validate_ip_address($ip_address)) {
  echo "It's a valid IP address!";
}

$ip_address = $_POST['ip_address']; if (validate_ip_address($ip_address)) { echo "It's a valid IP address!"; }

Filed Under: PHP Tagged With: ip address, preg_match, regular expression, validation

Truncating Page Titles

January 29, 2014

The title of an article is one of the most important factors for SEO. It’s second only to the content itself. The title has to be catchy, concise and relevant to the content. If you look at Google search results, they show roughly 70 characters of the title on the results page. If the title is too long, you’ll see 3 dots or ellipses as they’re appropriately called. There’s really no ideal length for titles, as long as they best describe the content of the page. They can be short or long and must contain certain keywords.

If the title is too long, it can sometimes wreak havoc to the layout of the theme. There are times that you may have to trim the title so it doesn’t become such an eyesore. If you need to truncate the title, there is a function in PHP called ‘substr’ which returns parts of a string. In WordPress, page titles can be retrieved using a function called the_title(). We can truncate this string, by creating a new function called truncate().

<?php
 
// lets create truncate function
function truncate($the_title) {
  $the_new_title = substr($the_title, 0, 70);
  if (strlen($the_title) > 70) $the_new_title .= ' ...';
  return $the_new_title;
}
 
// assign the title to a variable
$the_title = the_title();
 
// we call the truncate function
echo truncate($the_title);

<?php // lets create truncate function function truncate($the_title) { $the_new_title = substr($the_title, 0, 70); if (strlen($the_title) > 70) $the_new_title .= ' ...'; return $the_new_title; } // assign the title to a variable $the_title = the_title(); // we call the truncate function echo truncate($the_title);

In this example above, we created a new function called truncate(). We passed a variable containing the title to the function. Substr will trim the title string starting at location 0, and will preserve it for the next 70 characters. The strlen function counts the string, and adds ellipses at the end if the string is longer than 70 characters. The truncated value is then returned. It can be echoed for display if we want. We can place this new function anywhere in our theme files. We can insert it in the main WordPress loop or on single pages.

Filed Under: PHP, WP Tagged With: substr, truncate

Custom Content in WordPress

January 24, 2014

There are some instances where you might need to alter or customize the content of a WordPress post. You could be working on a custom post type with a few extra meta box fields, and you simply want to display them on a template. So, instead of editing the WordPress theme files, you can simply customize the WordPress content if it’s a certain post type. Otherwise, the content remains the same if it’s a regular post or page.

Show me! In this example, we will filter the WordPress content called the_content by passing a custom function to it. The custom function will pass the content and checks to see if the post type is equal to ‘books.’ If the post type is equal to ‘books’, it will prepend a paragraph saying, ‘Hello Bookworms!!!’ before the content. If the post type is not equal to ‘books’, it will simply return the original content.

Here’s the Code

function urr_filter_content($content) {
  $format = get_post_type( get_the_ID() );
  if ( $format == 'books' ) : // your custom post-type
    $new_content  = '<p>Hello Bookworms!!!</p>';
    // add your custom post type meta 
    $new_content  .= '<p>Writer: ' . get_post_meta( get_the_ID(), 'books_writer', true) . '</p>';
  endif;
  $content = $new_content . $content;
  return $content;
}
add_filter('the_content', 'urr_filter_content');

function urr_filter_content($content) { $format = get_post_type( get_the_ID() ); if ( $format == 'books' ) : // your custom post-type $new_content = '<p>Hello Bookworms!!!</p>'; // add your custom post type meta $new_content .= '<p>Writer: ' . get_post_meta( get_the_ID(), 'books_writer', true) . '</p>'; endif; $content = $new_content . $content; return $content; } add_filter('the_content', 'urr_filter_content');

There could be numerous reasons why you want to filter the content. Here’s just a few.

  • Custom format based on ‘post type’ or ‘post format’
  • Adding image, audio and video embeds to your content
  • Adding special divs to your content
  • Drop Caps
  • An author byline
  • Adding a widget area

In most cases, content remains undisturbed. But, there might be some crazy instance where you may have to alter it. The function above shows you how you can filter and alter your WordPress content. If you have questions, just leave me a comment!

Filed Under: PHP, WP Tagged With: content, function, post type

Gitignore

January 22, 2014

You can ignore specific files in Git by placing a .gitignore file at the root of your local repository. The files listed in .gitignore will not be tracked by Git. Why would you do this? Well, there are certain OS generated files placed in system folders such as .DS_Store or Thumbs.db that are not really part of your code.

Create a .gitignore file

touch .gitignore

touch .gitignore

Edit the .gitignore file

sudo nano .gitignore

sudo nano .gitignore

Add the files you want excluded. You can use wildcards.

.DS_Store
Thumbs.db
*.log

.DS_Store Thumbs.db *.log

Commit and Push

git commit -m "adding .gitignore file" -a
git push

git commit -m "adding .gitignore file" -a git push

That should do it!

Filed Under: Git Tagged With: .gitignore, git, version control

Multi-Column CSS

January 22, 2014

If you have a long list of words laid out on a page (see list below), it might be better to place them in a multi-column page format. CSS3 makes this entirely possible without using tables or multiple divs. All we need is a single div for the entire list. In this example, we will work with a list of animals. We will use a div class called “animals.”

aardvark beetle camel dog elephant fox goat hen iguana jackal kangaroo lion

To use multi-columns, we simply style the div with:

.animals {-moz-column-count:3; -webkit-column-count:3; column-count:3;}

.animals {-moz-column-count:3; -webkit-column-count:3; column-count:3;}

Multi-column divs is supported on Firefox, Safari, Chrome and IE browsers.

Multi-Column Example

aardvark
beetle
camel
dog
elephant
fox
goat
hen
iguana
jackal
kangaroo
lion

Just change the numbers to make multiple columns.

Filed Under: CSS, HTML Tagged With: columns, multiple

Styling Genesis Post Navigation

January 21, 2014

The Genesis framework has a feature where you choose the post navigation technique. You can select either “previous / next” or the “numeric” option. This feature is found under the main Genesis Theme settings about halfway down. Selecting the “numeric” option, in this example, will display the numeric post navigation at the bottom of the home page after the main content.

pagination

Unfortunately, it didn’t always look like this, when I first enabled it. It lacks margin and some padding. The link colors falls back to the default colors. I had to style the post navigation technique to make it look better. So, I just wanted to share with you the following CSS styles that will make this Genesis numeric post navigation technique look much better.

/* Page Navigation */
.navigation li {
   font-size:14px;
}
.navigation li a {
   padding:10px;
   margin:0;
   color: #fff;
   background-color: #777;border-radius:5px;
}
.navigation li.active a {
   padding:10px;
   margin:0;
   color:#000;
   background-color:#aaa;
   border-radius:5px;
}
.navigation li a:hover {
   color:#000
}

/* Page Navigation */ .navigation li { font-size:14px; } .navigation li a { padding:10px; margin:0; color: #fff; background-color: #777;border-radius:5px; } .navigation li.active a { padding:10px; margin:0; color:#000; background-color:#aaa; border-radius:5px; } .navigation li a:hover { color:#000 }

First, I increased the font size to make it more legible. I added some padding and margins, gave it some link color, background color, and added a border radius to make it less boxy. Finally, I also changed the hover color to show a mouse rollover. It’s nothing fancy, but it looks much better with a little bit of window dressing.

Filed Under: CSS, WP Tagged With: framework, genesis, navigation

Add a Widget Area in WordPress

January 20, 2014

Customizing your WordPress theme gives you total control of the look and feel of your website. One of the ways of customizing your theme is to add a “widget area” that you can place anywhere on your theme’s template. The first step in adding a widget area is to edit your theme’s functions.php file. In this example, we are going to add a widget area just underneath the header and before the main post loop.

Open your theme’s functions.php and add the following lines.

if (function_exists('register_sidebar')) {
  register_sidebar(array(
  'name' => 'Below Header Widgets',
  'id' => 'below-header-widgets',
  'description' => 'The below the header widgets of your website.',
  'before_widget' => '<div id="%1$s" class="widget %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));
}

if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'Below Header Widgets', 'id' => 'below-header-widgets', 'description' => 'The below the header widgets of your website.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>' )); }

Save the file. Now that we added a new widget area to the functions.php file, we can now add this bit of code to our template. In this example, we will add the new widget area to our template’s header.php file. Notice the name ‘Below Header Widgets’ matches the ‘name’ in the code above.

<div class="below-header">
 <ul>
  <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Below Header Widgets')) : endif; ?>
 </ul>
</div>

<div class="below-header"> <ul> <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Below Header Widgets')) : endif; ?> </ul> </div>

Now go to your Admin Dashboard > Appearance > Widgets menu. You should now see the new widget area in your theme. The last thing you’ll need to do is style your new widget area. If you want the text to display in inline, we can add the following CSS styles.

.below-header ul li { float:left; display:inline; padding-right:10px; }

.below-header ul li { float:left; display:inline; padding-right:10px; }

The CSS above floats and displays each widget and its content inline, as well as add a 10px right padding.

Filed Under: CSS, PHP, WP Tagged With: sidebar, widgets

This Webpage is not Available

January 16, 2014

I stopped by Starbucks to hang out, sip coffee, and perform some housecleaning on my website. I fired up my MacBook Air and tried to access my website. Chrome barked at me saying, “This webpage is not available.” What! So, I opened up Terminal to see if I’m really connected to the WiFi network. Yes, I am. I can ping everything else, but my domain.

So, what’s happening? Is my site down? I logged into my VPS. The server is doing just fine. I did some more investigating. I realized that I can ping my IP address, but not the domain. That’s interesting. AT&T is currently the provider for the WiFI for Starbucks.

A few weeks ago, I saw a blurb on the news that Google will provide WiFi for Starbucks. As far as I know, that hasn’t happened yet, at least not at this Starbucks location. Google plans to roll out its WiFi services to Starbucks in the next few months. So, we are still months away from that coming into fruition.

Is AT&T blocking my domain? I have AT&T DSL at home. I can access my domain just fine. So, whoever is managing the AT&T WiFi, must be applying some kind of filtering to block certain domains from working.

Since I can still ping my IP Address, I decided to just edit my hosts file.

For Macs, the hosts file is located in /private/etc/hosts.

$ sudo nano /private/etc/hosts

$ sudo nano /private/etc/hosts

I added a host a new entry to resolve my domain to my server’s IP address.

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
173.255.251.194 uly.me

127.0.0.1       localhost 255.255.255.255 broadcasthost ::1             localhost 173.255.251.194 uly.me

I saved the new entry, and pinged my domain! It works! I opened up the browser to access my website. It works!

I’m glad I was able to find a workaround! However, I’m still perplexed as to why my domain is being blocked.

Filed Under: HTML Tagged With: at&t, domain, wifi

  • Go to page 1
  • Go to page 2
  • Go to Next Page »
  • Home
  • About
  • Archives

Copyright © 2023