eFrog Digital Design

The WordPress Week That Was

George — Tue, 21 Feb 2012 09:00:58 +0000

Hello hello, tadpoles!

The world of WordPress is always buzzing and vibing with new and exciting news. Here’s a selection of the hottest topics that the frogs around this pond have been reading, in the week that’s passed.

At Long Last, A Unified WordPress Dashboard. For years, owners of multiple WordPress blogs have adored the flexibility of the platform but cursed the need to sign in and out for every one of their sites…
Simple Facebook Connect. Simple Facebook Connect is a framework and series of sub-systems that let you add any sort of Facebook functionality you like to a WordPress blog…
5 More Handy WordPress Features You Might Not Know About. Finding out handy little features within WordPress that were previously unknown to you is always a good thing. It is not unusual to regularly find out about new features that would have been of great help in the past…
Automattic releases new _s starter theme. The folks from Automattic just this week released the _s theme, pronounced “underscores”. It’s their team’s attempt at a better and more flexible starter theme…
Dominate Twitter With These 5 Useful WordPress Plugins. When it comes to driving traffic to your blog, Twitter is a force to be reckoned with. Even relatively modest Twitter accounts can produce a healthy level of traffic…
5 Tools Every Successful WordPress Blogger Should Be Using. From mommy bloggers to corporate accounts, it seems everyone is using blogging as a way to get their message out. WordPress, one of the most popular platform options for bloggers, can be especially effective if it’s used to its full potential.
Keeping SEO Simple – What You Need To Know About How Your Website Is Ranked. Today, you are going to learn how search engines assess web pages in order to determine where they should be placed in Search Engine Results Pages (SERPs)…

We’re thinking of making this a regular thing, so if you’d like that, leave a comment, or hit us up on Twitter! And, if you have a link you’d like to share with the team and the eFrog community, drop me an email at george@efrogthemes.com!

Till next time, be safe. Backup!
*waves*

Easily change the look of your site with a simple pattern

Jedi Frog — Thu, 16 Feb 2012 13:21:09 +0000

Ok, heres a little disclaimer: this is a simple post just to show you how to quickly and easily change the look of your site, even if you have little experience or knowhow with css or background images.

The wrong background used on the the wrong site will look very ugly. So firstly, here are a few tips:

Make sure that your site is suited to a background image

If your site already has a lot going on visually, then adding a background may make it compete with the actual content of the site, as well as make the site in general look more cluttered and confusing to the user. So its probably best to have a relatively minimal site to start.

If in doubt, be subtle

This leads on from the first point. The idea is to enhance the content, not to compete with it. So dont use anything thats extremely bold or distracting. Bring out your classy side.

Understand your colour palette

If your site’s colour palette consists of shades of blues and greens, adding a red background texture is probably unwise. It needs to blend in to the existing palette so that doesn’t draw too much attention or clash with other elements on the page. Taking a colour from the existing palette, then making it slightly lighter or muted would be a far better idea.

Getting started

Firstly, we need an image that will tile (i.e repeat seamlessly). If you’ve got some Photoshop skills, you can of course make the image yourself, or alternatively you can Google for some already-made ones.

Your site
I’ve decided to use our theme Mojo as an example. Using the white/blue colour option as a base, I decided to use a texture that was a more muted, lighter blue than the calls to attention, yet had enough colour to differentiate it from the themes’s grey/beige action boxes.

So here are three different versions with three subtle texture differences:

So it pretty much appears like a lighter colour overlay with a faint texture. Here are the three images in a zip if you want them.

Adding them to your site

Find your theme or website’s images folder. It should be called images or img. Move or copy your background image into that folder. Next, locate your style sheet – it’s usually called style.css. Open it up with a text editor. We want to edit the ‘body’ property. When you find it, we want to simply add in the line for the new background-image:

body {
background-image: url('images/name_of_your_image.png');
}

Remember, only add this in. Leave in any other existing properties. Save your file, load up your site, and it should have a new background!

Making a more useful & informative admin bar

Rockstar Frog — Tue, 14 Feb 2012 09:00:21 +0000

Love it or hate it, the WordPress Admin Bar is here to stay. With a bit of creative coding, you can change it from being a nuisance to a helpful tool. Today, we’re going to cover how to make your site’s admin bar more socially informative by adding some statistics on your social platforms.

Here’s what we’ll be coding:

In short, we’re going to request 3 bits of data to give us variables that hold our Twitter follower count, our Facebook Fans and our RSS Subscribers. With those 3 variables stored, we’ll then create faux menu items that display each count.

