Customizing the footer copyright information

I have made the below code:

/* LEFT text: Modify "© 2016 - Beans Framework test. All rights reserved." */
add_filter( 'beans_footer_credit_text_output', 'modify_left_copyright' );
function modify_left_copyright() {
  return 'Some copyright info here';
}

// RIGHT text: Modify "tm-beans theme for WordPress." 
add_filter( 'beans_footer_credit_right_text_output', 'modify_right_copyright' );
function modify_right_copyright() {
 return '<a href="#link">Some copyright info here</a> - right';
}

The code is so that I can add whatever text/html into the ' bracket section' .

1. How do I use the date year autoupdate code inside the above code? Do you have some examples for other ways to handle the footer copyright information code?

2. Can you also give an example on styling it either using UiKit or CSS/LESS?

Thank you.

Hey Paal,

You can use this for date and time auto update

<p>copyright © 2006 - <?php the_time('F j, Y'); ?> mysite.com</p>

And you can style it by adding your own markup Or custom attributes to it or do this

add_action( 'beans_footer_credit_right_text_output', 'hyperindian_right_copyright' );

function hyperindian_right_copyright() {

    // Add your copyright html text, Dynamic date and times etc something like .
    ?><div class='beans-footer-class'>beans is great</div><?php

}

then add styles to beans-footer-class using css.

I appologize if there is any mistakes because i'm writing this on my cellphone. and hoping that this gives you a clue and it was helpful for you.

Thank you Anupam! You gave me enough information to figure it out! (Atleast somewhat.)

I did it like this:

add_action( 'beans_footer_credit_right_text_output', 'hyperindian_right_copyright' );
function hyperindian_right_copyright() {
    // Add your copyright html text, Dynamic date and times etc something like .
    ?><p>copyright © <?php the_date('Y'); ?> mysite.com</p><?php
}

What is interesting here is that the output seen on the web page is defined by when the specific page/post was created. Posts/pages created in 2015 it says: copyright © 2015 mysite.com. Posts/pages made in 2016 it says: copyright © 2016 mysite.com.

Hey Paal

If you are facing that issue than use

<?php echo date('Y') ?>

and if you want to show the complete date than use this

<?php echo date('F j, Y') ?>

it'll show the complete date.

and i'm glad to hear that you have made it and i was helpful for you.

happy coding.

I appologize if there is any mistakes because i'm writing this on my cellphone.

Great that made it work correctly!

Here is the finished code that automatically updates to the current year.

add_action( 'beans_footer_credit_right_text_output', 'hyperindian_right_copyright' );
function hyperindian_right_copyright() {
    // Add your copyright html, text, Dynamic date and times etc.
    ?><p>copyright © <?php echo date('Y'); ?> mysite.com</p><?php
}

For additional information on adjusting date and time see: https://codex.wordpress.org/Function_Reference/the_time

(I added the information so others who see the thread also can learn how to do this correctly.)

@Paal - cheers, that is very much appreciated!

Hey paal,

Glad to see that you have done it.

Happy coding

Question: How do I remove the data-markup-id: beans_footer_credit_right? I tried adding a

beans_remove_attribute ('beans_footer_credit_right', 'class', 'uk-align-medium-right');

But the default "tm-beans theme for WordPress" showed up instead. I am only using the defaul left copyright area. As I have gathered the information into one area.

--

I am centering the copyright info area.

https://www.dropbox.com/home/PJ/WP-stuff?preview=Beans-bottom-copyright-area.png (Lets see if I got the linking of the screenshot correct.)

// COPYRIGHT area
add_action( 'beans_footer_credit_text_output', 'modify_left_copyright' );
function modify_left_copyright() {
    // Add your copyright html, text, Dynamic date and times etc.
    ?><p>© <?php echo date('Y'); ?><?php
    ?>
    Built by  <a href="http://www.easywebdesigntutorials.com" target="_blank" title="OSF theme for WordPress">Paal Joachim</a> using the <a href="http://www.getbeans.io/" title="Beans Framework for WordPress" target="_blank">Beans WordPress Framework</a>. </p>
    <?   
}

