How to Fix WordPress CSS & JS From Breaking

I recently came across a strange WordPress issue that was driving me up a wall. After completing a fresh install in a MAMP environment, I was having intermittent issues where it appeared the CSS and JS wasn’t getting loaded in the admin dashboard.

Ever run into CSS or JS failing to load when working on a WordPress project locally? Me too!!! I even tried a fresh install using MAMP, but still got intermittent issues. It was driving me nuts until I did a little googling and found what the problem was.

WordPress loadscripts Screenshot Error

If you’re seeing something like what’s shown above, you’re probably having the same issue I was with the load-scripts.php and load-styles.php files. I was surprised to see on a fresh install of WordPress, console was returning a bunch of CSS and JS errors. I took a look at one of the problem files, load-scripts.php from the console and found:

WordPress load-scripts.php Console Error

Yikes! Initially I thought my install got corrupted somehow, so tried to re-installing WordPress again with no luck. After digging around, I came across this post by Michael Novotny.

Basically, he found that hacking a WordPress core file — which is a big no-no, could fix the problem. In wp-admin/load-styles.php he replaced this line:

error_reporting(0);

with:

error_reporting( E_ALL | E_STRICT );

and Viola! All was working again. Although like I said, editing a core WordPress file is never a good idea.

The Solution

So what’s a good fix for this bug? One of Michael’s readers, Dan, posted a comment in response to his post:

I also had this issue with MAMP pro. I found that adding:

define( 'CONCATENATE_SCRIPTS', false );

to wp-config.php worked as well. Perhaps you might feel a little better modifying config file over a core file.

This is a much better fix instead of hacking at WordPress’s core files. So in wp-config.php at the bottom of your file, place the following code:

define( 'CONCATENATE_SCRIPTS', false );

Check out this article by Jean Galea for further reading on this pesky bug.

How to Add Custom Shortcodes in Drupal 7

I was recently tasked with adding the ability for writers to enter simple shortcodes in Drupal’s WYSIWYG editor. My first thought was, no problem! It’ll only take me a few minutes. Like with everything Drupal, nothing is that simple. The ease at which WordPress makes it for developers to create and build blows Drupal out of the water. Simple tasks like creating these shortcodes — filters in Drupal speak—is a cinch using WordPress’s Shortcode API. So, how do you add custom shortcodes in Drupal?

I was recently tasked with adding the ability for writers to enter simple shortcodes in Drupal’s WYSIWYG editor. My first thought was, no problem! It’ll only take me a few minutes. Like with everything Drupal, nothing is that simple. The ease at which WordPress makes it for developers to create and build blows Drupal out of the water. Simple tasks like creating these shortcodes — filters in Drupal speak—is a cinch using WordPress’s Shortcode API. So, how do you add custom shortcodes in Drupal?

Custom Shortcodes in Drupal 7

Before I begin, bare with me, because as I said before—I’m a WordPress developer. There may be an easier way to go about doing this, but this is what I’ve found works best after reverse engineering Drupal’s Node Embed module. I also came across this post by Ivan Soto that shows how to use the Custom Filter module to accomplish this. I’d rather learn how to do it myself, than a plug and play option so I get more familiar with how Drupal works. Suggestions welcomed!

Build the Drupal Functionality

I started off with building a custom module that will hold my shortcode logic. Here’s the directory structure:

Webroot
— sites
— all
—- modules
—– custom
—— custom_shortcodes
——- custom_shortcodes.info
——- custom_shortcodes.module

First, you need to tell Drupal about your module. In the custom_shortcodes.info:

name = Custom Shortcodes
description = Sets up a custom filter that enables custom shortcodes.
core = 7.x

That’s it for that file. Next comes the custom_shortcodes.module file. This is where all the magic happens:

That’s it for the module. Now, you’ll need to enable it through admin/modules or with Drush:

Once you’ve enabled the module, you’ll need to update the text formats so the Custom Shortcodes filter is enabled through admin/config/content/formats.

Now when you enter [style:class_name]Content[/style] in Drupal’s WYSIWYG editor, the front-end output will look like this:

Wouldn’t it be nice to have a button on the editor to do this for you? I agree. But alas, haven’t figured out that part yet. Once I do, I’ll come back and update the post so you’ll know what I know. In the meantime, I’d love to hear your thoughts, suggestions or even a way to add that button, comment below!

Thanks to Matt Alexander for the regular expression!

Most Useful WordPress SQL Queries

WordPress is one on the most popular CMS around and for good reason. The ease at which it allows anybody to build and maintain websites can’t compare to other systems like Drupal or Joomla. Sometimes though, you’ll need to transfer a WordPress site to another URL or clean up your database to boost server performance. This can sometimes be tricky if you attempt to handle everything through the admin panel. To make life a little bit easier, I’ve put together a list of the most useful WordPress SQL queries.

WordPress is one on the most popular CMS around and for good reason. The ease at which it allows anybody to build and maintain websites can’t compare to other systems like Drupal or Joomla. Sometimes though, you’ll need to transfer a WordPress site to another URL or clean up your database to boost server performance. This can sometimes be tricky if you attempt to handle everything through the admin panel. To make life a little bit easier, I’ve put together a list of the most useful WordPress SQL queries.

Before you proceed…

It’s always good practice to backup your database before making any major changes. Should something go wrong, you’ll always be able to restore the old site. If you need help, try one of these useful WordPress plugins:

  • WP-DB-Backup
    WP-DB-Backup allows you easily to backup your core WordPress database tables. You may also backup other tables in the same database.

  • WP-DBManager
    Allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of backing up, optimizing and repairing of database.

Alternatively, you can backup your database through phpMyAdmin manually.

The Most Useful WordPress SQL Queries

Running simple SQL queries like the ones listed below is easy. One of the easiest ways to accomplish it is through phpMyAdmin. If you don’t have phpMyAdmin installed or unsure how to access it, like with most things WordPress, there’s a plugin that can help you out. The WordPress SQL Executioner is a plugin that allows you to execute SQL queries through the admin panel.


Update the site URL & home URL

When you install WordPress for the first time, it stores the absolute path of the site URL and home URL in the database. This can make it a little tricky when you transfer your WordPress site from one URL to another. When you try, your site won’t load because the absolute URL is still set to the old URL. Fixing this is easy by updating the site URL and home URL in the database:

Update the GUID

One of the most crucial updates to make after a site transfer is the GUIDs. This is important because the GUID is used to translate post and page slugs to the correct absolute path. Updating this is just as easy as updating the site URL and home URL:

Update the URLs in your content

Like the site URL and home URL, WordPress uses absolute paths when embedding media and links into your posts or page content. When you transfer a WordPress site to a new URL, you’ll need to make sure to update those URLs so they don’t get broke. This can be a tedious and time-consuming process if you have a lot of content to update. Running the SQL query below will make it fast and easy:

Update image paths only

If you use a CDN or cloud service like Amazon CloudFront to serve images, you’ll need to update the image paths in your existing posts and pages so they get loaded by the service instead of your server. Use the query below to only update image paths:

Update your posts meta information

WordPress stores special post information in a separate table. If you’ve transferred your WordPress site, you’ll need to update that information should any of it point to your old URL. Use the query below to easily do this:

Change the default “admin” username

When you first install WordPress, it’s default account username is set to “admin”. Since this is widespread knowledge, it causes security concerns and should be changed. Changing it to a more unique name can boost your site’s security. Use the query below to change the default “admin” username:

Change your WordPress password

Need to change your WordPress password and can’t find where to do it in the admin panel? Use the query below to quickly make the change:

Assign posts from one author to another

Say you want to transfer articles from one author to another. This is another time consuming and tedious process if you’ve got a lot of posts on your site. You can easily and quickly make this change, but first need to obtain the author’s ID by going to your user page in the WordPress admin panel. Click the user’s name to view their profile and then look at the address bar taking note of the “user_id”. Then, use the query below to easily transfer ownership from articles assigned to one author to another:

Delete revisions