Firstly, we setup our function and hook it into the admin_bar_menu WordPress hook.

function social_toolbar($admin_bar){
// our code's going to go here
}
add_action('admin_bar_menu', 'social_toolbar', 100);

Now that we’re hooked into the admin bar, let’s start by saving the usernames / ID’s of the 3 accounts we’re going to use: (this goes within our social_toolbar() function)

$twitterUsername = "twitter";
$facebookPageID = "22934684677";
$feedburnerID = "TechCrunch";

Replace the username’s / ID’s in the above code to your own accounts.

Note: There’s a bit of a trick to retrieve the ID of a Facebook Fan page. It’s quite simple though, don’t worry. The above example is the ID of the fan page for The Big Bang Theory. The URL to that fan page is http://www.facebook.com/TheBigBangTheory. In order to find out the ID of that page, just replace “www” in the URL to “graph”, IE: http://graph.facebook.com/TheBigBangTheory. That information contains the ID of the fan page.

Now we’re going to setup a variable that will ensure this code is dynamic and won’t conflict with any other functions. This variable is used to create the new admin bar menu and submenu’s so we’re going to create a variable that is a lowercase, one-word version of your site’s name.

$theme = get_bloginfo('name');
$theme = str_replace(' ', '', $theme);
$theme = strtolower($theme);

You’ll notice this variable being used a bit later.

Now we’re going retrieve the counts for our Twitter Followers, Facebook Fans and RSS Subscribers.

// get your twitter followers count

$twitter = file_get_contents('http://twitter.com/users/show/'.$twitterUsername.'.xml'); // customize this with your own twitter username
$begin = ''; $end = '';
$page = $twitter;
$parts = explode($begin,$page);
$page = $parts[1];
$parts = explode($end,$page);
$twitterFollowers = $parts[0];

// get your facebook fan count

$xml = @simplexml_load_file("http://api.facebook.com/restserver.php?method=facebook.fql.query&query=SELECT%20fan_count%20FROM%20page%20WHERE%20page_id=".$facebookPageID."") or die ("a lot");
$facebookFans = $xml->page->fan_count;

// get your RSS subscriber count

$stringVal="";
$url="http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=";
$url= $url. $feedburnerID;
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
$data = curl_exec($ch);

curl_close($ch);
$xml = new SimpleXMLElement($data);
$feedcount = $xml->feed->entry['circulation'];

We’ve now got the 3 count variables stored in $twitterFollowers, $facebookFans and $feedcount.

Now we get to the actual admin bar menu items. Let’s create the top-level item that’ll house our dropdown.

$admin_bar->add_menu( array(
'id' => $theme.'-social',
'title' => 'Social',
'href' => '#'
));

* Note the usage of the $theme variable.

With our main menu item in place, we’ll now add the 3 sub items which echo out our 3 count variables we created.

$admin_bar->add_menu( array(
'id' => $theme.'-social-facebook',
'parent' => $theme.'-social',
'title' => 'Facebook ('.$facebookFans.')',
'href' => '#',
'meta' => array(
'class' => $theme.'-social-facebook'
),
));
$admin_bar->add_menu( array(
'id' => $theme.'-social-twitter',
'parent' => $theme.'-social',
'title' => 'Twitter ('.$twitterFollowers.')',
'href' => '#',
'meta' => array(
'class' => $theme.'-social-twitter'
),
));
$admin_bar->add_menu( array(
'id' => $theme.'-social-rss',
'parent' => $theme.'-social',
'title' => 'RSS ('.$feedcount.')',
'href' => '#',
'meta' => array(
'class' => $theme.'-social-rss'
),
));

Download the final file here and then require or include it from your functions.php file in order to get it working.

And that’s that. Your admin bar is now socially aware and will give you a quick overview of your follower status.

Do you have any other suggestions for cool follower counts that could be included here?

The Big Deal Reveal

George — Fri, 10 Feb 2012 12:33:41 +0000

Hello, tadpoles!

We recently received an email from Christian, a prospective eFrog Themes buyer, who asked if he could have a look at the backend of The Big Deal, before purchasing it. Smart man! and of course, the answer is yes. In fact, what we’ll do, is this blogpost, to show everyone around the backend.

Firstly, let’s just sketch a bit of background. The Big Deal is a Premium eFrog WordPress theme, that turns a standard WordPress install, into a full-featured group-buying website. And it has all the bells and whistles you’d expect, and need. More than just a WordPress theme, The Big Deal is a turn-key business in a box.

