Category Archives: wordpress tips

WordPress wants to update my custom theme

I build custom themes all day long all year long. Recently I created a theme with the word Diamond in the name. Once it was installed in WordPress, WordPress wanted to offer an update for it. It was offering an update to some random theme named Diamond. I tried changing the name in the style.css file to have other words in it, but it seems just having the name diamond triggered it. Then I changed the version number to 100. Since that’s way above any likely version number in the WP database, WordPress stopped offering an update! Alternatively, you could just remove the version number. That works as well.

Pagination for Custom Post Types

Getting pagination for your custom post type indexes isn’t too hard.

Set the variable $paged:


$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

Be sure that ‘paged’ is in your args for your WP_Query:


'paged' => $paged,

Output the links:


$output .= paginate_links( array(
'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $query_name->max_num_pages
) );

The countdown timer and possible redirect

Hey folks, here’s a nifty script that you can use to have a countdown timer. It’s also useful if you want a page to redirect at a specific time of day. For instance, if the sales of a client’s program ends at midnight, you can use this script to countdown to midnight and redirect to a different page after that time.

Got it from here…

https://gist.github.com/nbrombal/63923dda778c67f43ffa

Here’s the code:

<script>
(function($) {

// If target date is specific to one timezone, set to true and specify it
var absoluteTarget = true;
// this number is the number of hours behind Greenwich Mean Time you are setting your clock to.
// In this example, it's set to Pacific time, which is 7 hours behind GMT.
var targetTimeZone = -7;

// You set the target date/time with var targetDateUTC.
//Use this documentation to get an understanding of the numbers below: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC
var targetDateUTC = new Date(Date.UTC(2017,04,24,21,0)).getTime();
var currentDate = new Date();
var timeZoneOffset = (absoluteTarget ? targetTimeZone * -60 : currentDate.getTimezoneOffset()) * 60 * 1000;
var targetDate = targetDateUTC + timeZoneOffset;

var getCountdown = function() {
var totalSeconds = (targetDate - Date.now())/1000;
var days = Math.floor(totalSeconds / (60 * 60 * 24));
var hours = Math.floor(totalSeconds / (60 * 60)) % 24;
var minutes = Math.floor(totalSeconds / 60) % 60;
var seconds = Math.floor(totalSeconds) % 60;

if ( currentDate > targetDate ) {
// Redirect to specific URL
window.location.replace("http://jennjoycoaching.com/");
} else {
// I've commented the below out to NOT show the actual timer.
// if you want to show the timer, see the HTML markup below
// Display the remaining time
//$('.clock .days').html(days);
//$('.clock .hours').html(hours);
//$('.clock .minutes').html(minutes);
//$('.clock .seconds').html(seconds);
}
};

setInterval(getCountdown, 1000);

getCountdown();

})(jQuery);
</script>

HTML Markup for timer


<div class="clock">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>

 

WordPress and their premature attempt to move us forward on MYSQL

Ok, so on April 1, 2015…no kidding…Wordpress announced they are officially supporting the newer charset utf8mb4 in WP version 4.2. This charset is available in mySQL servers version 5.5.3 and higher (I think). This is cool and all, rather hipster, and up to date with best security practices and all that. However, what they completely missed was the fact that a huge portion of the shared server world is running mySQL versions 5.0 and 5.1. If you try to migrate a WordPress site from a server (or local box) that is appropriately running something remotely current to a shared hosting account with the older database, your migration will fail.

Here’s the article where they describe the changes and the beginning of the conversation about how it’s an issue…

https://make.wordpress.org/core/2015/04/02/the-utf8mb4-upgrade/

I’m sure there are thousands of developers wasting time figuring out how to fix this issue. I’ve not found an ‘easy’ fix. Here’s mine clunky version of migrating from development to staging/production…

  1. From phpmyadmin, or your favorite tool, do a full SQL dump.
  2. Run a script or manually change, the URL of the dev site to the new one.
  3. Run a script or manually change ‘utf8mb4_unicode_ci’ to ‘utf8_general_ci’
  4. Run a script or manually change ‘utf8mb4’ to ‘utf8’
  5. Import your new SQL dump into the new database.

This process assumes you’ve migrated the source code of WordPress already.

You can blame ISPs for not getting current, but I think trying to upgrade these older mySQL servers to something more current is an enormous headache for clients and ISPs a like. WordPress should really have paid attention to the reality of this situation and taken measures to mitigate the issue.

Happy hunting for an easier solution, but if you need, the above will work.

Partial Content 206 error on fonts after a hosting migration

I’ve recently encountered an issue twice in the last few weeks where the font-face fonts on a website stopped working after a migration to a new hosting provider.

