Category: Articles

Main articles page for all things web tools and code. A free resource for the public containing information and tips.

Looking for a PHP developer, a Symfony expert or Wordpress web developer? Perhaps a business system architect that specializes in scalable MySQL business system design and deployment? We have reliable, fast and professional developers that meets your organization’s needs! Contact us for your next web development project and schedule a free consultation today.

Display sub menu links for WordPress parent pages that have child pages for navigation that duplicates links in main menu pull downs

03/31/2014 Aaron Belchamber 1 Comment

If you are looking for a way to deliver child pages that will continue with the navigation from their parents’  and duplicate the links that are in the pull down menus for such pages, look no further.  This is the actual function for a shortcode which can be added called “[sub_menu_links]” which you could then loop through and embed all links to the sub-menu of the children of the parent page this shortcode was embedded in.

It’s useful, especially for tablets and smart phones where you need to duplicate navigation, or re-use navigation possibly in a different way to make the page more user friendly.  I often embed this shortcode in landing pages and it will display tabs instead of buttons of certain pages to help users visualize where they are in the website and what options are available to them without having to scroll up on small screens to tap the menu to see the child options.

/* Shows sub-menu of landing pages as links in the page
*
**/

// add hook
add_filter( ‘wp_nav_menu_objects’, ‘my_wp_nav_menu_objects_sub_menu’, 10, 2 );

// filter_hook function to react on sub_menu flag
function my_wp_nav_menu_objects_sub_menu( $sorted_menu_items, $args ) {

if ( isset( $args->sub_menu ) ) {
$root_id = 0;

// find the current menu item
foreach ( $sorted_menu_items as $menu_item ) {

if ( $menu_item->current ) {
// set the root id based on whether the current menu item has a parent or not
$root_id = ( $menu_item->menu_item_parent ) ? $menu_item->menu_item_parent : $menu_item->ID;
break;
}
}

// find the top level parent
if ( ! isset( $args->direct_parent ) ) {
$prev_root_id = $root_id;

// loop

while ( $prev_root_id != 0 ) {
foreach ( $sorted_menu_items as $menu_item ) {
if ( $menu_item->ID == $prev_root_id ) {
$prev_root_id = $menu_item->menu_item_parent;

// don’t set the root_id to 0 if we’ve reached the top of the menu
if ( $prev_root_id != 0 ) $root_id = $menu_item->menu_item_parent;
break;
}
}
}
}

$menu_item_parents = array();
foreach ( $sorted_menu_items as $key => $item ) {
// init menu_item_parents
if ( $item->ID == $root_id ) $menu_item_parents[] = $item->ID;

if ( in_array( $item->menu_item_parent, $menu_item_parents ) ) {
// part of sub-tree: keep!
$menu_item_parents[] = $item->ID;
} else {
// not part of sub-tree: away with it!
unset( $sorted_menu_items[$key] );
}
}

return $sorted_menu_items;
} else {
return $sorted_menu_items;
}
}

wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘sub_menu’ => true,
‘items_wrap’ => ‘%3$s’,
‘depth’=>’-1′
) );

Adjusting the maximum file upload size on your Apache server for PHP, WordPress, Joomla, and Drupal

03/26/2014 Aaron Belchamber No Comments

Your Apache server usually comes with limits on file sizes you can upload. The default upload file size is usually only 2MBs, usually not even the average size of a jpg iamge these days.  You will need to set the following 3 configuration options:

  1. “memory_limit” – The maximum amount of memory that a script is allowed to allocate.  Basically, this prevents scripts from using up all available memory on a server
  2. “upload_max_filesize” – maximum size of a file
  3. “post_max_size” – Max size of form post data.

Usually, “memory_limit” needs to be greater than “post_max_size”.  You will usually be able to edit settings in your .htaccess files.  WordPress comes with an .htaccess file located in the root of the WordPress installation.

Add following code to your.htaccess file after the “#End WordPress” comment, if it exists.  If you update your .htaccess file inbetween the “#Begin WordPress” and “#End WordPress” comments, the next time you update almost anything in WordPress you will end up losing these customizations because anything between these two comment lines are considered proprietary by WordPress and will be overwritten!   Keep this in mind, it’s a pitfall for those web developers new to WordPress!

