Bottom copyright information

What we will see below are various code examples one can use for the footer copyright section on the site. At the bottom I also have code for adding the copyright footer section to the Customizer.

A left and a right section.

/*----- Copyright information bottom left and right ----*/ 
// LEFT text 
add_filter( 'beans_footer_credit_text_output', 'modify_left_copyright' ); function modify_left_copyright() { 
?> <a href="<?php echo esc_url (site_url() );?>" target="_blank" title="">WPBeansFramework</a>  
Built by <a href="" title="Easy Web Design Tutorials" target="_blank">Paal Joachim. </a> 

// 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> © <?php echo date('Y'); ?> Built with <a href="" title="Beans Framework for WordPress" target="_blank"> Beans WordPress Framework.</a> 
- <a href="<?php echo admin_url();?>" title="Go to the WordPress Backend" /> Login  </a></p> 

tm-sub-footer is the Beans theme footer and uk-text-center is UiKit.

<?php echo date(‘Y’); ?> = Shows the existing year. Codex: the_date
<?php echo admin_url();?> =Shows the admin url. Codex admin_url
<?php echo site_url();?> = Shows the site url. Codex: site_url

When using site_url inside html then we need to also use escape:  echo esc_url( site_url() );.
As I have done in the above code.

Here is another alternative. Where I center all the text.

/*----- Copyright information bottom center ----*/ 
// 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 tutorial web site made by 
<a href="<?php echo esc_url( site_url() );?>"  target="_blank" title="A Beans WordPress tutorial web site"> Paal Joachim.</a> 
With the <a href="" title="Beans Framework for WordPress" target="_blank"> Beans WordPress Framework</a>. 
Go to <a href="<?php echo admin_url();?>" title="Go to the WordPress Backend" /> <span class="dashicons dashicons-dashboard"></span></a></p> 

The bottom code adds a Dashicon. Which means we also need to add the following code to be sure that we see the icon correctly.

//Enqueue the Dashicons script  add_action( 'wp_enqueue_scripts', 
'load_dashicons_front_end' );  function load_dashicons_front_end() {     wp_enqueue_style( 'dashicons' );  }

Find the class name for your theme for where the copyright information is located. Right click the existing copyright information in your browser and select Inspect. Then look at the bottom area showing the HTML and to the right the CSS. Move the cursor around in the html area so it is hovering over the copyright information. Then look at the CSS name.

I really got some nice help looking at:

Styling with CSS:
(check the default styling first and then adjust if needed.)

On hover a underline shows up. To remove the underline use the following code:

.uk-link:hover {  
  color: #035287;  
  text-decoration: none; 

Style the copyright text.

/*--- Copyright area -----*/ 
.tm-sub-footer {  
  color: #000;  
  font-size: 14px;  
  margin: 3px 0 0 0;  
  padding: 0;  width: 100%;  
  text-align: center;  
  clear: both;  

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

One can instead add the font-size directly to the .tm-footer CSS.

NB! To be able to adjust the font size of the copyright section one has to adjust/remove the CSS class .uk-text-small that is defining the size as 11px.

// Remove small uk-text-small attribute from footer credit.
beans_remove_attribute( 'beans_footer_credit', 'class', ' uk-text-small' );

To also remove the text muted grey color one and add it like so. Notice that uk-text-small and uk-text-muted are beside next to each other. Like can add it like this or create another remove attribute code like the above.

// Remove small uk-text-small AND uk-text-muted attribute from footer credit.
beans_remove_attribute( 'beans_footer_credit', 'class', ' uk-text-small uk-text-muted' );

The default link styling with UiKit when right clicking in your browser and selecting Inspect is:

a, .uk-link {  
  color: #3081B7;  
  text-decoration: none;  
  cursor: pointer;  

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; 
   /* Or remove the color and adjust the width of the tm-footer so    
   that covers the footer menu and copyright area. */ 

beans_fixed_wrap[_footer] is one of the many data-markup-ids in Beans. I right clicked the copyright section in the browser and noticed the data-markup-id located in the footer area. I then added beans_fixed_wrap[_footer] to the beans add attribute and added the css class of copyright-footer-test.

I have later changed the class name copyright-footer-test to instead calling it copyright-full-width. It is up to you what you call the class names.

Another alternative for the copyright footer text

// // Modify right footer text add_filter( 'beans_footer_credit_right_text_output', 'modify_right_copyright' ); function modify_right_copyright() { return '© ' . date('Y') . ' - | Hey! I built this theme with <a href="">Beans</a>'; }

NB! One can also add a CSS class to the copyright area:

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

Example CSS:

/* For styling the copyright area. */ 
.copyright-footer-full {  
  margin: 0; 
  padding: 0; 
  max-width: 100%; 
  background: red; 

Add a Footer Credit section to the Customizer

/* ---- Register footer credit ----- */ 
add_action( 'customize_register', 'bct_customizer_footer_credit' ); 
function bct_customizer_footer_credit() { 
  $fields = array( array( 
     'id' => 'footer-credit', 
     'label' => 'Footer Credit', 
     'type' => 'textarea', 
     'default' => '<a href="" rel="designer">Beans</a> child theme for WordPress' ) ); 

    $fields, 'footer', array( 
    'title' => __( 'Footer Credit', 'bcs' ), 
    'priority' => 110 /

/ Decide where you want this section located.  ) ); } 

/*  --- Render footer credit ---  */ beans_modify_action_callback( 'beans_footer_content', 'bct_render_footer_credit' ); 
function bct_render_footer_credit() { 
   beans_open_markup_e( 'beans_footer_credit', 'div', 
       array( 'class' => 'uk-clearfix uk-text-small uk-text-center uk-text-muted' ) ); 

echo get_theme_mod( 'footer-credit', '<a href="" rel="designer">Beans</a> child theme for WordPress' ); beans_close_markup_e( 'beans_footer_credit', 'div' ); }

Here is the code. I have added some minor modifications.

A tip!
To remove the small text UK CSS class from the credit area add the following to the functions.php file:

// Remove small uk-text-small attribute from footer credit. beans_remove_attribute( 'beans_footer_credit', 'class', ' uk-text-small' );

Another tip!

// Removes the space above the footer. 
beans_remove_attribute( 'beans_footer', 'class', ' uk-block' );

To bring the footer as close to the bottom as possible adjust the tm-footer height.


Filed under: Learning

No comment yet, add your voice below!

Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *