How to echo field name as CSS class in Advanced Custom Fields (ACF) ?

Advanced Custom Field (ACF) is a free WordPress plugin to create custom field meta box in WordPress without having to code anything. If you have used ACF, you know how easy it is to use and create custom meta boxes in WordPress.

If you want to echo an ACF field value then you use use following code:

<?php the_field(‘field_name’); ?>

If you want to get the value of an ACF field as a variable then use following code:

<?php $variable = get_field(‘field_name’); ?>

But, what if you want to get the name of the field:

In that case, you have to use the ACF function called: get_sub_field_object

To echo a field name as class in the theme use following code:

<?php
$fieldname = get_sub_field_object('col_left'); 
$value = $fieldname['_name']; ?>

where ‘col_left’ is your field name.

This will output:

<div class="<?php echo $value; ?>">Blablabla</div>

Hope that works for you.

How To Create And Customize A WordPress Child Theme

Why is a child theme important in WordPress?

You install WordPress, choose a good-looking theme for your site, install it but there is something that is missing from the theme. You want to make customization but can’t do it easily in the theme you installed because you know, your edits will be lost once you update the theme to a newer version.

That’s when Child themes comes in handy.

Child theme’s main purpose is to allow you to add your customization and edits in a way that won’t be lost if ever the parent theme that you use send in any new updates.

Child Themes are Update Proof

Whether using free WordPress themes from worpress.org repository or buying a premium theme from marketplace like Themeforest, most of these comes with some form of update mechanism. When there is a new update, you get a notification in your WordPress dashboard and with one click the files of your theme are replaced with new version.

In such a case if you have added customization into the core files of the theme then those files will be replaced by the new version that the theme author sends with update.

So, to not lose your hard work it’s always best to us a Child Theme to add your customization and edits.

How to create Child theme in WordPress

Creating child themes in WordPress very easy. You can either do it manually by creating a new theme folder in your themes folder or by Using Child Theme Wizard plugin.

Creating Child Themes Manually.

A child theme by default consist of two files from the parent theme.

  • style.css
  • functions.php

Create a new folder inside wp-content/themes folder and name it something unique like “sitename-child”. Make sure there are no spaces in the name or else it will throw an error while activating the theme.

Now create one new file inside that folder called “style.css” and Paste the following code at the top of the style.css file

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
Text Domain: twenty-fifteen-child
*/

This small piece of code is what will define your child theme and will let WordPress identity your child theme,

Now, Modify the code with details relevant to your theme.

  • Theme Name – Add something unique like “Site Name Child”. You can add spaces here
  • Theme URL: Add your sites url.
  • Description: Add a small description about the theme.
  • Author: Add Your Name
  • Author URL: You can add your URL here.
  • Template: This is the most important part. In the field you will have to write the exact folder name of your Parent Theme. If for an example, you are creating child theme of Twenty Fifteen then write “twentyfifteen”, If you are using some other theme then adjust accordingly.
  • Version: Start from 1.0.0 and update this line with every update you make to your theme.
  • Text Domain: Enter the folder name of your child theme. If your folder name is “site-name-child” then your Text domain will also be “site-name-child”

After this, create another file called “functions.php” andd paste following code into your functions.php file

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

The above example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all the Parent Theme dependencies.

If you child theme’s style.css also has custom css then you will have to enqueue that file as well.

Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. The complete (recommended) example becomes:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

where parent-style is the same $handle used in the parent theme when it registers its stylesheet. For example, if the parent theme is twentyfifteen, by looking in its functions.php for its wp_enqueue_style() call, you can see the tag it uses there is ‘twentyfifteen-style’. In your child code, replace the instance of ‘parent-style’ with ‘twentyfifteen-style’, like so:

$parent_style = 'twentyfifteen-style';

Failure to use the proper tag will result in a CSS file needlessly being loaded twice. This will usually not affect the site appearance, but it’s inefficient and extends your page’s loading time.
Now, your child theme is ready to be activated. Upload your child theme to your WordPress Dashboard and activate. You may have to re-save your Menu items, widgets and customizer options if you have added any new menu, widget or customizer panels.

Create Child Theme Using a Plugin

Go to your site’s Dashboard > Plugins >> Add New and search for the plugin called “Child Theme Wizard”. Install it and activate it.

The Child Theme Wizard lets you create a new child theme without the need for additional tools, right from within the WordPress admin interface.

Once activated, you can find it under Tools – Child Theme Wizard.

Specify a parent theme, customize options such as title and description and click Create Child Theme. Upon success, you will find your new theme under Appearance – Themes.

It’s generally a good idea and a recommended one to create a child theme if you want to customise your WordPress site. Modifying core theme files which you know will be replaced in future updates is a bad idea and that will waste a lot of your time and resources.

Build child themes and make your WordPress site free from future update problems.

How to make colored admin table by Post Status in WordPress ?

Sometime the default WordPress Admin panel can become a bit boring. If you want to jazz it up and want to show custom background color for each post status then following snippet of code can help. Just paste it in your theme’s functions.php and change the color accordingly