When you edit WordPress posts of pages, by default, it saves each revision so you can easily revert should something go wrong. This can cause use up your server resources when you have thousands of entries. Your database will grow significantly and will cause an increase in loop iterations, data retrieval and will affect page load times. To help optimize your WordPress database, delete old revisions that you don’t need anymore by using the query below:

Note: Bear in mind that all revisions from each post will be deleted, including all of its meta data.

Delete post meta

Installing or removing plugins is a very common task for WordPress. Some of the plugins make use of the post meta to store data pertaining to the plugin. After you have removed the plugin, those data are still left inside the post_meta table, which will no longer be needed. Run the following query to clean up the unused post meta value. This will help to speed up and reduce the size of your database.

Export all comment emails with no duplicates

Over a period of time, your blog will have received many comments. These comments will include the email addresses left by the commenter. You can retrieve all these emails for your mailing list without any duplicate.

Delete all pingbacks

Popular articles receive plenty of pingback. When this happens, the size of your database increases. In order to reduce size of the database, you can try removing all the pingbacks.

Delete all spam comments

If you have plenty of spam comments, going through each page to delete spam can be tedious and frustrating. With the following SQL query, even if you have to face deleting 500 over spam comments, it will be a breeze.

  • 0 = Comment Awaiting Moderation
  • 1 = Approved Comment
  • spam = Comment marked as Spam

Delete unused tags

In a WordPress database, if you run a query to delete old posts manually from MySQL, the old tags will remain and appear in your tag cloud/listing. This query allows you to delete the unused tags.

Find how many entries are spam

We look at the column comment_approved. Here WordPress stores the type of the comment. We collect the amount of the different values with COUNT(*) and put it into the variable amount.

comment_approved amount
spam 12118
1 104
post-trashed 1

The 1 represents approved, real comments. We are already seeing: only 0.85% of all comments are spam. Unfortunately, this is a normal value. The mean part is: MySQL must always go through the entire table to find the real comments for the output in the published articles. With an index, an optimized query structure, this goes faster.

Find which posts suffer from the most spam

The more popular a post is, the more spam it attracts. Some posts get almost never spam, others are downright overwhelmed. We get the 20 most spammed posts with this query:

comment_post_ID amount
1776 2299
2184 1840
143 1759
1366 1145
2377 960
2456 512
2536 497
683 486
1373 236
1402 200
1522 174
2458 161
1168 127
10473 121
647 116
2357 114
2831 111
2420 110
741 94

Now we could protect for these articles the comments with a registration or just close the comment form. Both solutions are not ideal.

Find where the most spam comes from

comment_author_IP amount
173.242.120.58 450
198.200.37.51 386
198.200.37.59 287
192.74.240.170 268
109.163.236.87 218
192.74.230.131 181
212.59.28.172 157
198.200.37.83 153
91.236.74.117 148
212.59.28.221 147
142.0.138.77 140
142.0.136.9 117
192.74.228.242 109
142.4.117.43 91
137.175.1.235 88
142.4.97.173 82
142.4.117.162 80
198.200.33.140 80
192.74.228.161 73
193.105.210.217 63
142.4.96.66 63
91.231.40.28 55
193.105.210.216 54
142.4.96.74 54
192.74.228.164 51
192.162.19.193 48
80.93.213.249 48
192.74.231.156 46
142.0.136.12 46
91.231.40.27 46

There is so much spam from some IP addresses that we can lock them out safely. This is works in a .htaccess, for example, like this:

# IP block list
order allow,deny
deny from 173.242.120.58
allow from all


Do you have any useful WordPress SQL queries you use?

I’d love to hear from you! Comment below with some useful WordPress SQL queries you use to update, optimize and manage your site.

Load JS & CSS Files on Specific Pages in Drupal 7

Loading a CSS or JS file for a particular page in Drupal is a cinch with hooks. Here’s a few of the ways you can load JS & CSS on specific pages. Before you get started, I’d suggest taking a look at Drupal’s drupal_add_js and drupal_add_css. Regardless how you go about doing it, you’ll need to be somewhat familiar with these functions.

Loading a CSS or JS file for a particular page in Drupal is a cinch with hooks. Here’s a few of the ways you can load JS & CSS on specific pages. Before you get started, I’d suggest taking a look at Drupal’s drupal_add_js and drupal_add_css. Regardless how you go about doing it, you’ll need to be somewhat familiar with these functions.


Using a Module

Here’s one of the simplest methods I found to load certain JS and CSS files on specific pages. It uses a custom module and Drupal’s request_uri to define when scripts should get loaded.

function modulename_init() {
  if (request_url() == 'your-url-path') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

Using a Template Preprocess

You can also use Drupal’s preprocess functions to add JS and CSS to specific pages:

In your template.php:

template_preprocess_node

function yourtheme_preprocess_node(&$vars) {
  // Add JS & CSS by node type
  if( $vars['type'] == 'your-node-type') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
  
  // Add JS & CSS to the front page
  if ($vars['is_front']) {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
  
  // Add JS & CSS by node ID
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'your-node-id') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

template_preprocess_page

function yourtheme_preprocess_page(&$vars) {
  // Add JS & CSS by node type
  if (isset($vars['node']) && $vars['node']->type == 'your-node-type') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

template_preprocess_views_view

function template_preprocess_views_view(&$vars) {
  // Get the current view info
  $view = $vars['view'];

  // Add JS/CSS based on view name
  if ($view->name == 'view_name') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }

  // Add JS/CSS based on current view display
  if ($view->current_display == 'current_display_name') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

Not comfortable diving into code?

Here’s a couple of Drupal projects that allow you to inject CSS and JS into your pages:

And of course, you can use a combination of the above to add your JS and CSS files to a page. If you do it a different way or know a better Drupal way, please comment below and let me know!

PHP Stock Market API

Here’s a quick API script I put together to help monitor my stocks. It’s a PHP Stock Market API that uses the Yahoo! Finance API and allows you to retrieve up to 20 current data points for a particular symbol. It’s simple to use and doesn’t require any knowledge on how to implement or use the Yahoo! Finance API.

Looking to grab the latest stock market data? There’s a surprising lack of stock market APIs out there and even fewer that work consistently or affordable. Never fear, the PHP Stock Market API is here!

The PHP Stock Market API is a simple PHP class that uses the Yahoo! Finance API allowing you to retrieve up to 20 current data points for a particular symbol. It’s simple to implement and doesn’t require you to learn how to use the Yahoo! API.

UPDATE (Nov. 28, 2014, v1.3): getData now allows an array to pull multiple stocks at once (thanks @d3vit).
UPDATE (Jan. 27, 2014, v1.2): You can now also retrieve historical data (open, high, low, close, volume & adjusted close).

Download Now (Version 1.3) Fork on GitHub


PHP Stock Market API Usage

With just a few lines of code, you can easily retrieve 20 current data points. Here’s how it works:

<?php
require_once('class.stockMarketAPI.php');
?>

<h1>Current Stock Information for AAPL</h1>

<?php
$StockMarketAPI = new StockMarketAPI;
$StockMarketAPI->symbol = 'AAPL';
?>
<pre><?php print_r($StockMarketAPI->getData());?></pre>

<?php
$start = '01-01-2013';
$end = '01-07-2013';
?>
<h1>Historical Stock Information for AAPL (<?php echo $start ?> - <?php echo $end ?>)</h1>
<?php
$StockMarketAPI = new StockMarketAPI;
$StockMarketAPI->symbol = 'AAPL';
$StockMarketAPI->history = array(
  'start'    => $start,
  'end'    => $end,
  'interval' => 'd' // Daily
);
?>
<pre><?php print_r($StockMarketAPI->getData());?></pre>

<hr>

<h1>Stock Information for AAPL, MSFT, GOOGL</h1>
<?php
$StockMarketAPI = new StockMarketAPI;
$StockMarketAPI->symbol = array('AAPL', 'MSFT', 'GOOGL');
?>
<pre><?php print_r($StockMarketAPI->getData());?></pre>