CSS Customizations of a Premium WordPress Theme

When you buy a website theme or template the most common issue is that you still want to customize it further.  Depending on which theme you buy can heavily depend of the amount of customization that you need to do.  A client of mine had some tweaks that they needed done recently on a theme that was purchased called Moderno developed by bavotasan.  Have a look at the original design below…

Original Theme

Normally when you have a website theme the CSS is all in one nice and neat place however that wasn’t the case with this theme and simple knowledge of CSS is not enough.  For this theme, I had to get into the PHP and is smartly coded to stop newbies and novices from really customizing this theme.  The first thing that I did was edit the CSS for the sidebar and image used for the shadow effect and flipped it over to the other side.  Have a look…

The next and final thing that needed editing for this styling was to have the top dark grey bar so that it would align with the post area on the left hand side and give the layout a cleaner look.  Check it out…

This was a fun and easy project that took a few hours of work to accomplish but the redesign of the visual layout of the page looks great too!

Creating and Displaying Custom Fields in WordPress

To extend greater functionality out of WordPress I wanted to show you how easy it is to add and code custom fields into posts or pages in WordPress. Custom fields are disabled by default in later versions of WordPress like 3.1 and greater so to enable them go to the post or page and look for the “Screen Options” button and select the “Custom Fields” checkbox as shown below.

Creating Custom Fields in WordPress

The next step is to add the custom field using a key and value. The meta-data is handled by key/value pairs in WordPress. To do this in WordPress all you need to do is enter a name (also known as a “Key”) and a value for the field similar to the screenshot below.

Displaying Custom Fields on your WordPress Theme

To successfully add custom fields to your WordPress theme we will need to do a couple of things first and make some additions in PHP code to display your custom field correctly.

  • Using the_meta() template tag
  • Working in the loop that is used to display posts in WordPress

In order to find the loop and make this change successful you need to first find the loop that controls what is displayed in the post so have a look in the index.php file’s code (you might also find this on the single.php file with certain themes)…

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

And the loop will end with the following condition…

<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

Now that we’ve found this let’s add the_meta() template tag to display the custom field on your WordPress theme’s post or page. As you can see in the screenshot below where you place the_meta() template tag dictates where it will show up on the front end of your WordPress theme…

So let’s look to see it on the front end in action…


Also here is what the source code looks like on the backend…


Now that you’ve seen it in action you should be good to create your own custom fields in WordPress and be able to display them on your WordPress theme with ease.

Removing the “Please Update Now” option from WordPress

With WordPress 3.2 out there are likely many people being prompted to upgrade automatically.  To see what I am talking about please have a look at the following screenshot…

Tempting isn’t it?  You might be asking where would the ability to hide the upgrade option be useful.  Well, if you develop and design websites using WordPress for clients what happens if they press this link and try to upgrade themselves?  Well I think you know where I am going here.  It gets messy trying to fix a mistake, repair a database and reverse it all.  Now lets talk about one possible solution that’s really easy to add to your WordPress website.  What you will need to do this is…

  1. Access to your WordPress website
  2. The ability to add a line of PHP code
  3. The following line of PHP…

//Remove the “Please Update Now” option from WordPress
add_filter( ‘pre_site_transient_update_core’, create_function( ‘$a’, “return null;” ) );

The next thing that you will need to do is navigate to your theme’s function.php file where you will add this code.  It will look similar to the following screen and you should be able to add this code almost anywhere in the function.php file…

What you will notice next is that the “Please Update Now” option for updating to the next version of WordPress is gone from the top of the page.  If you work with clients using WordPress this trick will help you control randomly updating WordPress.

How to Add Descriptions to Category Layouts in Shopp

In WordPress there are a number of plugins that you can use to turn your WordPress website into an ecommerce website.  Shopp, is a WordPress ecommerce plugin that allows you to do just that with WordPress.  Today I wanted to give you a tip about how to customize the category layout to show a description on the category or categories of your choice.  In order to do this you will need the Shopp plugin for WordPress (which is not a free plugin) to continue.  So let’s get started with looking at what we will need to customize the category layout to show category descriptions…

Since you’ve installed the Shopp plugin already the next step towards customizing the category layout is downloading the category.php file to your computer from /wp-content/themes/the theme you are currently using/shopp/category.php

Next you will need an editor like Dreamweaver, TextPad or whatever you use to edit code currently and open the category.phpfile.  When you open this file you’ll need to add the following tag in order to display the description…

<?php shopp(‘category’,'description’); ?>

See what it looks like in the code view here…

 

Finally save and upload the category.php file on your web server so that once you’ve added your description in the description field for the category.

 

Lastly, click the “Update” button you will be able to see the description when navigating on your website in the front-end.

 

I hope that you’ve enjoyed this article about using Shopp on your WordPress website and that it helps you to customize your website a little further so that you can use ecommerce technology on your WordPress website.

How to Customize the Shopp Checkout.php Template for WordPress

I really enjoy working with new web technologies and recently I’ve been working with the Shopp plug-in for WordPress.  The plug-in itself is a little quirky because there is no free or basic version of the plug-in however you do get what you pay for and in this case Shopp delivered on my expectations.

One thing that I am sure most people running an ecommerce website need is customization during the checkout process.  Shopp does allow for customization and styling the shopping cart which can be difficult depending on the shopping cart you use.  Today I am going to show you some PHP code that will allow you to add fields to your checkout page in Shopp.  If you have some custom fields that you need to add to your checkout page on your ecommerce website you can do so with the following tag.

<?php shopp(‘checkout’,'order-data’, ‘name=Comments&type=textarea’); ?>

What this tag allows for is two things.  One is that you can create a form field on the checkout page of a certain type (text, textarea, etc.) and two, you can collect this information on the receipt of the order and it will appear in the backend when you view the order under “Details”.

Another thing that you may want to tweak about the Checkout.php page in Shopp is where it says “Same Shipping address” checkbox.  By default this is always going to be checked however you may not want this option selected.  In order to do this you must edit the checkout.php file where the following tag is found…

<?php shopp(‘checkout’,'same-shipping-address’); ?>

And change it to…

<?php shopp(‘checkout’,'same-shipping-address’,'checked=off’); ?>

Adding “checked=off” variable means that the checkbox will be loaded when the web page loads as an unchecked checkbox and doing this in Shopp will show both the Billing and Shipping Address fields and it will look similar to this…

I hope that if you are using Shopp plug-in for WordPress that these tips saved you a little time.

Luc

How to Code your wp-config.php file in WordPress

Whether you are new to WordPress or you’ve been using it for many years like me then you know that when you install WordPress you’ve always got to work with the wp-config file.  Just like it sounds the wp-config file is a PHP file that tells WordPress where and how to configure WordPress with your mySQL database.

Now this can be daunting for many people considering creating a WordPress website that they host on their own servers under their own domain name (The other less invasive way is to go to www.Wordpress.com and create a wordpress website this way but you won’t have control over the domain name or hosting because WordPress.com hosts it all!) considering that you need to know what and how to code this PHP file in PHP and deploy it to your website.  Now, for those of you who are brave enough to learn a little PHP please keep reading.

When you get down to editing the wp-config file you will need to be able to provide information about the mySQL database including the database name, the user name, the database password and mySQL hostname also known as the “localhost” by some web hosting companies.  The next thing you will need to edit the “wp-config-sample.php” you’ll need to save it as “wp-config.php” for it to work correctly.  Below are some of the fields you will encounter in the wp-config.php file…

// ** MySQL settings – You can get this info from your web host ** //
/** The name of the database for WordPress */
define(‘DB_NAME’, ‘putyourdbnamehere’);

/** MySQL database username */
define(‘DB_USER’, ‘usernamehere’);

/** MySQL database password */
define(‘DB_PASSWORD’, ‘yourpasswordhere’);

/** MySQL hostname */
define(‘DB_HOST’, ‘localhost’);

In order to locate the values for these fields you’ll need to access your web hosting account and either create a mySQL database or access an existing mySQL database in order to get this information.  Once you have this information simply add it to your wp-config.php file, save it and upload it to your web hosting account and you’ll be good to complete the installation process of your hosted WordPress website.

 

Showing and Hiding Sidebar Content in WordPress Blogs

This is just a cool little trick that i thought I’d include for all you WordPress lovers out there.  When it comes to managing a website or blog today at some point you may want to show or hide certain content depending on the page your visitors are on or for some other reason (e.g. “someone purchasing ad space on your website”, etc.).  With WordPress it’s entirely possible to hide certain content on various pages and have that content only appear on specific pages.

So with that understanding, if you want to only show a particular piece of content on the homepage of your WordPress and NOT have this content appear on any other page you can use the following snippet of code…

<?php

if (is_home()) { ;?>

<a href=”">Your link here</a>

<?php } ?>

Another option to code content to only show in the front page of your WordPress website is to code using the following snippet of code…

<?php

if (is_front_page()) { ;?>

<a href=”">Your link here</a>

<?php } ?>

Lastly, if you have content that you only want to show on a certain page (for example the “About” page) then you can use this code snippet…

<?php

if (is_page(‘about’)) { ;?>

<a href=”">Your link here</a>

<?php } ?>

Note: keep in mind that the above mentioned code snippets are useable with the standard WordPress functionality.  You’ll need to test to see if they work with your customized WordPress theme to ensure that they work.

Now you can hide certain content on your WordPress website depending on what and where you want to hide it!

 

Using the PHP flush method in your website

For those of you looking for greater speed when it comes to website loading times all you need to do is “flush”. A good number of people who are running websites today use PHP to do so.

What you probably didn’t know is that you can use the flush method to clear the buffer when your web page loads because after all slower web page loading times mean fewer visitors and a higher bounce rate. It’s all about keeping those “fans in the stands” when you are developing websites for human consumption.

Using the flush() method

It’s a relatively simple piece of code to use…

  1. Simply locate the head section of your website (Usually noted by the and HTML tags)
  2. Place the following code after the end of the < head > HTML tag…
      ... <!-- css, js -->
    </head>
    <?php flush(); ?>

    <body>
      ... <!-- content goes here!-->
  1. Its Rock N’ Roll time! Now your web pages will flush every time during a page load

I hope that you found this useful for your website and speeding up the performance on your PHP website.