Hacking a Theme

I was setting up a temporary WordPress site for a client as a placeholder for their business. All they wanted was their logo, a link to an existing product page, and a message about the site being under construction.

Since they were going to have some design ready shortly, I set them up with a WordPress site, and found a simple theme (Decode by Scott Smith) that their logo would work with.

The owner then told me she wanted to see the site running with SSL (aka HTTPS), so I grabbed a certificate and installed it.

To my surprise I saw the little warning on the site that told me it wasn’t fully secure.

So I dug into the page and found that the header image was being returned with the full URL of the site (not using a relative URL, so it contained the “http://” at the front of the image’s source element).

It occurred to me that I might have to upload the file using SSL (HTTPS), but that might lead to other issues. What I really needed to do was to get the image URL to be relative.

So digging around a bit, I found that the theme’s options are stored in the WordPress table called wp_options, in a row for that particular theme.

A query on the database of:

SELECT * FROM wp_options where option_name like 'theme_mods%';

Returns all of the options for the various themes that have stored options in the past. Looking for the particular theme, I knew I needed to change an option called “header_image”. Pulling the value for that column out, it was clearly structured data (a bit like JSON), so it seemed like maybe I’d get lucky and just be able to modify that URL and remove the “http:” from it:

a:68:{i:0;b:0;s:16:"background_color";s:6:"E3E5E7";s:12:"header_image";s:65:"http://www.accuweaver.com/wp-content/uploads/2014/01/IMG_1729.jpg";s:16:"background_image";s:0:"";s:17:"background_repeat";s:6:"repeat";s:21:"background_position_x";s:4:"left";s:21:"background_attachment";s:5:"fixed";s:13:"favicon_image";s:0:"";s:15:"show_site_title";b:1;s:21:"show_site_description";b:1;s:20:"show_site_navigation";b:1;s:16:"html_description";s:0:"";s:12:"show_sidebar";b:1;s:16:"sidebar_position";s:4:"left";s:23:"sidebar_button_position";s:4:"left";s:16:"constant_sidebar";s:7:"closing";s:15:"enable_comments";b:1;s:17:"show_social_icons";b:0;s:21:"open_links_in_new_tab";b:0;s:16:"twitter_username";s:0:"";s:12:"adn_username";s:0:"";s:17:"facebook_username";s:0:"";s:20:"google_plus_username";s:0:"";s:16:"myspace_username";s:0:"";s:11:"vk_username";s:0:"";s:17:"dribbble_username";s:0:"";s:16:"behance_username";s:0:"";s:20:"linkedin_profile_url";s:0:"";s:15:"tumblr_username";s:0:"";s:18:"pinterest_username";s:0:"";s:18:"instagram_username";s:0:"";s:14:"500px_username";s:0:"";s:15:"flickr_username";s:0:"";s:19:"deviantart_username";s:0:"";s:13:"rdio_username";s:0:"";s:16:"spotify_username";s:0:"";s:15:"lastfm_username";s:0:"";s:19:"soundcloud_username";s:0:"";s:14:"vimeo_username";s:0:"";s:16:"youtube_username";s:0:"";s:15:"github_username";s:0:"";s:13:"strava_userid";s:0:"";s:19:"foursquare_username";s:0:"";s:19:"slideshare_username";s:0:"";s:21:"researchgate_username";s:0:"";s:19:"youversion_username";s:0:"";s:14:"steam_username";s:0:"";s:16:"steam_group_name";s:0:"";s:14:"skype_username";s:0:"";s:13:"show_rss_icon";b:0;s:13:"email_address";s:0:"";s:12:"use_excerpts";b:0;s:32:"show_featured_images_on_excerpts";b:0;s:9:"show_tags";b:0;s:15:"show_categories";b:0;s:19:"show_author_section";b:0;s:19:"entry_date_position";s:5:"below";s:27:"show_entry_date_on_excerpts";b:0;s:17:"show_page_headers";b:1;s:21:"link_post_title_arrow";b:0;s:15:"show_theme_info";b:1;s:13:"site_colophon";s:0:"";s:10:"custom_css";s:0:"";s:12:"accent_color";s:7:"#009BCD";s:22:"secondary_accent_color";s:7:"#007EA6";s:10:"text_color";s:7:"#444444";s:20:"secondary_text_color";s:7:"#808080";s:18:"accent_color_icons";b:0;}

So of course I tried that and the theme (along with most of the settings) no longer worked. Digging a bit more, I found some threads that talked about the theme options structured data, and how they were constructed as a type:length:value set, so I updated the field again, this time changing the length to be five characters shorter:

a:68:{i:0;b:0;s:16:"background_color";s:6:"E3E5E7";s:12:"header_image";s:60:"//www.accuweaver.com/wp-content/uploads/2014/01/IMG_1729.jpg";s:16:"background_image";s:0:"";s:17:"background_repeat";s:6:"repeat";s:21:"background_position_x";s:4:"left";s:21:"background_attachment";s:5:"fixed";s:13:"favicon_image";s:0:"";s:15:"show_site_title";b:1;s:21:"show_site_description";b:1;s:20:"show_site_navigation";b:1;s:16:"html_description";s:0:"";s:12:"show_sidebar";b:1;s:16:"sidebar_position";s:4:"left";s:23:"sidebar_button_position";s:4:"left";s:16:"constant_sidebar";s:7:"closing";s:15:"enable_comments";b:1;s:17:"show_social_icons";b:0;s:21:"open_links_in_new_tab";b:0;s:16:"twitter_username";s:0:"";s:12:"adn_username";s:0:"";s:17:"facebook_username";s:0:"";s:20:"google_plus_username";s:0:"";s:16:"myspace_username";s:0:"";s:11:"vk_username";s:0:"";s:17:"dribbble_username";s:0:"";s:16:"behance_username";s:0:"";s:20:"linkedin_profile_url";s:0:"";s:15:"tumblr_username";s:0:"";s:18:"pinterest_username";s:0:"";s:18:"instagram_username";s:0:"";s:14:"500px_username";s:0:"";s:15:"flickr_username";s:0:"";s:19:"deviantart_username";s:0:"";s:13:"rdio_username";s:0:"";s:16:"spotify_username";s:0:"";s:15:"lastfm_username";s:0:"";s:19:"soundcloud_username";s:0:"";s:14:"vimeo_username";s:0:"";s:16:"youtube_username";s:0:"";s:15:"github_username";s:0:"";s:13:"strava_userid";s:0:"";s:19:"foursquare_username";s:0:"";s:19:"slideshare_username";s:0:"";s:21:"researchgate_username";s:0:"";s:19:"youversion_username";s:0:"";s:14:"steam_username";s:0:"";s:16:"steam_group_name";s:0:"";s:14:"skype_username";s:0:"";s:13:"show_rss_icon";b:0;s:13:"email_address";s:0:"";s:12:"use_excerpts";b:0;s:32:"show_featured_images_on_excerpts";b:0;s:9:"show_tags";b:0;s:15:"show_categories";b:0;s:19:"show_author_section";b:0;s:19:"entry_date_position";s:5:"below";s:27:"show_entry_date_on_excerpts";b:0;s:17:"show_page_headers";b:1;s:21:"link_post_title_arrow";b:0;s:15:"show_theme_info";b:1;s:13:"site_colophon";s:0:"";s:10:"custom_css";s:0:"";s:12:"accent_color";s:7:"#009BCD";s:22:"secondary_accent_color";s:7:"#007EA6";s:10:"text_color";s:7:"#444444";s:20:"secondary_text_color";s:7:"#808080";s:18:"accent_color_icons";b:0;}

And not only did the theme look right again, but I got the green light on my SSL:

The down side to this is I have to remember to change these settings any time I update the header image, but in this case since it’s the logo it’s not likely to change.

According to the theme’s author (Scott Smith), this is an artifact of the WordPress Core API.