WordPress.com Admin now in JavaScript

The WordPress.com development team has now moved development of the WordPress.com CMS admin to JavaScript.
Two articles to read:

Given the pervasiveness of WordPress and the size of the development community, I believe this is a watershed moment. Arguably web developers are now officially living in a JavaScript-driven world. Might this be the beginning of the end for PHP?

This chart of benefits from the WP developer article says it all. (Click to expand.)
WordPress.com advantages of new workflow
See this table listing the benefits of the new JavaScript workflow at WordPress.com.

Delete 14,700+ Unfiltered “Approved” Spam Comments in WordPress using SQL

For some reason this blog had all of its discussion settings reset, and plugins turned off, on June 2, 2015.

Within a couple of weeks, the blog had accumulated nearly 15 thousand spam comments. These comments were obviously spam, but with Akismet and WP Spam Shield down, and my discussion settings reset — they all went right through and were immediately published.

Deleting 14,700+ comments a screen at a time was not going to work well.

Thanks to this helpful post by the folks at Cats Who Code, I found a much more efficient fix using SQL in PHPMyAdmin.

The steps:

1. Backup your database. (To be safe.)

2. Login to PHPMyAdmin.

3. Navigate to the desired database. (The main database for the blog.)

4. Select SQL, which allows you to run SQL queries.

5. Run a first query to select all comments after the date that everything went bad:

SELECT * FROM wp_comments
WHERE comment_date > '2015-06-01 00:00:00'

6. If you’ve selected them right, you should see the results in a table. Sort the results by date, in both directions, and review them to ensure they’re what you want to delete.

7. If so, then delete them using this SQL command:

DELETE FROM wp_comments 
WHERE comment_date > '2015-06-01 00:00:00'

WordPress and Bootstrap Lovers: Check out Shoestrap!

Shoestrap Theme Screenshot

One could argue that WordPress is fast becoming the MS Word of the Web — except that it’s open source and has approximately 1.5 kajillion contributors hammering out and sharing enhancements for free or cheap.

Recently, the Roots Theme has taken serious WP development a step forward by learning extensively from the HTML5 Boilerplate, cleaning up some unnecessary WP cruft, and riding on Twitter Bootstrap’s excellent LESS-CSS/JS front-end toolkit.

Working with Roots as its starting point, Aristeides Stathopoulos takes us yet another step along the path to world domination (or at least WP development bliss). His Shoestrap Theme — available as a standalone fork of Roots or as a Roots child theme — combines all the goodness we’ve known and loved in the Roots theme, plus …

Shoestrap adds:

  • WordPress’s theme customizer, such as found in the Twenty Twelve theme, with controls for uploading a logo image, modifying the header and footer, setting the color of the navbar, selecting a Google web font, adding social links, and more.
  • Additional layout options, with primary and secondary sidebars.
  • lessphp baked in, enabling a developer to compile LESS live on an installed WP site. Enable the theme’s Developer Mode (a Shoestrap theme option), and phpless will check the theme’s Bootstrap-based LESS files and recompile them once you’ve saved edits to them.

Great, great stuff. Free, opensource, with the option to receive a free license for update notifcations when you download from the Shoestrap website. Also available on Github. (Thanks Aristeides.)

And of course Shoestrap has some nice free and premium plugins available as well.

Font Awesome Icons not Working in Firefox? Probable cause and a fix

Firefox refused to display my Font Awesome icons. After some research I found it was a cross-domain issue created by the fact that the files were being served from a CDN. (Specifically, WP Engine’s CDN.)

The fix for me was to place an .htaccess file inside the font directory containing these lines:

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

This cleared it up for me. All now works as it should.

Catalin Rosu nicely explains the situation and the reason behind it here. (Firefox is actually behaving as it should.) If you’re using an nginx for your webserver, Rosu also mentions a possible additional required step.

One other potential alternative option is to embed the fonts as base-64.

Reposition the Navbar in the Roots Theme for WordPress


UPDATE: Since I produced this tutorial, Roots has been updated so that its file structure is a bit different.From Joshua’s comment below (Thanks Joshua!):

The header.php file now pulls in a template part based on whether your theme setup supports bootstrap-top-navbar:

if (current_theme_supports(‘bootstrap-top-navbar’)) {
get_template_part(‘templates/header’, ‘top-navbar’);
} else {
get_template_part(‘templates/header’, ‘default’);
}

So now, to access the header to make changes to the bootstrap top nav bar you will need to go to:
your roots theme folder > templates > header-top-navbar.php.


In this short video, I’ll walk you through the steps to control positioning of the navbar in the Roots Theme for WordPress.

Roots Theme Customization – Position the Navbar from David Cochran on Vimeo.

Covered in this video:

  1. Create a copy of header.php so that you may revert back to the original navbar if desired.
  2. Modify the markup in header.php to remove the class "navbar-fixed-top" and (if desired) wrap the navbar within a div of class "container".
  3. In app.css, adjust the styles for .navbar-inner as needed (such as to remove border-radius).

Relevant Previous Videos

If you’ve missed them, here are video introductions to prior steps, for your convenience. (Pick what’s relevant and helpful!)

Create Dropdown Menu Items

Add your Custom CSS

Don’t miss the full Roots Theme series

This is the first installment of a longer series I’m developing on Roots Theme customization.

Additional topics include:

  • Getting Started
  • Use your custom page template for a static front page
  • More topics in the works …

Check out the full series here.

If you’d like an introduction to Twitter Bootstrap …

Twitter Bootstrap 101 by David Cochran at webdesign.tutsplus.comAgain this is another basic introduction, but if that’s what you’re after, I’ve got a Twitter Bootstrap video tutorial series underway at Webdesign.tutsplus.com.

Create a Custom Homepage with the Roots Theme for WordPress

Feb 21, 2013Hi everyone —

Roots has changed so much I need to re-work these tutorials. I hope to clear the space and start cranking them out soon. If you’d like, sign up for email notifications in the sidebar, so you’ll be notified when I’ve begun rolling them out again!

In previous videos, I have walked through the process of creating a custom page template with a custom loop. In this short video, I’ll walk you through setting a custom page as your site homepage (or front-page).

Roots Theme Customization – Custom Front Page from David Cochran on Vimeo.

Covered in this video:

  1. Select a custom page template for a page named “Home.”
  2. In the WordPress admin panel, under Settings > Reading, select this page as the “Static Front Page.”
  3. Remove the template file, front-page.php from the main theme directory, enabling the selected page template to control the page’s markup and layout.

Relevant Previous Videos

If you’ve missed them, here are video introductions to prior steps, for your convenience. (Pick what’s relevant and helpful!)

Create a Custom Page Template

Create a Custom Page Loop

Add your Custom CSS

Don’t miss the full Roots Theme series

This is the first installment of a longer series I’m developing on Roots Theme customization.

Additional topics include:

  • Getting Started
  • Reposition the Navbar
  • More topics in the works …

Check out the full series here.

If you’d like an introduction to Twitter Bootstrap …

Twitter Bootstrap 101 by David Cochran at webdesign.tutsplus.comAgain this is another basic introduction, but if that’s what you’re after, I’ve got a Twitter Bootstrap video tutorial series underway at Webdesign.tutsplus.com.

Roots WordPress Theme Customization: Getting Started

Feb 21, 2013Hi everyone —

Roots has changed so much I need to re-work these tutorials. I hope to clear the space and start cranking them out soon. If you’d like, sign up for email notifications in the sidebar, so you’ll be notified when I’ve begun rolling them out again!

If you’ve not yet seen the excellent Roots Theme for WordPress, take a look. It brings to WordPress theme development the benefits of the HTML5 Boilerplate plus Twitter Bootstrap’s excellent CSS and JavaScript plugins. A WordPress developer’s dream in a tidy package.

This short video series introduces basic steps for installing and customizing the Roots Themes to suit your needs. By basic, I do mean basic. (Advanced users — you’ve been warned. Flee now. I’ll try to cook up something for you later.)

What these videos will cover:

  1. Downloading and installing the Roots Theme (very basic)
  2. Loading dummy content for theme development (from the WordPress theme unit test)
  3. Creating dropdown menu items (requires the creation of custom links)
  4. Creating a custom page template (introduces inc/roots-config.php)
  5. Creating a custom page loop
  6. Customizing the CSS by adding custom styles to app.css (introduces inc/roots-actions.php)