Here are some basic settings to help you get started, you can adjust the values below to accommodate your needs.  For some servers and hosts, you may not have access to the .htaccess file, you could still accomplish adjusting these settings perhaps in the “php.ini” or other configuration file from your host’s cpanel, but there are no guarantees.  Often, hosts limit your values so whatever you enter they will take them to your allotted maximum but you will never be able to exceed them, without asking them to accommodate.  After all, they have to limit the “unlimited bandwidth and storage” claims they make somehow.


php_value post_max_size                           64M

php_value upload_max_filesize               48M

php_value memory_limit                            256M

When is it okay to use CSS to hide certain elements on a page with CSS instead of fixing the results programmatically?

03/26/2014 Aaron Belchamber No Comments

The WordPress community has a lot of experienced experts who have provided a lot of valuable guidance and advice on WordPress.org.  The Magento Community Edition, backed by the Magento community, are just as experienced and fervent supporters.  Open source projects are incredibly proactive.  However, there are times I have encountered solutions, especially if you want to omit something from a page or certain type of page, where the first answer is usually a way to isolate the element you don’t want to show up and make a CSS hack like “.class-of-element-to-hide{display:none}”.

Simple small things can just be CSS’d away

It’s not worth your time for the real small things.  Hiding the date or occasional author byline is one thing, but this seems to a be a growing solution, especially in Magento, to solve issues of hiding certain parts of pages or results.  For instance, you may not want the “Search” bar to show up on category landing pages in WordPress, or perhaps “Rate this product” isn’t appropriate for certain pages, but it is on others.  Basically, here’s the problem I have with the “hide it in CSS” approach.  The biggest problem I have is that you’re not doing it programmatically so the script runs and does the extra work to fetch this content only for you to hide it from view.  This does not sound like a solution, nor does it seem like an efficient approach for your website in general.  Why not take the extra time to build a separate template page for certain content in WordPress, Magento, Drupal, or Joomla?  These CMS platforms all support some way to isolate and customize content, some are very straight forward, and others, especially if you’re using a theme framework, may pose some extra challenges, but it is almost always possible.

If you have to go to the core to fix it, then look for any other solution first!

Yes, you never want to edit the core files of any of these systems, and you never should have to.  Some fixes can get very tricky, however, and other solutions just may not be out there without having to hack the core or resort to CSS hacks.  There are ways to extend and override classes, you have to check on the documentation.  Don’t go the easy way because it will probably haunt you later.  If nothing else, it’s a good exercise to get into these systems and learn how to properly interface with them so you can be a better web developer.  So unless it’s a few pages that you need to hide a few small elements, like a client doesn’t want the post dates to show on certain results, exhaust the programmatic direction first!  “display:none” is not a replacement for exercising good web development code.  You could encounter issues where someone else declared the class of the element you are hiding as “!important” then there’s no telling along the cascade which CSS properties will trump over the other.

Most the time, customizing programmatically is easier than you thought.

Often, it’s an easier fix than you would have thought, even in those theme frameworks.  WordPress has “add_filter()”, “remove_filter()”, which really speeds up customization in templates or custom pages.  “Genesis” from StudioPress offers 90% of the flexibility within its framework that will enable you to customize a lot of behaviors right from the admin without writing any code or attempting to reverse-engineer and isolate a bunch of nested elements through CSS.  Yes, that 10% you can’t easily do in StudioPress might pose some unique challenges, but trying to reduce the number of processes that deliver just complete wasted results to hidden elements is something we should all strive for.  It’s about writing code that is as efficient as possible and planning and thinking ahead — it’s a basic web development principle, at least to strive for perfect efficiency.  I am amazed at how heavy Magento is and how many solutions literally hide half a page worth of widgets and responsive elements, this all took time to query, fetch, process and deliver to the browser, only to end up hidden.

Last word on WordPress customization

So many things can be customized in WordPress pretty quickly by creating a new template page in your child theme folder.  There are other ways, too, ways that are simpler but much more dangerous in the long run in my opinion, but I’ve used all of the solutions.  One challenge was that a client wanted 5 of the most recent posts for each category to show up in the landing page of each category.  Great, except for one, yes, this one they only wanted one article to show in the category and they wanted to show the entire post beneath it.  It was scary easy how fast I found a solution, but no doubt it was NOT the ideal way.  I simply inserted a script with my “” shortcode and took over the global “WP_Query” object and redefined the query!  Yikes, one line and I could alter anything drastically.  There’s probably a reason why WordPress tries to keep the development code out of the content, but in this case, the solution worked like a charm.  Whether this was a valid solution or the WordPress community will now target me as a marked man, time will tell, but in the meantime, the customer is happy…..  In the end, isn’t that also the WordPress way?  Keep the customer happy and do things as  efficiently as possible with as little code as possible?!


