Tips, Tricks & Tutorials to using Headway Themes

Creating a Custom Copyright

What do you do when you or your client needs to customize the copyright on your website? If all you need is a text change, you can do this in the Visual Editor by editing a footer block. But what if you need something more complicated? Fortunately, the Custom Code Block will let us add enough php to create a custom copyright notice.

Why bother with a custom copyright notice?

Copyrights are a funny thing. A work is considered copyrighted when it is created and it exists for a fixed number of years after creation. So you want to make sure that the copyright date for a work is correct.

I recently had a client who was a photographer, and her site had works dating back to 2010. She has been adding new work to her site since 2010, and plans on continuing to do so in the future. From a legal standpoint, she wanted to make sure the copyright dates were correct on the site. So, I needed to create a custom copyright. We wanted a copyright notice that would look like this:

copyright © 2010 – 2013 Wise Photography

You could do this by hardcoding it into the Custom Copyright option in a Footer Block, but then you would need to update it every year to keep the notice up to date. The best way to do this is to let WordPress find the date and keep the copyright notice updated for you.

Adding a design credit and link

If you are a web designer, you might want to add your credits and a link to your website so that visitors who like your work can contact you. If your clients are agreeable, it can be a nice way to get some new business. The custom code block will also let us add this to the footer of the page.

The final results we’re looking to achieve is this:

copyright © 2010 – 2013 Wise Photography
Site designed and maintained by Pint Sized Sites - Websites for Small Business

Step 1 – Create the custom code block 

Since we’ll be manually creating the copyright, we won’t need a footer block. In Grid Mode, draw a Custom Code Block where you would normally draw a Footer Block.

Step 2 – Add the code to the custom code block

Right click on the block and select Block Options

In the content area, we’ll be pasting the php code that creates our custom copyright.

The final code we’ll be adding is this:

<?php
function pss_copyright() {
global $wpdb;
$copyright_dates = $wpdb->get_results("
SELECT
YEAR(min(post_date_gmt)) AS firstdate,
YEAR(max(post_date_gmt)) AS lastdate
FROM
$wpdb->posts
WHERE
post_status = 'publish'
");
$output = '';
if($copyright_dates) {
$copyright = "&copy; " . $copyright_dates[0]->firstdate;
if($copyright_dates[0]->firstdate != $copyright_dates[0]->lastdate) {
$copyright .= '&ndash;' . $copyright_dates[0]->lastdate;
}
$output = $copyright;
}
return $output;
}

echo '<div class="pssCopyright"><p>copyright ';
echo pss_copyright();
echo ' '; 
echo bloginfo('name');
echo '</p>
<p>Site designed and maintained by <a href="http://pintsizedsites.com">Pint Sized Sites - Websites for Small Business</a></p></div>';
?>

Credit goes to WP Beginner for the function. I’ve added the sitename and the text to the copyright notice and the credits information and fixed a couple of html characters in the original code. You can just add this and be done with it, but if you’d like to modify it, here’s what this code is actually doing.

How the custom copyright function works

First, we have the <?php opening tag. This designates everything that follows as php code.

Next, we create a function that I call pss_copyright. I always prepend my functions with the letters pss (for Pint Sized Sites), so that I don’t have a function that accidentally conflicts with any function in WordPress, Headway, or any plugins I have installed. This is a best practice you should be doing as well.

Now I’m going to go look at the data in the WordPress database

WordPress provides a global variable, $wpdb, which is an instantiation of the class already set up to talk to the WordPress database. Always use the global $wpdb variable.

You can read more about $wpdb on the WordPress Codex. This is a global variable that lets us read data from any table in the WordPress database. We’re going to use it to get the dates of all published posts.

We’re going to look at the posts table and sort out any posts whose status is not ‘publish’. In other words, we’re going to ignore anything in the drafts or trash. Of these, we’re going to find the minimum (earliest) post date, in gmt and call that firstdate. Then we’ll find the maximum (latest) post date, in gmt and call that lastdate.

SELECT
YEAR(min(post_date_gmt)) AS firstdate,
YEAR(max(post_date_gmt)) AS lastdate
FROM
$wpdb->posts
WHERE
post_status = 'publish'

But what if this is a new site? In that case, the copyright notice would look like “copyright © 2012 – 2012” which would look pretty ridiculous. So now the function compares the minimum and maximum dates. If they are the same, it only outputs the minimum date, firstdate. If they are not the same, it appends the dash and the maximum date, lastdate.

if($copyright_dates) {
$copyright = "&copy; " . $copyright_dates[0]->firstdate;
if($copyright_dates[0]->firstdate != $copyright_dates[0]->lastdate) {
$copyright .= '&ndash;' . $copyright_dates[0]->lastdate;
}
$output = $copyright;
}

Now, we need to echo this out onto the page with some of the plain text and the site name. I’d like this code to be reusable on other sites, so I’m letting WordPress get the sitename, rather than hardcoding it in.

I also want to wrap the output in a div class to make it easy to write any custom css, if I need it.

echo '<div><p>copyright ';
echo pss_copyright();
echo ' '; 
echo bloginfo('name');
echo '</p>

And finally, I’m adding my design credits and closing the php code with ?>. While the recommended practice for a theme’s functions.php file is to leave out the closing php tag, you should always close your php in a Custom Code Block.

<p>Site designed and maintained by <a href="http://pintsizedsites.com">Pint Sized Sites - Websites for Small Business</a></p></div>';
?>

Step 3 – Styling the results

We can do the majority of the styling in the Visual Editor Design Mode. If you have more than one custom code block, you will want to edit that particular instance of it. You can style the fonts of the paragraph text using the fonts options in the VE, but the hyperlink will inherit whatever your default hyperlink styling is. If your footer background is different than the rest of your site, you might want to have the hyperlink as a different color.

To style the hyperlink, in your LiveCSS editor, type the following, using whatever color you prefer, of course.

.pssCopyright a {color:#ff0000;}

Reusability & Design Efficiency

The other reason for creating this code is to make it nearly universal from one client site to another. I never have to hardcode the site name or the dates. WordPress takes care of all of that. It saves me time and that save the client money.

Please note: This tutorial is meant to be helpful. I make no warranties, express or implied, regarding the use of this code in your website. I also cannot and will not be able to help with any implementations or modifications.

tl;dr version: If you don’t understand how this works, it may break your site. If you need help with this, you can hire Pint Sized Sites to do this for you.

How to create widgetized footers

Widgetized footers are a place to put all of that information your visitors need and to have that information easily to edit using the Widgets tab in WordPress. A lot of blogs and websites have them. They are a great place to put your store location and hours on every page, or to include your… Continue Reading

Think outside the block

“How do I create a widgetized footer?” “How do I create a custom header?” These are fairly common questions and the solution is very simple: You do not have to use a Footer Block in the footer or a Header Block in the header. The block types are available for you, but Headway is flexible… Continue Reading

Related Posts Plugin for WordPress, Blogger...