Limit Text on WordPress

There are times when we need to limit text to a certain length. For example, we want to limit the length of the titles in the footer section. If we don’t limit the length, the text spills over to the next line and screws up the formatting and the look of the website. To limit the text length, we will use CSS3.

Let’s say, we have a div class called footer-widgets. Inside, we have an unordered list. We can limit the text to just 245 characters. If the design is responsive, the footer section could reconfigure itself and at times be greater than 245px. If that’s the case, we will display the entire string instead. We will set the minimum width to 245px, overflow to hidden, white-space to nowrap, and text overflow to ellipsis.

Here’s the CSS code:

.footer-widgets li {
  text-overflow: ellipsis;
  min-width: 245px;
  white-space: nowrap;
  overflow:hidden;
}

This code works well if you’re using a responsive design. Your footer area can expand or contract depending on your responsive design. The text will truncate if if the footer area is less than 245px, and it will display the entire text if it’s over 245px.

I have it implemented on this blog. Check out the footer section.

WordPress 4.3.1

WordPress 4.3.1 is a security fix for some cross-site scripting vulnerabilities and a potential privilege issue.

Per WordPress.org:

WordPress versions 4.3 and earlier are vulnerable to a cross-site scripting vulnerability when processing shortcode tags (CVE-2015-5714). Reported by Shahar Tal and Netanel Rubin of Check Point. A separate cross-site scripting vulnerability was found in the user list table. Reported by Ben Bidner of the WordPress security team. Finally, in certain cases, users without proper permissions could publish private posts and make them sticky (CVE-2015-5715). Reported by Shahar Tal and Netanel Rubin of Check Point.

Update all your WordPress installations.

Using Like in SQL

I was looking at my SQL statements the other day. I was doing a bunch of comparisons with a certain field that contain a pattern of words. My original SQL was quite tedious as displayed below. After much thought, I was able to pare it down to something much simpler. The newer SQL statement is much shorter and to the point. It uses the operator LIKE to search for a pattern.

OLD SQL

SELECT 
  * 
FROM 
  mytable 
WHERE 
( product="model-1" OR
  product="model-2" OR 
  product="model-3" OR
  product="model-4" OR
  product="model-5" OR
  product="model-6" ) AND
  id=105

NEW SQL

SELECT 
  * 
FROM 
  mytable 
WHERE 
  product LIKE "%model%" AND
  id=105

The newer SQL is a vast improvement over the previous one. I was also forced to use parenthesis around the previous SQL statement to group together the OR comparisons. Without the parenthesis, my results were inaccurate because the AND had precedence over the OR. With an improved SQL, there’s no need to use parenthesis. Obviously the LIKE operator only works if there’s a pattern. I use % to make the search more liberal, otherwise it would look for an exact match.

Modify Header on Genesis Themes

The Genesis theme is a WordPress theme from StudioPress. I recently worked on a project where there was a need to redirect the URL title to another URL. Essentially, there are two separate WordPress installs on the server, one install had WordPress on the root directory, the other on a sub-directory. The URL title of the WordPress on a sub-directory needed to point to the root directory. So, here’s the fix that you need to add in the functions.php for Genesis themes.

//* Modify the header URL - HTML5 Version
add_filter( 'genesis_seo_title', 'child_header_title', 10, 3 );
function child_header_title( $title, $inside, $wrap ) {
    $inside = sprintf( '<a href="http://example.com/" title="%s">%s</a>', esc_attr( get_bloginfo( 'name' ) ), get_bloginfo( 'name' ) );
    return sprintf( '<%1$s class="site-title">%2$s</%1$s>', $wrap, $inside );
}

Just add this piece of code to the functions.php file of your Genesis child theme.

Chrome Bug With WordPress Dashboard

There’s a bug on Google Chrome with the latest WordPress Dashboard. The bug has been submitted to WordPress’ bug tracker. However, the case is closed since the error occurs only in Chrome. Other browsers are rendering it just fine. There is a workaround by disabling “slimming paint” in Chrome.

Place this text in the URL of your Chrome browser:

chrome://flags/#disable-slimming-paint

Disable it.

The bug will remain until you restart Chrome.