Mark parent category menu active on single custom post view in WordPress

Recently I developed a theme for one of my client and I had to highlight the menu item of parent category in main menu when one of its associated single custom post is viewed. For that I had to add an action in my functions.php file for nav_menu_css_class. What is does is it returns the ‘active’ class which WordPress adds to the parent category menu item in the main menu. You can see the code at Gist here.

Why we moved from OpenShift to Google Cloud

The good old days

When OpenShift was in its version 1 it was great from customer’s point of view with low budget. OpenShift v1 had free offers to deploy app and add a custom domain to it. There was no SSL support but it could be handled via CloudFlare solution, making overall solution a great one.

Then there comes OpenShift v2

RedHat then launched OpenShift v2 and added a restriction that gears will be shutdown after certain period of inactivity and also removed the support for custom domain.

That was the time that we had to move to some other cloud platform that could support our apps with low resources and without investing anything.

Since all good things in life are free.

Google Cloud to the rescue

So we came across Google Cloud platform offering and we had $300 credit in free trial for next 6 months. That was more than enough for us to start with. And in fact they have micro virtual machine instances that are free for life with 30gb storage. That is more than enough for small apps to run for free that are under experiments or don’t have any monetization plans.

So, we migrated several of our apps from OpenShift to Google Cloud and started leveraging free credits provided by Google.

Just this week we consumed all our credit and our trial expired. Our virtual machine instances were shutdown, but it didn’t take long that we enabled billing on our project and downgraded our instances to micro ones which is free. That gave us such a relief that our apps are still running although with low resources but it is fine as that are not our revenue generating apps and are just experiments.

Different color for each menu item

In a recent project I got a requirement that each menu item should be highlighted in different color when visited. The menu items and their required active colors were:

  • Home – Green
  • Portfolio – Blue
  • Team – Yellow
  • Contact – Red

These colors were to be applied only when that page is being visited otherwise color of menu item should be default black color.

So, if user is visiting home page then menu item should something like this

home_menu.png

And if user is visiting Portfolio page then menu should be something like this

portoflio_menu.png

Considering that this was a WordPress theme project where we were using Understrap as a base theme which is based on Twitter Bootstrap. So, when user visits, for example a home page WordPress will attach a .active CSS class to it. Taking advantage of that we added different classes for each menu item and then used following rule to make menu item colors different:

.navbar-nav > .home.active > a {
    color: green!important;
}
.navbar-nav > .portfolio.active > a {
    color: blue!important;
}
.navbar-nav > .team.active > a {
    color: yellow!important;
}
.navbar-nav > .connect.active > a {
    color: red!important;
}

CSS Class Chaining

We utilized the class chaining method here. If you note that .home.active classes are chained together without space and which means it will select an element with both these classes.
That did the trick and all menu items were in different color.

 

Rollover image – Change image on hover/mouse over

Often when designing websites static or dynamic, PHP or ASP.Net, Laravel or WordPress, you have to design in a way if user hovers an image it gets changed and an alternate image is displayed. This can be easily achieved via simple HTML events. Here is the trick:

<img src="FIRST IMAGE URL GOES HERE"
onmouseover="this.src='SECOND IMAGE URL GOES HERE'"
onmouseout="this.src='FIRST IMAGE URL GOES HERE - AGAIN'" />

It is simple as that.

Override parent shortcodes in your WordPress Child Theme

Overriding shortcode defined in WordPress parent theme is pretty easy.

Just use a after_theme_setup section in functions.php of the child theme;

example:

add_action( 'after_setup_theme', 'my_child_theme_setup' );

function my_child_theme_setup() {
   remove_shortcode( 'your_shortcode' );
   add_shortcode( 'your_shortcode', 'my_shortcode_function' );
}

function my_shortcode_function( $atts, $content = null ) {
    extract(shortcode_atts(array(
    ), $atts));
    $out = 'content">'.do_shortcode($content).'</div>';
    return $out;
}

WooCommerce Per Product Shipping Price Calculation

If you have different rates depending on the item you will need to setup each one in ‘Flat Rate’ shipping method and make sure it is selected on the Product itself.

First you will need to have a Shipping Class setup:

Go to the left hand menu, under Products you will find Shipping Classes.
Give your Shipping Class a name and a description and then hit “Add New Shipping Class”

Once that is done you can go back to the Shipping Setup, Under WooCommerce Settings.

Click on Flat Rate and at the bottom of the screen click on “Add New Rate”
Choose your Shipping Class.
Give it a cost and a handling fee.

Why will you need separate shipping classes?

Imagine you sell small items but just so happen to have one large item you want to sell on your site. You obviously cannot charge the same as you can with the small items.

What J talked about in 2013

The WordPress.com stats helper monkeys prepared a 2013 annual report for this blog.

Here’s an excerpt:

The concert hall at the Sydney Opera House holds 2,700 people. This blog was viewed about 37,000 times in 2013. If it were a concert at Sydney Opera House, it would take about 14 sold-out performances for that many people to see it.

Click here to see the complete report.

 

How To: Open a WordPress Menu Link In New Window or Tab?

I have come across multiple WordPress users who aren’t aware that WordPress has a bunch of functions hidden in the “Screen Options” section of multiple Administration Pages. Today I want to show you how to open links in custom menus in a new window or tab (i.e. add a target=”_blank” to link or menu items). Just follow the steps below to unearth the hidden WordPress feature.

 

Step 1:
Click on Appearance >> Menu in the WordPress dashboard.

Opening Links in new windows or tabs using WordPress Custom Menus

 

Step 2:
Look for the Screen Options drop down menu in the top right corner of your browser window.

Opening Links in new windows or tabs using WordPress Custom Menus

 

Step 3:
Under Show advanced menu properties tick the Link Target checkbox.

Opening Links in new windows or tabs using WordPress Custom Menus

 

Step 4:
Add a new link to your custom menu and click on drop down arrow to edit menu items. Voila! You can now decide if your menu item opens in same window or new window.

Opening Links in new windows or tabs using WordPress Custom Menus

 

[Ref: http://richwp.com/open-wordpress-menu-links-in-new-window/]

Xdebug in WebMatrix

Xdebug is a very popular PHP extension that helps with debugging and profiling of PHP scripts by providing a lot of valuable debug information. Microsoft WebMatrix is a development tool for building web applications. When WebMatrix is used to build or modify a PHP-based web application the debugging tasks can be greatly simplified if Xdebug extension is used. This post explains how to install and use Xdebug extension with WebMatrix.

Step 1: Enable PHP in WebMatrix from the site “Settings” page:

Note that if you installed any of the PHP applications from the Application Gallery then PHP will be automatically enabled.

Step 2: Download the appropriate build of Xdebug extension from downloads page. If your site uses PHP 5.2 then download “5.2 VC6 Non-thread safe (32 bit)”. If your site uses PHP 5.3 then download “5.3 VC9 Non-thread safe (32 bit)”. Use 32 bit build even if your Windows OS is 64 bit.

Step 3: Install the extension by copying the downloaded file to the following locations:

  • For PHP 5.2 on Windows 64 bit:
    C:\Program Files (x86)\IIS Express\PHP\v5.2\ext\
  • For PHP 5.2 on Windows 32 bit:
    C:\Program Files\IIS Express\PHP\v5.2\ext\
  • For PHP 5.3 on Windows 64 bit:
    C:\Program Files (x86)\IIS Express\PHP\v5.3\ext\
  • For PHP 5.3 on Windows 32 bit:
    C:\Program Files\IIS Express\PHP\v5.3\ext\

Step 4: Open the php.ini file located in the PHP installation folder, e.g.
C:\Program Files\IIS Express\PHP\v5.2\php.ini and append the following at the end (make sure that the absolute path is correct for your version of PHP and Windows.):

[xdebug]
zend_extension = C:\Program Files\iis express\PHP\v5.2\ext\php_xdebug-2.1.0-5.2-vc6-nts.dll

Step 5: Configure PHP to display errors by changing these PHP settings in php.ini file:

display_errors = On
error_reporting = E_ALL & ~E_NOTICE

Step 6: Test that extension is enabled and works by either calling a phpinfo() function from a script or by running a buggy script:

The Xdebug extension provides a lot of useful features that help with debugging of PHP applications. You can learn more about them from the Xdebug documentation. For example you can use it to profile a PHP application. Just change the php.ini file as shown below and then make a request to a PHP script:

[xdebug]
zend_extension = C:\Program Files\iis express\PHP\v5.2\ext\php_xdebug-2.1.0-5.2-vc6-nts.dll
xdebug.profiler_enable = On
xdebug.profiler_output_dir = C:\Windows\temp

The profile log will be saved into the specified directory and will have a name cachegrind.out.* Use WinCacheGrind to open and analyze it:

Windows Live Writer

I installed Windows Live Writer today to see how it works with my WordPress blog. So, this is a test post using Windows Live Writer. I’ll post a new blog entry if I find any useful feature of it. Well it has one good feature at least. To add a Bing map to your blog entry. See this one 🙂

Map picture

Meanwhile you can download it using Windows Live Essentials, and read more about Windows Live Writer at Wikipedia.