So, let’s kick the tires and peek under the hood a little, shall we?

The Big Deal installs in the same way as other eFrog themes, and once you’ve activated it, you’ll notice some extra options in the WordPress Dashboard Navigation pane, on the left. There’s the eFrog item, which has 2 sub-options for general eFrog theme settings, and an eCommerce option where you’ll configure payment gateways and such:

And then, there’s the Deals item. This is where you’ll add new deals, manage Cities and view your customer lists, and newsletters:

Let’s take a closer look at these extra options and business pages.
The eFrog page is a version of our well-known and well-loved options panel that comes with all eFrog themes, and has individual pages for General, Design, Social, SEO and Trackers.
(Click image for full page version):

The eCommerce page is more interesting from a business point of view. This is where you’ll choose your payment gateway (PayGate or PayPal), and enter the appropriate details for your account with the gateway. Both gateways allow for a “test” mode, and you’ll get those details from the gateway provider when you sign up as a merchant with them. Then below that, you’ll see an area where you can customise instructions to your customers, which appear during the purchase process. Notice the red notice block at the top of the page? A reminder that your payment gateway details are not complete or still in “test” mode.
(Click image for full page version):

OK, now let’s take a look at the Deals area.

First up, you’ll need a city to host a deal in, so that’s where we’ll start. Clicking on the Cities option brings up the Add New City area and a list of existing cities.
(Click image for full page version):

Next, the heart of the matter, DEALS! Here’s what the Add New Deal form looks like.
(Click image for full page version):

That’s a LOT of info to fill in! The fine details that give you control over the deal, like price and expiry and such, are down the right of the page. The text details are in the post body area and below (the fine print, supplier details etc). And of course, you add images to the slider by simply adding them to the Media Library from the post edit screen.

OK, let’s say we’ve done a deal, and it’s minimum requirement (in this example, 3 deals) has been met, and the timer has run down. There’ll be an alert up at the top of the dashboard that looks like this:

You can click the link in the alert directly, or you could get to an individual customer’s purchase logs, by navigating to Deals | Customer List, and then hovering over the customer account, to get the Edit | Purchase Logs | Shipping/Billing Details links, and then clicking Purchase Logs. In this image, we’ve selected the customer, and then clicked on the Log Number (3) to expand the specific log details.
(Click image for full page version):

Viewing the full-page version, you’ll see the drop-down which allows you to update the status of each purchase.

That wraps up this little peek into the back-end of The Big Deal. Hope it’s been useful!

Until next time, tadpoles…

How to schedule posts in WordPress

George — Wed, 08 Feb 2012 09:26:06 +0000

Last week’s SEO Plugin post was rather technical, so this week I wanted to write on a topic that is fairly straight-forward, and everyone will be able to do – scheduling a blog post.

First things first, let’s look at the steps to scheduling a blog post:

Log into your Dashboard.
Click through to Posts>Add New.
Type your post as you usually do, but don’t click Publish just yet.
On the right of your screen you will see, “Publish immediately Edit”.
Click the Edit button, this will reveal a date and time setup.
Type in the date and time when you want your posts to go live.
Click the OK button when you are ready.
Click the blue Schedule button (Publish is replaced by Schedule).

That’s it! Your blog-post will now publish at the date and time you choose, without any further instruction from you – How useful is that?

There are a number of reasons as to why someone would want to do this, here are a few to whet your appetite:

Write your post on the weekend and queue it for Monday morning so that it publishes when everyone’s back at work, and not sitting at the beach or sleeping.
Schedule a post for a time when you know people read your blog, to maximize views.
Queue your post to launch at a convenient time for a different time zone.
Instead of publishing two posts in quick succession, which effectively “hides” the first post, schedule the second one for a few hours later.
Schedule posts to ensure that the frequency between posts is even, this creates patterns, and subscribers like to know when things are happening.

What is your reason for scheduling posts?

I like your mask. A conversation about Occasions

Jedi Frog — Thu, 02 Feb 2012 11:40:26 +0000

Grab your copy of Occasions right here. Although the violet colour option is definitely the most popular among wrestlers, we also hear that the Teal scheme is a huge hit with sailors.

Creating a Twitter Count Widget

Rockstar Frog — Tue, 31 Jan 2012 09:00:43 +0000

When developing custom WordPress themes, having a knowledge of WordPress widgets is exceptionally handy. Developing custom widgets allows you to add niche bits of code to your site, whilst still leveraging the flexibility that WordPress widgets allow.

