LiquidBook has just launched a new website for Pepperdata. Pepperdata’s Hadoop optimization software monitors and controls all facets of system performance in real time. We designed and developed a custom WordPress solution, that features custom sections for events, press releases, news coverage and employee profiles. Using our private Liquidbook plugin we added enhancements to google maps, custom twitter feeds, expandable content, and much more. This project was completed to specification and on-budget, and makes for another happy client.
Author: Felipe Lujan-Bear
I am both a left and right brain person. I have spent over 15 years as an online developer and designer. After attending the Academy of Art - San Francisco, I worked in online learning for a number of years at Pearson, plc as project manager for UK-based university websites. I have worked on projects for Hyperion - Oracle, Mercury Interactive - HP, Thinstall - VMware, eTrade, Wind River, and many others. My projects have included developing large websites, custom CMS, trade show presentation and collateral material, partner marketing, inbound marketing, video production, flash development, and WordPress site design and development. On the creative side, my skills run to a full range of design, animation, video, and photography. On the technical side my skills include a wide range of internet technology such as PHP, MySQL, JavaScript, Jquery, HTML, CSS, XML, and more. Because I have worked in the corporate world for many years, I understand the complex challenges involved in professional design and development.
The Pearl Magazine
LiquidBook and Deluxe Creative Co. have just launched a new website for The Pearl, the official magazine of the Pearl District Business Association. The Pearl magazine is a great companion site for the Explore the Pearl website, providing news and feature articles about businesses in the district. While the magazine is contained within the main explorethepearl.com
Adding an icon to WordPress widget title
This CodePen shows how to add Font Awesome icons to WordPress widget titles by using jQuery. This script can be easily added to a WordPress theme or a WordPress plugin. By default, WordPress widget header titles have whatever class the developer assigns them. If you use the same widget you may get all the widget titles with identical classes or no class at all. This simple jQuery script allows you to easily append an icon to the widget title. The jQuery script uses the contents (see jQuery contains selector )and some jQuery selector of the title to auto append an html tag.
jQuery(document).ready(function ($) { //noconflict wrapper
// widget object - acts like a class
var widget = {
news : "rss",
tweet : "twitter",
event : "calendar",
note : "pencil-square-o",
download : "download",
contact : "phone",
setIcon : function(icon) {
var myreturn;
Object.keys(this).forEach(function (key) {
if(icon===key) {
myreturn = ' ';
}
}); // end foreach loop
return myreturn;
} // end setIcon
}; // end widget object
//
// in $(<your selector>:contains("Your widget title").append(widget.setIcon('<key_name>'));
$('h3:contains("News")').append(widget.setIcon('news'));
// returns : <h3 class="widget-title"><span class="widget-inner">News</span><i class="fa fa-rss fa-fw"> </i></h3>
//
$('.widget-title:contains("Tweets")').append(widget.setIcon('tweet'));
$('.widget-title:contains("Resources")').append(widget.setIcon('download'));
$('h3:contains("Contact")').append(widget.setIcon('contact'));
}); //end noconflict
The script has some pre-set icons, but you can use whatever Font Awesome icons you want. You can add your key name and your icon value (<key_name> : <key_value). Your WordPress website or your WordPress plugin will need to load Font Awesome (see getting started). Below is a CodePen embed – take a look. Share your thoughts about the script in the comments below or send me a tweet @liquidbook.
See the Pen Adding an icon to WordPress widget title by Felipe Lujan-Bear (@liquidbook) on CodePen.
Installing a second WordPress instance in a subfolder
I recently worked on a project where the client wanted to add a second WordPress instance (install) within a subfolder of the main site. The main WordPress site is a WordPress directory website. The new second site is a magazine with a different identity. Normally, you put your blog in a subfolder like mysite.com/blog, and you can easily create a different look for that section. This is a scenario where you need a different WordPress instance. With a second WordPress site, there are three domain options.
Three domain options for your second WordPress instance
- newsite.com – new domain
- newsite.mainsite.com – subdomain
- mainsite.com/newsite/ – subfolder
There are many pros and cons for each domain scenario. One of the big pros for using the subfolder is the increased SERFS value. I have listed some articles below if you want to read more about choosing a domain option, and the best practices and SEO considerations.
Second installation of WordPress and the permalink subfolder conflict
WordPress does not like this scenario. If your second subfolder installation is successful, you may likely run into an issue when WordPress writes its Permalink (within the subfolder). The issue apparently has to do with the subfolder installation and how it sees the site root path. WordPress will normally write a .htaccess file in the installation directory, and that folder is usually the website root folder. Here is the applied solution:
===== Original WordPress .htaccess (within the subfolder) ========
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
The solution is in the .htaccess file within the subfolder
===== change to new WordPress .htaccess (within the subfolder) ========
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /newsite/
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /newsite/index.php [L]
</IfModule>
# END WordPress
Further reading on installing in a subfolder and the .htaccess issue:
Further reading on domain options, and the best practices and SEO considerations:
- SEO Best Practices: Setting Up a Blog
- Which is best for blog SEO: separate domain, subdomain or subfolder?
If this is helpful or you have something you want to add, please leave a comment.
Speeding up your WordPress Website
One of the big questions we get from clients is “what can I do to speed up my website?” I wish there was a magic button that solved this issue, but there’s not. That being said, there are numerous things that can be done to increase your WordPress website speed. Page load speed is very important with more and more people viewing your website on their smartphones and tablets on a mobile wireless network. We came across this article in Smashing magazine which covers this topic. With clients’ websites we apply many of these speed enhancing techniques. Here is a list of our top five suggestions for increasing your WordPress website.
Top five suggestions for increasing your WordPress website:
- Choose a good hosting service – (good article from Venture Harbour by Marcus Taylor)
- Compress your images – try WP smush.it – Free plugin
- Leverage browser caching – try W3 total caching – Free plugin
- Minify CSS and Javascript – try W3 total caching or Better WordPress Minify – Free plugin
- Look for sluggish plugins – try P3 – Free plugin
Test your website speed:
- PageSpeed Insights – by Google Developers
- WebPageTest
- Pingdom Website Speed Test
Update: We came across this article – How to Speed Up WP Engine for Running WordPress Sites Super Fast. This article may seem a little focused on increasing your WP Engine performance, but many of his suggestions would apply to any hosting service. The article is worth a quick read.
We are also happy to talk with you about your WordPress Website – maybe this is something we can help you with.
Working with WordPress
As you may know, WordPress is the most widely used content management system (CMS), with about 60 million sites. Many hosting services feature an easy WordPress install option. It’s free and open source. WordPress features easy to install themes and a vast array of plugins that will often provide inexpensive solutions to your needs. WordPress.org is a great starting place to learn more about WordPress.
Themes
For WordPress users the vast number of well designed themes are why they chose it. Many themes will have 80%, if not all, of the features you need right out of the box. Themes allow you to change the appearance of your site without directly affecting the site content. Installation is very easy and will let you switch themes with just a few clicks of a mouse. A theme is part look and feel, and part mini program that uses the WordPress engine. Often they are categorized into general groups like personal, business, magazine, media, portfolio, ecommerce, and so on. Some are built for a specific industries like restaurants, real estate, hotels, salons, and many more. And some themes have specific functionality like forums, member management, ecommerce, social networking, and more. The specific function you’re looking for can also be found as a plugin and can be applied to general or industry theme, so a restaurant can use a plugin to add a shopping cart.
Buying a Theme
Theme marketplaces like ThemeForest.net and MojoThemes.com have a large selection of themes. Many are less than $50, and you can demo the theme before you buy. There are several companies that develop themes at an affordable price. I am listing a few; there are many more:
- WooThemes – great framework and one of the best e-commerce plugins (WooCommerce)
- Templatic.com – a selection of industry specific templates (real estate, hotel booking, legal, and so on)
- ElegantThemes.com – a large selection at a great price
- StudioPress.com – another solid developer
Plugins
Many plugins really make WordPress shine. A plugin allows you to add new features to your existing theme. You can search and activate plugins right from the plugins control panel. They have features like e-commerce, forums, google maps, SEO, website analytics, and more than 20,000 others. While some are paid premium plugins, the majority of them are free. Some plugins like JetPack and WooDojo are meta plugins that contain a gallery of one-click plugins.
My top five plugin recommendations:
- JetPack – a series of great free plugins to super charge your site – Free
- WooCommerce – a great e-commerce solution – Free
- Gravityforms – Makes form creation easy and powerful
- BackupBuddy – the name says it all
- WordPress SEO by Yoast – A great SEO tool – Free