Properly tabulating a report of various results from a survey with a MySQL query

03/26/2014 Aaron Belchamber No Comments

Let’s say you have a basic survey database table where it records a response in the “response” field that will contain different values depending on the survey questions.

Now, it’s pretty easy to gather the value of each response and tabulate the quantity of each response in a list like so:

“Yes”   50 responses
“Maybe” 5  responses
“No”    12 responses

Pitfalls and misunderstanding of “SUM” and “COUNT” in MySQL

However, I have encountered some confusion between the use of “SUM” and “COUNT” in MySQL queries.  “COUNT” just counts the number of instances that fit the query abstraction, it’s a way of selecting some data from the entire pool of data out there.  Think of a database as a container filled with…. a bunch of different marbles and coins.  Database queries are supposed to find just what you’re looking for in that container.  What kind of coins?  How many black marbles?  That’s a way of being presented a container full of things and only taking out what you fits what you’re looking for.

So, if you are trying to sum up a tabulation of counts, a “sum” of “counts” just won’t work, they will throw a “#1111 – Invalid use of group function” error message from MySQL.  Why?  Because the values in “response” aren’t numeric and the result from “COUNT” you are trying to accumulatively sum aren’t the result of multiple records (invalid use of group function.)

These are too examples of improper MySQL queries using “sum” and “count”.  After encountering the “group” error, some may think all they would need is to group the field they are trying to count:


SELECT response,SUM(COUNT(response)) FROM homepage_surveys WHERE survey_id=2

SELECT response,SUM(COUNT(response)) FROM homepage_surveys WHERE id=2 GROUP BY response

These queries all return the tabulations correctly:


SELECT response,COUNT(response) FROM homepage_surveys WHERE id=2 GROUP BY response

SELECT response,COUNT(*) FROM homepage_surveys WHERE id=2 GROUP BY response

By aliasing the result of “COUNT(*)” as “count”, this also orders the results and lists them in descending order:

 SELECT response,COUNT(*) as count FROM homepage_surveys GROUP BY response ORDER BY count DESC

Adjusting website behavior for accommodating responsive layouts so content will display instead of website header and main menu on smaller screens

03/23/2014 Aaron Belchamber No Comments

Here’s something I run into time and again.  The website looks great on different devices, you did a great job on that responsive layout.  But something silly happens and if you’re using a theme for your Drupal or WordPress site, they usually didn’t write code to accommodate this flaw in UI behavior.

When someone views your site on a smart phone like an Android or iPhone, when your nav bar and website header (logo and perhaps search box) takes up most of the top of the page.  So, when a user selects a new page, the new page loads, but the content is not seen at first — just all that top stuff at the top of your page.  Now, you can responsively perhaps save this precious display real estate by reworking in perhaps collapsible menus or be creative else where, or you can just make sure at a certain screen size you scroll the website to the top of the content you know the user is looking for.

This is a basic UI (user interface) principle — show the user what they are looking for with the least amount of user effort.  So, below is a simple behavior modification for your website in JQuery.  Just add this code in your footer, make sure you have the JQuery library loaded, rename the menu “li a” to your menu links, rename the “scrollTop” element from “.post-content:first” to the class where your posts start displaying content.  You may have to make other modifications to make it work in your CMS, but this should work with fairly few changes in WordPress, Drupal, Magento and/or Joomla:


// For responsive after button click to scroll to actual content instead of showing button menus up top
jQuery(window).load(function(){
var scrn_w=jQuery(window).width();

if (scrn_w<=800){

jQuery(‘html, body’).scrollTop(jQuery(“.post-content:first”).offset().top-25);

// Fix mobile devices not able to click main button
jQuery(‘li a’).click(function(){

jQuery(this).toggleClass(“menu_selected”);

jQuery(“.menu_selected”).unbind();

jQuery(‘.menu_selected’).click(function(){

go_url=jQuery(this).attr(“href”);
window.location=go_url;
});

});

}

});