Product Review: Design Palette Pro Plugin

Design Palette Pro-01Design Palette Pro for Genesis is a Premium WordPress Plugin that you can buy for use with StudioPress’ Genesis framework and some StudioPress Child themes.  This plugin really allows you a point and click interface to customize your own CSS without ever having to learn an once of code.  You can even do some advanced level modification of alignment, sizes, weights, colors, fonts and more.

Let’s talk about some of the benefits of using this product on your site and how you can customize.

The ability to control padding in CSS – Padding is one of those things in CSS that takes a certain amount of finess to get just right.  Its tough to code it by hand and  takes a while to get the hang of.  Using Design Palette Pro the effort to adjust padding is greatly reduced to shifting a slider and viewing it in the preview window.  This functionality is really well thought out and as you can see below you are always aware of the padding you are adjusting whether its on the top, bottom, left or right.

Design Palette Pro-02

The ability to control fonts – Fonts play a huge role in how your website is displayed, designed, read and constructed.  The team behind Design Palette Pro must know this because they added a lot of control over fonts from the header to the footer section and everything in between.  There are a number of fonts available in the plugin and the great thing is that you can control the font size, font weight, text appearance, text alignment and font style.

Design Palette Pro-03

Preview your site on various screen sizes – Being able to see how your website renders on various devices is almost standard these days with more and more of your audience moving to mobile devices.  As you can see you have the options of selecting how your site renders on a smartphone interface, a tablet sized interface as well as a normal screen sized interface.  Being able to see this in real-time as you are customizing your website could save you from some costly mistakes and hours or redevelopment.

Design Palette Pro-04

Freeform CSS – This is for the developers out there that are using this tool that still need more ability to customize the CSS elements on their site.  You can customize and preview CSS either on a global level which applies CSS changes and additions you make site-wide or for mobile, tablet, or desktop CSS which makes this a powerful feature for those of you developers out their looking to work a little extra CSS magic.

Design Palette Pro-05

There are many things that make this plugin a great tool if this is your first site or your 50th site this will greatly cut down on design and development time.  The cost is a little high but if you are looking for this functionality in a free plugin it will be hard to find let alone compare.  Design Palette Pro is a very useful, intuitive plugin that is well worth the money especially if you are looking to avoid coding and want to customize your site to the maximum amount.

How to Integrate the Genesis eNews Extended Plugin on Your WordPress site

Recently I was working on a WordPress site running on Genesis and a StudioPress child theme and I wanted to integrate a MailChimp email marketing list to the site.  At first glance it seems easy but there are a few tricks that I want to share to help you get it right the first time.  Now I’ve written about integrating and customizing MailChimp before but this tutorial will show you a different way with a different plugin and it is easier in the long run then custom coding a form and dropping it into your site.  The first thing you will need to do is to download the Genesis eNews Extended plugin for your website and install it.

STEP 1: Once you’ve done that you are going to go to Appearance | Widgets to add the Genesis – eNews Extended widget to your site similar to what you see below

eNews plugin-01STEP 2: Next, you are going to fill in the “Title”, “Text To Show Before Form” and “Text To Show After Form” fields with the wording you want to use on your form.  Now comes the trickier part, you are going to need to login into MailChimp and either create a new email marketing list (if you don’t already have one) or use the existing email marketing list.  Next, click on the “Signup forms” and select the “Embedded forms” option.

eNews Widget 03

STEP 3: Once you’ve done that look for the code version of the form and copy it to open in a word doc or text editor.

eNews Widget 04

STEP 4: You will be looking for a few attributes to add to your widget back in your WordPress site including the form action URL and the names of the fields you want to use on your form.

eNews Widget 05

 

STEP 5: What you will end up doing is adding an “http:” to the form action when you add it to the widget and the names of the fields you want the form to use similar to what I am showing you below…

eNews Plugin 02

Then the only thing left to do is to test it and save it and you should be ready to start receiving subscribers to your site.  The reason why I put together this tutorial is that there are a lot of partial resources out there but not one of them covers all the right points to get a working form using the Genesis eNews Extended Plugin so I hope you find it handy and useful.

How to Create More Featured Image Sizes for StudioPress Child Themes

Today I wanted to show you how to create more featured image sizes for your StudioPress child WordPress themes.  I am a big lover of what StudioPress is doing with their child WordPress themes and the Genesis framework so recently when I decided that I wanted a few different sizes of featured images on a design I am working on for a website redesign project for one of my other sites.

I went looking for an easy and straightforward way to add this into a child theme and found an easy way to achieve this.  For those of you who don’t know what featured images are or where to find them they are usually located on a standard post page and you can upload images and set them as the featured image.

Modifying the functions.php file

Now its time for the fun stuff.  We are going to modify the functions.php (also known as “Theme Functions” in StudioPress child themes) file in the child WordPress theme to show some different sizes of featured images.  In order to access this file you will need to click on the “Editor” link under the “Appearance” menu section in the backend of your WordPress site and from there you should see some menu options on the right hand side of the page similar to the screenshot below.

