9seeds

Building Custom WordPress Solutions | Plugin Development

 

Tech Talk

Stealing math from Wikipedia

Posted on

WordPress + Jetpack + LaTeX = Awesome

On my personal WordPress website I wrote about an Arduino device I built to help brew beer.  Being my first foray into electronics, I wanted to document my experiences.  One of my difficulties centered around turning electrical values (voltage, resistance) into real-world values (temperature) using math.

As part of my documentation, I wanted to re-create some equations that I had found on a Wikipedia page about thermistors.  While in the process of grabbing their images and putting them into the media library, I remembered something…

One time while on the main Jetpack screen in the WordPress dashboard, I noticed a tile that advertised “Beautiful Math.”  So I looked into it.  Jetpack has a LaTeX module that can accomplish this.  LaTeX is a rather old-school markup/typesetting language that has been very popular in academia, especially in regards to math.

So Jetpack and LaTeX can do math, but I didn’t really want to learn a new markup language, I just wanted to quickly copy & paste the equations into my post.

Good Authors Borrow, Great Authors Steal

So then I wondered how Wikipedia is storing the images or if they’re doing something similar.  Guess what?!?  They use LaTeX too!  Putting the same equation into WordPress is as easy as clicking “Edit” on the Wikipedia page and copying the text between <math> and </math> and pasting it in-between [latex] and [/latex] in WordPress.

Native vs. Shortcode formatting Tricks

Jetpack supports using the $latex $ native format instead of the shortcode, but there are a few noted (and undocumented) differences between using the two methods. For instance, if you want to increase the size of your rendered LaTeX text, you can use the s (size) parameter in your LaTeX equation as such:

$latex \LaTeX&s=4$

Where size in this example is “4.”  However if you try to do this using the shortcode as such:

[latex] \LaTeX&s=4[/latex]

it will render as: [latex] \LaTeX&s=4[/latex] – Not exactly what you’d expect 🙁 The trick is that the following LaTeX parameters need to be fed in as shortcode parameters:

So if you want to have “LaTeX” rendered as:

$latex \LaTeX&bg=ffcccc&fg=cc00ff&s=4$

You can either do:

$latex \LaTeX&bg=ffcccc&fg=cc00ff&s=4$

or  move the size & color parameters into the shortcode tag like this:

[latex bg=ffcccc fg=cc00ff s=4]\LaTeX[/latex]

Some handy tools from the Community Summit

Posted on

A few weeks back I had the great privilege of attending the WordPress Community Summit. Rather than renting a hotel room by myself, instead I rented a house with 4 other Community Summit attendees; Ryan Imel, Brad Williams, Brandon Dove and Dre Armeda. Not exactly bad company to keep. We figured staying in the same house would help keep costs down and would also be a lot of fun. What we hadn’t really planned on was some of the great knowledge sharing that took place.

One afternoon while we were hanging out in the house, we started talking about some of the handy tools we all use. As the conversation went on, Ryan had the quick sense to open up a Google doc and start taking notes. Below is the list of handy tools we came up with.

Keep in mind, these lists are definitely not all inclusive. We know there are many other text editors and cool apps out there. But these are the ones that are top of mind that day.

Text editors

Mac Apps

  • Alfred – Easily launch applications, sites and perform several other tricks
  • CoBook – Amazingly easy and simple CRM tool
  • Spirited Away – Hides apps after a set amount of idle time
  • Hazel – Simple automation tool for dealing with files
  • Total Terminal – Formally called Visor, a system wide hotkey for terminal
  • Droplr – Easy screenshot/text file uploader for sharing
  • TypeIt4Me – Text expander

Custom Searches for Alfred

  • http://wordpress.org/extend/plugins/search.php?q={query}
    Search the WordPress plugin repo
  • http://wordpress.org/search/_Reference+{query}
    Search wordpress.org for functions, actions, filters, etc
  • http://demo.studiopress.com/{query}
    Quickly load any StudioPress theme demo site

If you’ve got another tool to add to the list, drop it in the comments.

Converting Blogspot / Blogger to hosted WordPress

Posted on

First Try

Migrating your Blogspot or Blogger weblog to a hosted WordPress installation should be easy.  But you may run into some problems along the way, so here are some quick ways to make it less painful.

When I first attempted this, I used the Blogger Importer plugin found in the “Tools” → “Import” menu of a new WordPress installation.  It went OK.  The importer pulled in all of the posts and the comments, but there seemed to be some extra markup that made it’s way into the posts.  All of the post titles now started with “>”:

>Why Hello There!

Also, while images in the content seemed to be fine, none of the media was actually imported into WordPress, they were still being hosted on blogspot.com.

Resetting the WordPress installation to start over