The CSS:

span.uk-align-medium-left.uk-margin-small-bottom {
  color: #fff;
  font-size: 11px;
  margin: 15px 0 0 0;
 padding: 0;
 width: 100%;
  text-align: center;
 clear: both;
}

span.uk-align-medium-left.uk-margin-small-bottom a {
 color: #fff;
  text-decoration: underline;
}

/* copyright and year aligns below footer menu. */
span.uk-align-medium-left.uk-margin-small-bottom {
  padding-left: 15px; 
}

/* Hides copyright section right - HOW DO I REMOVE IT??? */
span.uk-align-medium-right.uk-margin-bottom-remove {
  display: none;
}

Any tips/advice for the above code? As I think there are more efficient ways of doing this.

An alternative approach to my last code is to overwrite the footer copyright content like so: (This is based on kkthemes by https://github.com/kkthemes/kkthemes/blob/master/functions.php )

Inside the functions.php file:

/*----- COPYRIGHT INFO BOTTOM ----*/

// Overwrite the footer content.
beans_modify_action_callback( 'beans_footer_content', 'beans_child_footer_content' );

// COPYRIGHT area
function beans_child_footer_content() {
?>
<div class="tm-sub-footer uk-text-center uk-text-muted">
    <p>© <?php echo date('Y'); ?>
    Built by  <a href="http://www.easywebdesigntutorials.com" target="_blank" title="OSF theme for WordPress">Paal Joachim</a> using the <a href="http://www.getbeans.io/" title="Beans Framework for WordPress" target="_blank">Beans WordPress Framework</a>. </p>
    </div>
    <?php
}

Inside the style.css:

/*--- Copyright area -----*/

.tm-sub-footer {
 color: #fff;
  font-size: 14px;
  margin: 3px 0 0 0;
  padding: 0;
 width: 100%;
  text-align: center;
 clear: both;
}

.tm-sub-footer a {
 color: #fff;
  text-decoration: underline;
}

As I am go through multiple themes looking at how others have coded it I notice the following: Adding the above uk-text-center = centers the copyright information. Is similar to text-align center I added in the CSS. So there is no need to include both. Adding the above uk-text-muted = creates a default color for text and links which I have overwritten by adding color to the text and links in the CSS. Turn off the CSS and see what it looks like without it.

Hey Paal,

Modifying the entire footer content is an option as you correctly said in your last reply. If you only want to remove the right credit markup and output, you can do as follow:

beans_remove_markup( 'beans_footer_credit_right' );
beans_remove_output( 'beans_footer_credit_right_text' );

Happy coding,

I am thinking of including a login link to the backend. Is there any special tips for this? Should I just include it like I have done below? I added a dashicon dashboard icon.

/*----- COPYRIGHT INFO BOTTOM ----*/

// Overwrite the footer content.
beans_modify_action_callback( 'beans_footer_content', 'beans_child_footer_content' );

// COPYRIGHT area
function beans_child_footer_content() {
?>
<div class="tm-sub-footer uk-text-center">
    <p>© <?php echo date('Y'); ?>
    A Beans community project initially started by <a href="http://www.easywebdesigntutorials.com" target="_blank" title="A Beans WordPress Framework Demo"> Paal Joachim.</a> Made with the <a href="http://www.getbeans.io/" title="Beans Framework for WordPress" target="_blank">Beans WordPress Framework</a>. <a href="http://wpbeansframework.com/wp-admin" title="Backend"><span class="dashicons dashicons-dashboard"></span></a></p>
    </div>
    <?php
}

Hi Paarl,

I would advise to use site_url() for the site url href and admin_url() for the login. These are both WordPress Core functions and I would advise to get familiar with the documention for both, specifically their parameters which are useful.

Have fun,

Hey Thierry

Like so then:

A Beans community project initially started by

<a href="<?php echo site_url();?>" target="_blank" title="A Beans WordPress Framework Demo"> Paal Joachim.</a> Made with the <a href="http://www.getbeans.io/" title="Beans Framework for WordPress" target="_blank">Beans WordPress Framework</a>. Go to <a href="<?php echo admin_url();?>" title="Backend" /><span class="dashicons dashicons-dashboard"></span></a></p>

Thanks for putting me on the right track. The codex did not help as much as I hoped but I found some info at http://stackoverflow.com/questions/18095128/how-to-use-site-url-for-images-in-wordpress-with-php-coding that was very helpful.

Yes that is correct but make sure that you escape the url correctly when using it in your HTML (ie echo esc_url( site_url() );.

Have fun,

Thank you Thierry!

I went and updated also the left and right copyright text:

// Left text
add_filter( 'beans_footer_credit_text_output', 'modify_left_copyright' );
function modify_left_copyright() {
?> A WP Beans project started by <a href="<?php echo esc_url (site_url() );?>" target="_blank" title="A Beans WordPress Framework Demo"> Paal Joachim.</a> Made with the <a href="http://www.getbeans.io/" title="Beans Framework for WordPress" target="_blank">Beans WordPress Framework</a>.
<?php
}

// RIGHT text 
add_action( 'beans_footer_credit_right_text_output', 'modify_right_copyright' );
function modify_right_copyright() {
 // Add your copyright html, text, Dynamic date and times etc.
 ?><p>Copyright © <?php echo date('Y'); ?>  <a href="<?php echo admin_url();?>" title="Go to the WordPress Backend" />Login <span class="dashicons dashicons-dashboard"></span></a></p><?php
}

Version 2 of WPBeansframework is now up, and here is the tutorial: https://wpbeansframework.com/bottom-copyright-information/

Great, thanks for sharing that Paal!

One more thing I discovered. If I want to add a color to the full width background behind the copyright area. So that it covers the area. How would I go about doing so?

I uploaded a site I am working on to a domain I use for testing: http://fragmentsofawalk.com/

The information I am using is the following:

functions.php

// Overwrite the footer content.
beans_modify_action_callback( 'beans_footer_content', 'beans_child_footer_content' );

// COPYRIGHT area
function beans_child_footer_content() {
?>
<div class="tm-sub-footer uk-text-center">
    <p>© <?php echo date('Y'); ?>
    Bygget av  <a href="http://www.easywebdesigntutorials.com" target="_blank" title="OSF theme for WordPress"> Joachim</a> med <a href="http://www.getbeans.io/" title="Beans Framework for WordPress" target="_blank">Beans WordPress Framework</a>. </p>
    </div>
    <?php
}

CSS

/*--- Copyright area -----*/

.tm-sub-footer {
 color: #fff;
  font-size: 14px;
  margin: 3px 0 0 0;
  padding: 0;
 width: 100%;
  text-align: center;
 clear: both;  
  background: red;
}

.tm-sub-footer a {
 color: #fff;
  text-decoration: underline;
}

As you can see I have added a red background color to show the area that the red color covers. I want the "red" (It will be another color..:) to cover the full area. All the way to the left and right and to the bottom of the page.

Thanks.

I figured it out:

A tip for better controlling the CSS

Add a new class. When I added a background color to the css class .tm-sub-footer I noticed that it would not go full width as uk-container and uk-container center were controlling the layout.

To the functions.php file I added:

beans_add_attribute( 'beans_fixed_wrap[_footer]', 'class', 'copyright-footer-test' );

To the style.css file I added:

.copyright-footer-test { 
    margin: 0;
    padding: 0;
    max-width: 100%;
    background: rebeccapurple;
}

That did it. I am now able to style the full width area of the copyright section. Version 2 of WPBeansframework is now up, and here is the tutorial: https://wpbeansframework.com/bottom-copyright-information/

Hi dude, i have also find out one good example Dynamic Copyright Date WordPress