Custom post types are a great feature introduced in WordPress 3.0 and it extended the functionality and practical usage of this awesome CMS. While re-designing / re-structuring iogoos.com, I have used Custom Post Types for different sections on this website.
Now I want to add all these custom post types to the main WordPress feed so the users get updated content from each section via RSS. There are two ways we can do that. You can add the below code snippets to the functions.php file of your theme.
1. Add all Custom Post Types to Main WordPress RSS Feed
function extend_feed($qv) {
if (isset($qv['feed']))
$qv['post_type'] = get_post_types();
return $qv;
}
add_filter('request', 'extend_feed');
Function get_post_types() will return all registered custom post types. Here you can learn more about get_post_types() function.
2. Add selected Custom Post Types to Main WordPress RSS Feed
I’ve used the woo-commerce plugin for the shop section of this website and this plugin added a few more custom post types that may be not relevant or useful for my readers. So with the code snippet below, we can add a few selected Custom Post Types to the main WordPress RSS Feed.
function extend_feed($qv) {
if (isset($qv['feed']) && !isset($qv['post_type']))
$qv['post_type'] = array('post', 'tutorials', 'tips', 'snippets', 'shop');
return $qv;
}
add_filter('request', 'extend_feed');
If you notice, here instead of using the get_post_types() function, I supplied an array of specific custom post types slugs. This will add content to WordPress’s main RSS feed only from the specified post types.
As a web designer, I always look for design elements for inspiration. So to search for images normally open Google.com, Flickr.com, and other preferred sites, apply different search filters and type keywords and then hit enter to view the results. It’s ok to follow this process if we need to do this two or three times a day. But for a designer, it’s not the case. We look for resources a lot and that wastes a lot of our valuable time.
What if we can automate this task and reduce a few steps? I created javascript bookmarks for different searches and it’s helping me a lot to save time and search for resources with only a click, type keywords, and hit enter.
Let’s create a bookmark to search google with an image size larger than 1024×768 resolution with a license filter labeled for reuse.
Step 1: Create search query
Open Google.com and search for “Abstract Wallpapers”. This will show the result of the web search. Click Images to view image search results.
Step 2: Apply search filters
Now on this page, we can click on search tools and apply a few filters to our search results. You can apply whatever you want, however for this trick, I am setting Size to Larger than 1024×768 and Usage rights to Labeled for reuse.
Step 3: Get the query URL
By this time, the URL in the address bar has changed with specific query parameters we applied in the above steps. Copy the URL in the address bar and save it in a text or any editor you use to write Javascript.
Step 4: Write Javascript Code
The string we copied might be a very long string but we need to look for the keyword we used to search in step 1. In this case, it is the Abstract Wallpapers. The URL will have this value encoded which is something like “abstract+wallpaper”. So if you search for abstract, you will see the query param it issuing. In this case, is q=keyword
function(){
var keyword = prompt("Type keywords:");
var url = '//www.google.com/search?q='+keyword+'&hl=en&authuser=0&source=lnms&tbm=isch&sa=X&ei=q-QNU-LgIoSCrAezzoDIDw&ved=0CAcQ_AUoAQ&biw=1920&bih=1079#authuser=0&hl=en&q=abstract+wallpaper&tbm=isch&tbs=isz:lt,islt:xga,sur:fc';
var win = window.open(url, '_blank');
win.focus();
}
In the above code, line 1, is to start a javascript function, and line 6 is to wrap the function code.
Line 2, we define a Javascript prompt for the keyword to search.
Line 3, we define the URL we copied however, there’s one change we need to do. We need to pass the keyword variable to the query parameter so, remove everything after q= till & and pass the keyword variable instead. For this, we use the Javascript concatenation technique.
'string'+var+'string';
Make sure you use the same quotes for concatenation if your declaration is within single quotes use single otherwise double. If this isn’t right, the function will break.
Line 4, We use the javascript technique to open a tab or new page in the browser and pass the URL parameter with _blank for a new window or tab.
Line 5, We tell the program to focus on the new window.
Step 5: Creating the bookmark
Now our function is ready and we need to create a bookmark. Carefully bring all the code in one line and wrap it between javascript:(FUNCTION_IN_ONE_LINE)();
The end result should be like this:
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//www.google.com/search?q='+keyword+'&source=lnms&tbm=isch&sa=X&ei=zzsGU5_mIouyrgf9uIDYDA&ved=0CAgQ_AUoAg&biw=1918&bih=1079#q='+keyword+'&tbm=isch&tbs=isz:lt,islt:2mp,sur:fc'; var win = window.open(url, '_blank'); win.focus();})();
Step 6: Test and create a bookmark
To test this, you can simply copy the entire line and paste it into the browser address bar. It should ask for the keyword. Once you type the keyword and hit enter, it should open the Google image search results with applied filters.
Once our test is passed, Right-click anywhere on the bookmark bar and click add new. Type a title and enter the code we created in the URL field. Save it.
Now you have a bookmark to search for images greater than 1024×768 size with a license to reuse.
You can create these bookmarks for any website, just change the URL and the keyword variable where it is required. Here are a few from my collection:
Google Image Search
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//www.google.com/search?q='+keyword+'&source=lnms&tbm=isch&sa=X&ei=zzsGU5_mIouyrgf9uIDYDA&ved=0CAgQ_AUoAg&biw=1918&bih=1079#q='+keyword+'&tbm=isch&tbs=isz:lt,islt:2mp,sur:fc'; var win= window.open(url, '_blank'); win.focus();})();
Flickr Image Search
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//www.flickr.com/search/?q='+keyword+'&m=tags&l=deriv&ss=0&ct=5&mt=photos&w=all&adv=1'; var win= window.open(url, '_blank'); win.focus();})();
Icon Search @ Iconfinder.com
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//www.iconfinder.com/search/?q='+keyword+'&maximum=512&price=free'; var win= window.open(url, '_blank'); win.focus();})();
Dribble Search
javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//dribbble.com/search?q='+keyword; var win= window.open(url, '_blank'); win.focus();})();
Go ahead, spend some time to create these quick and easy bookmarks, and save huge time in the future. If you like this trick, please share the link with your friends.
There are a few times when we want our website visitors to search content in just one category and not the whole website. Today I am sharing a simple but effective UI trick to create a category-based search box with CSS and jQuery.
You can add the following code in your theme’s functions.php file to change the WordPress excerpt length. Change the number (100) to the desired length.
add_filter('excerpt_length', 'new_excerpt_length');
function new_excerpt_length($length) { return 100; }
While working on multiple projects I always need to copy the current path of a directory in Terminal. I used to use the command pwd in the terminal that prints the current directory path in the terminal and then I have to select the path with the mouse to copy and paste the same where I needed.
I hate to use the mouse as it wastes a lot of time and to save time and copy the current path without selecting it with the mouse, I found this command and use it all the time.
pwd | pbcopy
This command will copy the current directory path to the clipboard and we can then press CMD+V (CTRL+V for Windows) to paste the path wherever needed.
I hope this will help someone save time and be more productive.+
In each PHP website, we need to find out the current URL of the page, and here’s the PHP code to find out the current URL of the page a user is browsing with or without the query string.
While working on my latest WordPress plugin, I found myself using jQuery toggleClass on multiple elements and writing JS code for each was not at all a better solution. To fix this issue and keep the code clean and short I used the following code.
$(document).on('click', '[data-toggle="class"]', function () {
var $target = $($(this).data('target'));
var classes = $(this).data('classes');
$target.toggleClass(classes);
return false;
});
Make sure you have jQuery script on your page and add this code to your Javascript file and then you can use it in your HTML code as below:
<a href="#" data-toggle="class" data-target="#element" data-classes="is-active">Click here</a> to toggle.
<div id="element">...content goes here...</div>
The anchor tag with data-toggle will look for an element with ID or element and toggle is-active class for that element. You can apply this logic to any UI element such as Modal with an overlay background and use the data-toggle attributes on the modal background as well to hide the modal.
Feel free to implement and extend this code on your projects.
I’ve recently switched our servers from Apache to NGINX. While testing our WP Form Builder Add-on, I found that my web server took pretty long time for the mail function to process, however, on the local server, everything works pretty smooth.
While digging Google, I found the solution which fixed this issue. If you are facing the same problem, follow the steps below to resolve it.
Log in to your server via SSH as root user and run the following command:
nano /etc/hosts
You will find an entry that looks like this
127.0.0.1 localhost
All you need to do is add localhost. local domain after this so it should look like this:
127.0.0.1 localhost localhost.localdomain
Press CTRL+X and then Y to save the file. Now, your server mail should process in nanoseconds.
Sometimes, a small fix with a few characters here and there can waste hours. I thought I’d share this here so that it will save some of your time.
Working on a WordPress project where the client demands all images within a post should extend and touch window borders, actually full-size images. Applying DIV with jQuery and CSS works. The wrapper has a margin of 20px on both sides and it is not possible to remove the margin otherwise, all other elements will require a 20px margin.
Sometimes server acts weird and stops some services due to any issue. I faced this issue with my iogoos.com WordPress demo sites server, where MySQL service stops after running the clean script to remove demo sites after three days. So I created a Cron Job on my GCP VM Ubuntu Droplet to check if and start MySQL service if it’s not running. I scheduled this to run the check every minute. Here’s the code and steps to set up this cron job.
NOTE: You must have ssh access to your server. GCP provides ssh access as soon as you create a droplet.
Creating Shell Script
Step 1: Open Terminal and login to your server as root via ssh.
Step 2: Create shell script file.
cd ~
nano mysqlfix.sh
This will let you create a shell script in the root directory for the root user. You can use any name as per your preferences for the .sh file.
Step 3: Write the script to check and restart MySQL and send an email alert.
#!/bin/bash
PATH=/usr/sbin:/usr/bin:/sbin:/bin
if [[ ! "$(/usr/sbin/service mysql status)" =~ "start/running" ]]
then
echo "MySQL restarted" | mail -s "Email Subject" email@domain.com
sudo service mysql start
fi
Make sure you change the Email Subject and email address.
Step 4: Once you are done with the script press CTRL + x and you will be asked to save the changes. Type Y and hit enter. You will be returned to the terminal and mysqlfix.sh file will be created in the root directory.
Step 5: Give this file executable permissions
chmod +x mysqlfix.sh
Testing the Script
Now our script is ready, let’s test if this runs fine.
Enter following commands in the terminal:
/usr/sbin/service mysql status
The terminal will print something like this: mysql start/running, process 2409
/usr/sbin/service mysql stop
This will stop MySQL service, to verify run the status command again and it will print something like this: mysql stop/waiting
~/mysqlfix.sh
This will run the script we created to check and restart the service. You should get an email with the subject and message to the email address you specified in the script.
Run the status command again and it should print mysql start/running, process ####
If everything goes well in this step, let’s create the cron job to run our script every minute.
Create Cron Job
Step 1: Installing the cron job
Make sure you are logged into your server via ssh as root, then type the following command in terminal:
crontab -e
Once you see the crontab screen type the following line at the end of this file:
*/1 * * * * /root/mysqlfix.sh
Press CTRL + x and you will be asked to save the changes, press Y and hit enter. You will see the following line in terminal: crontab: installing new crontab
Now our cron job is installed.
To test if it runs fine, Type following command:
/usr/sbin/service mysql stop
This will stop MySQL service on your server. Now you should wait for one minute and get an email with the subject and message we specified in the mysqlfix.sh file.