I used the nifty tool, Backup Buddy from iThemes, and all went well, except on the new server the embedded fonts weren’t rendering. :/

After many hours of searching, checking headers, and such, I bothered to look at the console output in Chrome and noticed that there was an error speaking to cross-domain issues specifically regarding the font files.

So what was the issue? In WordPress, you can set the WordPress Address and the Site Address separately. If one is www.somedomain.com and the other is somedomain.com (aka the sub-domain doesn’t match) then you’ll get this pesky error.

Hope that helps.

ZIP issues on WordPress plugin updates

So, today I was helping out a colleague with some WordPress installations. When adding plugins or updating ones that were there, I encountered this well commented but not resolved error…

PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

Now, there’s a bunch of folks talking about this issue, with solutions ranging from not enough disk space, to permissions issues.

This issue occurred for me on a mediatemple grid server. I was not able to upload or upgrade any WordPress plugins on new or older versions of WordPress. This occurred in WordPress installs that did not have this problem before. Further, if I was on the server via the commandline, I could scp the zip files up and unzip them. The issue was only within the WordPress GUI. So, my guess is whatever process WordPress uses to unzip plugins is what’s causing the problem.

I’m pretty sure that the issue came about when the ZIP package was globally updated on the server recently. Since the php.ini file for the account was customized in some way, and it didn’t reference the correct zip extension, unpacking zip files via the WordPress GUI failed.

When I added ‘extension = zip.so’ to the php.ini file, this resolved the issue. I don’t know that this is the perfect solution for anyone else, but just another data point for folks looking for info.

Hope this helps someone out there 🙂

WordPress Theme TwentyTwelve

Ah, now for some analysis, and discovery 🙂  Each year, the brilliant minds that contribute to WordPress come up with a new theme, and I always tear it apart to do a little reverse engineering so I can get a better sense of some of the new features in the framework.

i usually start looking in a theme’s functions.php file just to get a sense of the functionality, since my bent is more toward the engineering side of things, but definitely dig into the style.css files and any other things I find.

Keep in mind, this is by no means a thorough review of the twentytwelve theme.  It’s really a review of stuff that I think is neat or applies to me in the way I make use of wordpress.

Here’s some of the fun new stuff in WordPress’ theme, TwentyTwelve:

A mobile ready navigation!  Whoot!  I’ve got my own solutions, and this little one is pretty nice.  You’ll find some of the particulars in /js/navigation.js and the rest is in the media queries of the style sheet.  You’ll also notice that the navigation is no longer in the #access element.  It’s been renamed #site-navigation and is referenced in the style sheet under .main-navigation.

There is a function in there, twentytwelve_body_class(), that defines the body class element a bit more than the last version. It’s a nice way to handle identifying different page templates.  I’ve got my own version that adds it in on the fly from within the custom templates that I’ve created, but this is a nice separation of functionality.

There seems to be new features for customizing themes.  I stumbled across the action ‘customize_register’, which led me to this page, http://codex.wordpress.org/Plugin_API/Action_Reference/customize_register.  There I can see that the management of a theme customization page has been built into the framework since 3.4 or thereabouts.  Nice.

Oh baby…the style sheet!  The revamp of the stylesheet is a great!  It’s like I’ve been developing for the WordPress team this past year as they’ve incorporated all the practices I’ve put into place in my own theme.  Yowsa.

First thing I notice right away is the switch to ‘rem’ as a unit.  Based on the addition of the ‘rem’ unit in CSS standards a while ago, I’d already switched over to the use of that unit as my base.  It seems that the WP team has gone for it full hog and implemented the ‘rem’ unit with a ‘px’ fall back.  Thanks guys!  They leave the base at what seams to be 14px, by leaving it to 87.5% of the base font size of browsers.  I always reset mine to a 10px base so that the math is easier for me.  This way, no matter where I’m at in the style sheet, I know that 1rem is 10px.  Plus, I try to set my base font size to 16px because I’m an old fart and it’s easier for me to read 🙂

There are a few added directories, /inc and /page-templates, where it seems that they’ve decided to do a little bit of file storage architecture, or also known as cleaning up the file structures 🙂  Again, pretty nice, as I’ve always incorporated an /inc directory for functionality and style files like php scripts, javascript files and fonts.

That’s all for now 🙂

Headshot advice

Here’s some incredibly valuable headshot advice that you may not want to hear.

If you plan to have your headshot displayed on the web, do yourself a favor and make sure you offer up photos that are NOT trimmed right to your head.  Make sure your face is clear of the edge of the frame.

Sometimes people do funny things with your headshots, like put them in circles and your face will just get cut off and look dumb.