These videos are more-or-less stand-alone. Choose the topic relevant to your needs and jump in.

One more disclaimer: Production quality is a little rough in spots. Rushed to get these out for my university students. My apologies.

1. Download and Install the Roots Theme

Roots WordPress Theme – Download and Install from David Cochran on Vimeo.

2. Need Dummy Content? Here’s How

WordPress Dummy Content from the Theme Unit Test from David Cochran on Vimeo.

3. Create Dropdown Menu Items

Roots Theme Customization – Dropdown Menu Items from David Cochran on Vimeo.

4. Create a Custom Page Template

Roots Theme Customization – Create a Custom Page Template from David Cochran on Vimeo.

5. Create a Custom Page Loop

Roots Theme Customization – Create a Custom Page Loop from David Cochran on Vimeo.

6. Add your Custom CSS

Roots Theme Customization – Customizing the CSS from David Cochran on Vimeo.

Don’t miss the full Roots Theme series

This is the first installment of a longer series I’m developing on Roots Theme customization.

Additional topics include:

  • Use your custom page template for a static front page
  • Reposition the Navbar
  • More topics in the works …

If you’d like an introduction to Twitter Bootstrap …

Twitter Bootstrap 101 by David Cochran at webdesign.tutsplus.comAgain this is another basic introduction, but if that’s what you’re after, I’ve got a Twitter Bootstrap video tutorial series underway at Webdesign.tutsplus.com.

Current Favorite WordPress Plugins December 2012

Don’t miss our curated page of best WordPress plugins.

Here are a few of our current favorites. The list is not exhaustive, but it’s a nice little collection of solid recommendations.

Current Favorite Plugins

  • Google Analytics for WordPress by Yoast

    “Uses the asynchronous Google Analytics tracking code, the fastest and most reliable tracking code Google Analytics offers.”

  • WordPress SEO by Yoast

    “Improve your WordPress SEO: Write better content and have a fully optimized WordPress site using the WordPress SEO plugin by Yoast.”

  • Jetpack by WordPress.com

    Social sharing, email subscriptions, stats, spell-check, URL-shortener, Twitter feed widget, easy video embeds, and more.

  • Search Light

    Find-As-You-Type dropdown extension for the standard WordPress search

  • WP-DBManager

    optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of backing up and optimizing of database

  • Hyper Cache

    a well reviewed cache plugin specifically for shared hosting

  • Page Links To

    allows you to make a WordPress page or post link to a URL of your choosing, instead of its WordPress page or post URL

  • Redirection

    Manage 301 redirections, keep track of 404 errors, and generally tidy up any loose ends your site may have. This is particularly useful if you are migrating pages from an old website, or are changing the directory of your WordPress installation.

  • Disable Trackbacks

    “Globally disables trackbacks to cut down on spam. Very, very few people legitimately use trackbacks and spammers love them, so it’s worthy tradeoff.”

Don’t miss our curated page of best WordPress plugins.

Have great plugins to recommend? Use the comments below to suggest new additions to our list.

How to Export and Import Links (Blogroll) in WordPress

If you find yourself wanting to transfer a number of links, which you have entered as “Links” via the admin interface of your WordPress installation, from one WordPress site to another, this support article is helpful …

Import & Export Links — Support — WordPress.com

EXCEPT that my browser tried to save the file as a web archive. Choose “Source only,” and change the extension to xml.

Then upload the file using the Blogroll importer.

Works! with one flaw …

Unfortunately, it will not keep the link categories intact. You will need to update the category for each link. To save time, create a category in the new WordPress installation for the category most used in the old installation. Then select to have them all imported to this category. That way the majority will already be set correctly, and only the others changed.

CMSify: Simplified Admin WordPress Plugin

CMSify is a new plugin that features an admin panel where you can easily hide or enable features you may or may not need, all in one clean sweep.

As you can see below, there are dozens of options for customizing WordPress administration. Highlights include the ability to disable the upgrade notice for non-admins, remove dashboard and plugin widgets, remove post and page columns and remove every kind of post and page meta boxes from the post editor screen.

via Simplify WordPress with CMSify: Dozens of CMS Options in One Plugin.