function whe_posts_status_color(){

?>

<style>
  .status-draft{background: #FCE3F2 !important;}
  .status-pending{background: #87C5D6 !important;}
  .status-publish{/* default color works best here */}
  .status-future{background: #C6EBF5 !important;}
  .status-private{background:#F2D46F;}
</style>

<?php
}

add_action('admin_footer','whe_posts_status_color');

How to Add Custom Body Classes in WordPress

The “body_class()”  in WordPress adds classes to the body tag of all the pages in your WordPress site. By default a WordPress theme should use the function “body_class()” in their theme files so that WordPress can automatically output correct classes to each page/post and archive.

The following example shows how to implement the body_class template tag into a theme.

<body <?php body_class(); ?>>

The actual HTML output might resemble something like this:

<body class="page page-id-2 page-parent page-template-default logged-in">

If you want to add your own custom class to the body then the easiest way is to add a add the custom class in this format:

<body <?php body_class( 'class-name' ); ?>>

which will output something like this:

<body class="page page-id-2 page-parent page-template-default logged-in class-name">

But the problem with this approach is that the custom class “class-name” will be add to each and every page and post of your site.

Now, In case you want to add the custom class only to specific pages/posts or archives then use following function and edit as per your requirement:

function wphe_body_classes( $classes ) {
	global $post;
	
	if ( is_singular( 'post' ) ) {  
		$classes[] = 'class-name';  // add custom class to all single posts
	}
	
	if ( is_singular( 'page' ) ) {  
		$classes[] = 'class-name';  // add custom class to all single pages
	}	
	
	if ( is_singular( 'customposttype' ) ) {  // change customposttype to your CPT slug
		$classes[] = 'class-name';  // add custom class to all single custom post types
	}		
	
	if ( is_home() ) {  
		$classes[] = 'class-name';  // add custom class to blog homepage
	}			
	
	if ( is_front_page() ) { 
		$classes[] = 'class-name';  // add custom class to blog static page frontpage
	}				
	
	if ( is_archive() ) { 
		$classes[] = 'class-name';  // add custom class to archive pages
	}					

	return $classes;
}
add_filter( 'body_class', 'wphe_body_classes' );

How to Fetch and Show Posts from a RSS Feed in WordPress

RSS (Rich Site Summary) is a format for delivering regularly changing web content. Many news-related sites, weblogs and other online publishers syndicate their content as an RSS Feed to whoever wants it.

If you would like to use RSS feed of some other site to show their latest posts into your site/blog then WordPress has a handy function which you can use to pull the posts from another site.

Following code helps you fetch posts from an external RSS feed to display on your site.

    <?php // Get RSS Feed(s) include_once( ABSPATH . WPINC . '/feed.php' ); // Get a SimplePie feed object from the specified feed source. $rss = fetch_feed( 'http://wphelpguide.com/feed/' ); // enter your rss feed url here $maxitems = 3; if ( ! is_wp_error( $rss ) ) : // Checks that the object is created correctly // Figure out how many total items there are, but limit it to 5. $maxitems = $rss->get_item_quantity( 3 ); 
    
        // Build an array of all the items, starting with element 0 (first element).
        $rss_items = $rss->get_items( 0, $maxitems );
    
    endif;
    ?>

In above code, you first include the WordPress Core file called feed.php which enables the use of fetch_feed function to be used in your file. Then you enter the feed URL in the next line and then define the number of posts you would like to fetch. I would suggest to enter number not more than 10 as fetching large number of posts can slow down your site. After that the function checks the fetched quantity and makes sure function has pulled required number of posts from the RSS feed.

After that posts following code to show the fetched RSS feed output

    

<ul>
        <?php if ( $maxitems == 0 ) : ?>
            

<li><?php _e( 'No items', 'my-text-domain' ); ?></li>


        <?php else : ?>
            <?php // Loop through each feed item and display each item as a hyperlink. ?>
            <?php foreach ( $rss_items as $item ) : ?>        
                

<li>
                    <a target="_blank" href="<?php echo esc_url( $item->get_permalink() ); ?>"
                        title="<?php printf( __( 'Posted %s', 'my-text-domain' ), $item->get_date('j F Y | g:i a') ); ?>">
                        <?php echo $item->get_content(); ?>


<div style="clear:both;"></div>


                        <?php echo esc_html( $item->get_title() ); ?>
                    </a>
                </li>


            <?php endforeach; ?>
        <?php endif; ?>
    </ul>


This code first checks whether or not the posts are pulled and if correct number of posts are pulled then it shows the output. You can customize the output as per your requirement and include and exclude the elements which you want to show.

By default WordPress caches the RSS feed output for 12 hours, which means even if the external site has updated their RSS Feed, WordPress won’t show newer posts until 12 hours have passed. To change that value you can use another filter called wp_feed_cache_transient_lifetime to customize the default time. Paste following code into your theme’s functions.php file and edit the seconds numbers as per your requirement.

function return_cache_time( $seconds ) {
// change the default feed cache recreation period to 2 hours
return (int) 600;  time is given in seconds.. default is 43200
}
 
//set feed cache duration
add_filter( 'wp_feed_cache_transient_lifetime', 'return_cache_time');

How to Add Unique Image Class in WordPress

If you want to dynamically add your own class to every image added from WordPress Editor then use following code. Add the code into your theme’s functions.php file and change the class according to your requirement.

function wphe_image_class_filter($classes) {
	return $classes . ' your_class_name_here'; //make sure to add a space in front of the class name
}
add_filter('get_image_tag_class', 'wphe_image_class_filter');