Now that we are in the functions.php file we need to modify some code to have different sizes of featured images.  In order to do that we need to locate the lines of code to modify in the functions.php file.

add_image_size('home-top', 400, 270, TRUE);
add_image_size(
'home-bottom', 215, 140, TRUE);

To add some custom sizes for featured images by adding the following.  Please keep in mind that you can change the values for sizing below to suit your needs but test it first to make sure it looks the way you want it to…

add_image_size('home-top', 400, 270, TRUE);
add_image_size(
'home-bottom', 215, 140, TRUE);
add_image_size(
'home-extra', 120, 100, TRUE);

By adding this extra line of code you can make use of additional sizes of featured images on your child themes for WordPress.  Have a look at the transition from how the code influences what you can see in the UI.  I’ve used the “Genesis Featured Grid” plugin for the purposes of this article.

As you can see when you code in the functions.php file you are going to see these additional choices in the front-end of the Widget user interface.  I used the “Genesis Featured Grid” plugin was developed by David Benedetti at Heavy Digital Creative which allows you to create a featured grid in the Genesis Framework for your website.

How to Create Hooks in WordPress

The problem with making changes in WordPress is that you need to make them to the core files.  What a pain in the butt, right?  Well let me tell you about the beauty of using hooks to customize your WordPress theme.  A hook in WordPress gives you a way to write over some of the core functionality of WordPress in order to edit a WordPress theme so that you can make changes but you don’t necessarily need to make them to the core files.

So what is a hook anyways?

These hooks can be written in the functions.php file in the wp-content/themes/yourtheme directory for those of you developers looking to code.  Normally what a hook does is it “hooks” a standard function to some custom functionality in order to “overwrite” the standard functionality without the need to modify code.  Pretty cool eh?  So what does a simple hook look like?  Have a look below at an example…

add_action ( ‘publish_post’,’superCoolFunction’)

As you can see the standard function of ‘publish-post‘ which means that when the ‘publish-post‘ is executed that is hooked to ‘superCoolFunction‘ this function is also executed.  So now that you know the basics of hooks in WordPress let’s talk about some ways that you can use them in your WordPress site using some plugins that have been created to help you implement hooks fast on your website.

A plugin that you can use on any WordPress theme to create hooks

One great plugin that is not theme or theme framework dependent is WP Hooks, a pretty basic and highly powerful way to add hooks into the header and footer areas of your WordPress site.  Have a look at it below in action or feel free to get more information by clicking here.

 

Hook Plugins for Themes and Theme Frameworks

It seems as though the guys behind some of the best themes and theme frameworks have put some thought into creating plugins that do more than just the basics that WP Hooks plugin that I mentioned above.  Here are some great plugins that you might want to consider when purchasing your next theme or theme framework.

Genesis Simple Hooks Plugin


 

The one great thing that this plugin offers is the ability to add a hook in just about anywhere you could possibly want to in a WordPress Theme.  However, this plugin is just for specific use with the Genesis Framework so if you are using this on your WordPress theme currently you’ll be able to use Genesis Framework for free.  Click here to get it!

Thesis OpenHook Plugin

Thesis is another WordPress theme that you can purchase.  This plugin was created so that you could have the functionality of creating hooks without the mess of coding them all by yourself.  Click here to get it!

Hybrid Hook Plugin

This plugin is designed for use with the Hybrid themes.  The Hybrid theme itself is a free WordPress theme with the option to use any number of child themes that have already been developed for it.  It’s definitely worth looking at if you want to use WordPress but don’t want to spend any money on a theme.  Click here to get it and get the Hybrid Hook plugin too!

K2 Hook up Plugin

This plugin can be used with the K2 WordPress theme which is also a free theme.  Much like the Hybrid theme, you can download this theme and use the K2 Hook Up plugin to create your own WordPress hooks.  Click here to get it!

Whether you decide to create your own custom hooks using the functions.php file in WordPress or use one of the plugins I’ve mentioned above, if you learn to master using WordPress hooks you’ll save yourself a lot of headaches and potential problems updating and making changes to your WordPress website.


How to Add an Author Box to Your Website

I’ve worked with StudioPress and their websites many times over the past few years.  Premium Themes are definitely beneficial to anyone building their own website who is technically inclined enough to deploy the software to their web server and get it up and running.

Today I wanted to talk about how you can add an author box to your WordPress website running a StudioPress theme or the Genesis Framework.  An author box is an area that you can add to your blog that tells people more information about the person who wrote the posting and it looks a little something like this…

In order to show this on your StudioPress website its really easy to do and it doesn’t require any coding whatsoever.  Navigate to Users >> Click “Edit” next to your user profile and scroll down to the bottom.  You’ll notice the following…

Enter your information into the “Biographical Info” and check the checkbox “Enable Author Box on this User’s Posts?” and you should be all set to go.  An author box on your website gives you the ability to show a brief bio of yourself to people that come to your website.