So now WordPress has a bunch of content that I want to delete so that I can start over and hopefully get it right the next time.  For this I used WordPress Reset.  I was able to use it to remove the (bad) imported content and reset it back to a new installation.  It’s multi-site friendly and only restored the one site and left all the content from the parent and sibling sites alone – although I can’t vouch for what it would do if you ran it on the parent site of a network installation.

A 2-Step Approach

Now that I was back to square one it was time for a different approach.  After some reasearch, someone on the WordPress Forums mentioned using WordPress.com to do the Blogger import, then exporting from WordPress.com as a native WordPress export file (WXR / XML), and import that file into your new WordPress installation.

Importing Blogspot / Blogger to WordPress.com

So over at WordPress.com, everything is like a normal WordPress installation, except they have turned it up to 11.  They have powerful servers, and a dedicated staff that make amazing additions to the most popular free plugins – one of which is the Blogger import.  On WordPress.com you have an additional option to import a Blogger export file:

Rather than authorizing the plugin to get everything from the site, we’ll export it to a file. Log into your Blogger account. When you’re logged in and viewing your blog there’s a “Design” link in the upper right menu bar, click that. Once you’re at the Blogger administration page click the “Settings” menu, and then “Other.” You will have an option under “Blog Tools” to “Export blog”:

Take that file and import it into a new WordPress.com site. You’ll want to make sure that this blog is public (but not necessarily indexed by search engines) as our hosted WordPress installation will need to be able to pull media files from it, but we don’t want it to wind up on Google, as it’s only temporary. It might take a while to fully complete, but WordPress.com should bring in all your Posts, Comments, and Media just fine. Once you’re sure that it’s done, export the WordPress.com site through the “Tools” → “Export” menu, selecting “All Content.”

Importing WordPress.com’s export into a hosted WordPress site

Before we begin importing the content from WordPress.com, two things should be changed in the WordPress Importer plugin‘s wordpress-importer.php file, which can be done through the plugin editor.

Just so we know when the importer runs into issues, change IMPORT_DEBUG to true:

/** Display verbose errors */
define( 'IMPORT_DEBUG', true );

Then to make sure we get everything, find the line that starts with:

$post_exists = post_exists( $post['post_title'], ...

This was on line 539 for me.  Comment it out using slashes:

//$post_exists = post_exists( $post['post_title'], ...

Then just below that line add:

$post_exists = false;

I did this because when WordPress.com imported images from Blogger, it gave them the same name as the post title, So if a post was called “Why Hello There!” and it had 5 pictures in it, all 5 pictures also had the title “Why Hello There!” This was preventing the importer from getting everything. Plus I already reset the installation, so there’s no content to duplicate or overwrite anyway. And I reasonably trust that I want to retrieve everything contained in the WordPress.com export file.

Run your import and everything should go smoothly. After you’ve verified you have everything in your new hosted WordPress installation, you can delete your WordPress.com site or make it private. You may also want to undo the WordPress Importer changes for future imports.

Paypal Express Checkout and Credit Cards

Posted on

I have found hundreds if not thousands of posts on the Internet at large saying that Paypal won’t let customers use credit cards if they don’t have a Paypal account if you’ve integrated your cart using Express Checkout.

OK, that’s a bit of hyperbole. It probably wasn’t hundreds but it was enough that while initially searching for a solution, I took it as gospel that is just wasn’t possible.

Then, when attempting to convert WP Event Ticketing to use Web Payments Standard and hitting some snags, it took me almost an hour to hit upon the correct combination of words while searching Google that led me to this post.

The relevant information is this

It appears that some of the confusion surrounds the myth that Express Checkout requires users to have a PayPal account to make payment. This is patently untrue. To allow credit card payments without creation of a PayPal account set SOLUTIONTYPE to Sole in the SetExpressCheckout api call. To change the first page of the Express Checkout flow from a PayPal login page to both a credit card form AND a paypal login form set LANDINGPAGE to Billing in the SetExpressCheckout api call.

That’s all there is to it. The relevant bit of my code went from this

                    
$nvp = array('PAYMENTREQUEST_0_AMT' => $total,
        "RETURNURL" => $returnsite,
        "CANCELURL" => $returnsite,
        "PAYMENTREQUEST_0_PAYMENTACTION" => 'Sale',
        "PAYMENTREQUEST_0_CURRENCYCODE" => 'USD'

to

                    
$nvp = array('PAYMENTREQUEST_0_AMT' => $total,
        "RETURNURL" => $returnsite,
        "CANCELURL" => $returnsite,
        "PAYMENTREQUEST_0_PAYMENTACTION" => 'Sale',
        "PAYMENTREQUEST_0_CURRENCYCODE" => 'USD',
        "SOLUTIONTYPE" => 'Sole',
        "LANDINGPAGE" => 'Billing'

That’s all there is to it. Customers are now faced with either using their credit cards or using their Paypal account while checking out.

Tonight we are releasing WP Event Ticketing version 1.2.2 which gives your buyers the option to purchase tickets with a credit card without requiring them to have a Paypal account.

The path to admin menu enlightenment

Posted on

We’ve all seen this menu a million times. It’s our friendly neighborhood WordPress admin nav menu. If your’re the kind of person who enjoys making plugins you’re probably on the following path.

Level 1

Q) My plugin is simple and all my options fit on a single page. How do I add an option page for my plugin?
A) Let add_options_page() be your guide. 

add_options_page('Simple Options','Simple','activate_plugins','simple-admin-settings',array('tutorial','controlForm'));

Level 2

Q) My plugin is not that simple anymore and I’m going to need more than one page to control all this awesome. How do I make a whole new top level nav container like Users, Tools or Settings?
A) add_menu_page() with a couple add_submenu_page() calls will solve this problem lickety split.

add_menu_page('Complicated Options', 'Complicated', 'activate_plugins', 'complicated', array("tutorial", "controlForm"));
add_submenu_page('complicated', 'Reporting', 'Reporting', 'activate_plugins', 'reporting', array('tutorial', 'reporting'));
add_submenu_page('complicated', 'More Options', 'More', 'activate_plugins', 'moreoptions', array('tutorial', 'moreControl'));

Level 3

Q) My awesome is contained in a box but I don’t want the first link to match the name of the nav container. I want reporting to be first and I don’t want that first link to say Complicated. How do I change the name in that first link?
A) add_menu_page() with a couple add_submenu_page() still but we have to do something a little weird.

What you have to do is make the first submenu page have the same slug as the top level menu page and have them both point at the same callback.

add_menu_page('Complicated Options', 'Complicated', 'activate_plugins', 'complicated', array("tutorial", "reporting"));
add_submenu_page('complicated', 'Reporting', 'Reporting', 'activate_plugins', 'complicated', array('tutorial', 'reporting'));
add_submenu_page('complicated', 'Options', 'Options', 'activate_plugins', 'control', array('tutorial', 'controlForm'));
add_submenu_page('complicated', 'More Options', 'More', 'activate_plugins', 'moreoptions', array('tutorial', 'moreControl'));

Level 4 – Menu Nirvana

Q) My menu link is perfect in every way but for UI purposes I want the menu page to show up somewhere else in the nav menu, not at the bottom. How do I place it somewhere else?
A) add_menu_page() and its siblings add_object_page() and add_utility_page() help you out here.

First, a brief description of the “priority” argument to add_menu_page(). You can forcibly put your menu page wherever you want in the nav menu. If you ever programmed BASIC in the days you had to type line numbers this will seem familiar. Each menu has a position, illustrated here

So if you wanted to drop your menu right after comments you could do the following (but don’t, I’ll explain why in a second)

add_menu_page('Tickets', 'Tickets', 'activate_plugins', 'eventticketing', array("eventTicketingSystem", "ticketReporting"),'',30);

It looks good but there is a fatal flaw in this method and that is that there is no internal check to make sure that 2 plugins aren’t picking the same position in the menu. In this case what happens is whichever plugin gets loaded second wins. Your plugin will work just find and you can manually get to all your option pages via their slugs but you won’t be able to see it at all. We discovered this the hard way when we picked 30 for a plugin we wrote. 30 is an especially bad one to chose as that’s the same menu position that Thesis picks for itself.

WordPress understands this desire, however, and gives you an easy way to pick that spot which picking 30 would get you: add_object_page().

add_object_page('Complicated Options', 'Complicated', 'activate_plugins', 'complicated', array("tutorial", "reporting"));
add_submenu_page('complicated', 'Reporting', 'Reporting', 'activate_plugins', 'complicated', array('tutorial', 'reporting'));
add_submenu_page('complicated', 'Options', 'Options', 'activate_plugins', 'control', array('tutorial', 'controlForm'));
add_submenu_page('complicated', 'More Options', 'More', 'activate_plugins', 'moreoptions', array('tutorial', 'moreControl'));

The benefit here is that it just appends and as long as plugins are using it, they won’t be bumping into each other. There’s also add_utility_page() which appends your menu below the Settings menu page. The difference between this and just not using a position whatsoever is that this method puts it above anything menu page which has no position defined. Position 81 instead of position 100 as seen in the previous screenshots.

Hopefully this helps you understand menu positioning a little bit more and if you find that your menu position is causing your plugin to disappear in certain circumstances, take a look at what else you have activated and what positions they’re grabbing. Odds are it’s the same one you are

And, like so many things in life, it’s not always what you know but who you know. Big, big thank you to Brandon Dove for pointing out how to rename the first link in a menu page to be something different than the name of the menu page.