In this post, you’ll learn how to:

Create a custom widget
Add some meta fields to the widget
Create the front-end display for the widget

Using the principles behind this, you’ll be able to generate your own custom widgets in minutes.

Download a copy of a ready-to-use (empty) custom widget file here.
Download a copy of this ready-to-use Twitter Counter widget file here.

The Widget

Essentially the widget requires 4 functions in order to function. And these 4 functions are wrapped in a PHP Class that extends the WP_Widget class. The functions are

The Constructor
This is a basic function that we use to give our widget a custom name that appears on the widgets page in the admin.
Widget Settings / Meta Fields
If your widget allows for some meta fields for the user to save/update, then this is where those settings are stipulated. In the case of this Twitter Count widget, we’d have a setting where you’d enter the username, the count of which will be displayed in our widgets front end.
Widget Front End
This is where you’d place your HTML/PHP/CSS that the sites visitors will actually see on your site.
Widget Saving
Assuming that your user is entering some custom meta fields, these need to be saved. So this function handles the saving/updating of each of these fields.

So firstly, we create/register our widget:

add_action("widgets_init", create_function('', 'return register_widget("twitterCount_Widget");'));

Now we start with the first of our 4 functions, the constructor.

function twitterCount_Widget() {
parent::WP_Widget(false, $name = 'Twitter Count Widget');
}

You’ll note that the constructor function uses the same name that we used to register our widget. Once this is done, we now add the function to let the user save some meta fields to this widget:

Twitter Username

This function will now save the ‘twitter_username’ to this widgets instance. You’ll note that its using an “$instance” function to echo this value. In many cases, you’ll want to use a widget more than once – perhaps showing it in multiple sidebars. By specifying the $instance, we’re able to add as many instances of this widget as you like throughout the site.

Now that you’ve created your widget, you’re going to want to create some sort of front-end styling for how the widget looks.

In the case of this Twitter Counter widget, we’re going to use the username we saved to the widget – efrogthemes – and insert it into a code snippet I got from WP-Snippets which will get the follower count of the specified Twitter account.

# makes the arguments into normal variables example $args['before_widget'] is now $before_widget
extract( $args );

echo $before_widget;
echo "

"; // wrapping div to give this widget a custom class
echo $before_title . $instance['widget_title'] . $after_title; ?>

$twit = file_get_contents('http://twitter.com/users/show/'.$instance['twitter_username'].'.xml');
$begin = ''; $end = '';
$page = $twit;
$parts = explode($begin,$page);
$page = $parts[1];
$parts = explode($end,$page);
$tcount = $parts[0];
if($tcount == '') { $tcount = '0'; }
echo '<

'.$tcount.' followers.

';
?>

" . $after_widget;
} ?>

The last bit of code, is the function that saves the contents of our widget.

$instance = $old_instance;

$instance['twitter_username'] = strip_tags($new_instance['twitter_username']); // this line must be repeated for each meta value that you create for this widget

return $instance;
} ?>

At this stage, we have a working, albeit boring widget.

You can now style this as you wish. For the sake of this demo, I grabbed a simple image from Iconfinder and I’m going to use it as a background image on the div that is wrapping my follower count. I then added the style below to the ‘twitter_count_value’ div:

.twitter_count_value {padding: 3px 0 3px 80px;background: url(http://cdn1.iconfinder.com/data/icons/quartz/Twitter.png) 0 center no-repeat;}

And there we go.

You can download an empty, thoroughly commented custom widget file or the Twitter Counter widget we’ve created to use on your own site.

Did it work for you? Let us know where you’ve used it.

SEO Plugin: Search Engine Visit Alerts

Guru Frog — Thu, 26 Jan 2012 09:00:37 +0000

Hello Tadpoles,

I’ve got something more tangible for you this week, a plugin that I built. I should state upfront that I am not a developer, so please don’t judge me on my coding kung-fu. This post was inspired by an eFrog fan, James M, when he wrote a blog post about requiring a script of sorts to see when Search Engines were arriving at his website as well as by a client that wanted to know when his site was going to be indexed by Google.

First things first, let me tell you about the plugin. The idea is quite simple, the script determines the agent that is arriving at the website (could be a “human” or a search engine spider) and sends an email alert if it’s an engine, thus informing you that a spider is crawling your site and potentially indexing your content. Nifty eh? I think so.

My first move was to write a script that determines whether the agent is a bot (robot aka engine aka spider), in the case below I’ve simply used Google, Yahoo and MSN (Bing). There are hundreds of bots and you can see the complete list here and adapt as you see fit. The second move was to include some simple mailing code, which executes when the visiting agent is a bot and sends an email alert – hence the name, CrawlAlert.

Here is the PHP code to determine the agent and trigger the alert:

Because eFrog Digital Design builds WordPress themes, it made sense to turn the script into a WordPress plugin and release it for all of you tadpoles to try out, who knows what use you might find or how you might evolve it. In fact, we’d love you to evolve it and let us know!

The plugin code was fairly straight forward, I had to create a hook to enable a Dashboard menu item, which displays some plugin settings and then a further hook to tap into the wp_footer function to ensure that the alert function is executed each time someone visits the site.

You can download the plugin by clicking here, unpack it, upload it straight into the /wp-content/plugins/ folder and activate it as per usual.

To inspire you a little, here are a few things that came to mind:

Building in some session management to track the page/s the bot visiting and then include this information in the alert.
Evolving the session management to track the pages in a database and then visually represent the bots journey around your website.
Track the amount of time the bot is on your website.

Of course, most of the ideas that come to mind can be executed in Google Analytics, and with Analytics real-time engine it’s easier than ever, but I do imagine that there are uses and I will certainly be building on this plugin in the future.

Hope you enjoy it!

Five of the Best!

George — Tue, 24 Jan 2012 09:00:08 +0000

Hey there, tadpoles!

Around the eFrog pond, we take Community very, very seriously. We love showing off what you lovely folks get up to with our themes. We especially love it when you use them to showcase your passion, or your smarts… And, from reading and watching your websites, we KNOW there’s plenty of that going on! So, we thought it would nice to share a splash of the sites that you’ve created. In no specific order, five of the best! The preview images link out to the sites. Go. Browse around and see what they’ve done…

First up, Roxilla. Friend of the frog, and copywriting ninja, Rox has used her blog as her little space on the web, to say WHATEVER she likes. As she says, “a big melting pot of randomness”. She’s chosen the gorgeous Occasions theme, and we think the pink option looks awesome, Rox!

Next up, Pat Bromilow-Downing Photography. Pat is a seasoned professional photographer, who lives, and shoots, from the mother city, Cape Town. Pat’s been in the business of making fantastic images for many years, and the same exacting standards that have won him the respect of the photographic community, led him to choose our Parallax photography theme, to showcase his work. Respect, Pat!

And that brings us to HaydnWeb. Since we started speaking to him, Hayd has just impressed the dickens out of us. A Linux geek and final year Engineering student, Hayd uses his blog to share his experiences and projects. He uses, and contributed significantly to the QA process of, our no-muss-no-fuss Impress theme to showcase his work! Sidebar: George cannot TELL you how much he wants that Quadrotor UAV that Hayd is building. WANT!

Second to last (in sequence only), is the quaintly named, Waterdog Journal. Fishermen are renowned for the story-telling gift, and Ken has some doozies to tell! He’s chosen one of our most popular themes ever, Greyzed, and the grungy design works wonderfully for him! As we say in South Africa, Ken, “Stywe lyne!” (“Taut lines!”), and careful with the frogs, eh?

Finally, a friend from afar! Gutielua. Andrés hails from the South Americas, and his site’s description “El diario vivir entre perder Kg de masa y ganar Kb de información.” (“A life-journal about losing kilograms of weight, and gaining Kilobytes of information”), reveals his wonderful sense of humor. Andrés is using our clean and uncluttered Organic theme.

That’s all for now, tadpoles. We’ll do more of these in the future. It just feels nice to share the awesome, y’know?

Hasta luego! (That’s cool latino-frog speak for “Until later”…)
*famous froggy-foot-wave*

New dark colour option for our Enterprize theme!

Jedi Frog — Thu, 19 Jan 2012 09:00:21 +0000

click to view a larger preview

As a bonus, we’ve added this cool dark colour option for all your beauties that have already purchased our Enterprize theme.

Installation

If you don’t already have the theme, you’ll need to purchase it
If you’re lucky enough to already own the theme, then download these files
In that folder, you will find a styles.css file, as well as an images folder containing 4 images.
Make sure you make a copy of your existing Enterprize theme before you do anything else (in case you want to change back).
Copy the styles.css into your Enterprize theme folder. Overwrite the default styles.css that sits there.
Also copy the the 4 images into the theme’s images folder (overwrite if it asks you).
Load up your website and refresh the page.