All custom field output methods used by Smart Custom Fields enthusiasts

In my work, I have to customize a WordPress site from scratch and do maintenance and re-customization for renewal, and “Smart Custom Fields (SCF)” has helped me a lot.

Of course, there are many other plug-ins for WordPress, but this time, I’d like to write about how to use a very useful plug-in called “Smart Custom Fields” as a reminder.

I hope it will be of use to web engineers around the world who are just starting out.

This time, I will skip the installation procedure of Smart Custom Fields.

I think that people who are familiar with WordPress to some extent have arrived at this page.

So, let’s begin.

Output text

<?php
$sample_text = scf::get('sample_text_fields’);
echo $sample_text;
?>

First, let’s output some text.

This is the base writing style.

Output text area

<?php 
$sample_text_area = scf::get('sample_text_area');
echo $sample_text_area;
?>

This will produce a tentative output, but line breaks are not reflected in this writing style.

To apply line breaks, write as follows

nl2br(); 

<?php 
$sample_text_area = scf::get('sample_text_area');
echo nl2br($sample_text_area);
?>

Outputs a boolean value

<?php 
$sample_authenticity = scf::get('sample_authenticity');
echo $sample_authenticity;
?>

When “no (false)” is selected, nothing is output.

The specific usage is as follows.

<?php
if($sample_authenticity){
	echo “If "yes (true)", this is output.”;
}else{
	echo “If "no (false)" is selected, this is the output.”;
}
?>

If you use “echo”, the code hints will not be applied because they are enclosed in ” “.

If you do not want to use “echo”, this is easier to use.

<?php if($sample_authenticity){ //If "Yes" is selected for the boolean value ?>
If "yes (true)", this is output.
<?php }else{ //If "No" is selected for the boolean value ?>
If "no (false)" is selected, this is the output.
<?php } ?>

Output checkboxes

Outputting a custom field for a checkbox is a bit more complicated.

As usual, try writing the following

<?php 
$sample_checkbox = scf::get('sample_checkbox');
echo $sample_checkbox;
?>

The output result will look like this.

Array

To output the contents of an array, use the “foreach” method to loop through the contents and output them.

<?php
$sample_checkbox = scf::get('sample_checkbox');
$n = 0; //Initialize array order
foreach($sample_checkbox as $fields ){ //Loop start
	echo $sample_checkbox[$n]; //Output the nth item in the array.
	$n++; //Substitute n plus 1 again for n
}
?>

This will output the “key” of the checkbox selected in the custom field.

The trouble here is that Smart Custom Fields cannot output “values”.

Smart Custom Fields cannot output “values” in checkbox fields, so if you really want to output values, you can use this plugin “Advanced Custom Fields”.

Advanced Custom Fields (ACF)

Output radio buttons

<?php
$sample_radio_buttons = scf::get('sample_radio_buttons');
echo $sample_radio_buttons;
?>

Now, when you actually output the data, to your surprise, the “key” set in the smart custom field is output.

Smart Custom Fields (SCF) doesn’t seem to give me “values” by any means, lol.

I would suggest using “Advanced Custom Fields” for radio buttons as well. 👍

Advanced Custom Fields (ACF)

Output select box

This again, following the checkboxes and radio buttons, is now ready for output.

<?php
$sample_selectbox = scf::get('sample_selectbox');
echo $sample_selectbox;
?>

If it came out as an “Array” or array, I could examine the contents like this…

<?php
var_dump($sample_selectbox);
?>

As with check boxes and radio buttons, “Advanced Custom Fields” would be a good choice.

Advanced Custom Fields (ACF)

Output file

<?php
$sample_file = scf::get('sample_file');
echo $sample_file;
echo wp_get_attachment_url($sample_file);
?>

If you write it this way, the ID of the file will be output by echoing the second line as it is.

This means that you can use php tags that use IDs.

As I will write later, you can use smart custom fields to output “images”.

This code is used for that purpose, but this is an image-only output method.

wp_get_attachment_image_src($sample_file);

You can use “wp_get_attachment_image_src” if you have uploaded and selected an image in the “File” custom field.

However, please note that if you are selecting PDF or word files, etc.

I haven’t tried it yet, so I can’t say for sure…

Output images

When an “image” is selected for a custom field, there are two ways to output the entire tag or the URL, although not limited to smart custom fields.

By the way, I use the one that outputs URLs every time because it is easier to customize in many ways.

Outputs the URL of the image

<?php
$sample_image = SCF::get('sample_image');
$sample_image_URL = wp_get_attachment_image_src($sample_image,'full')[0];
echo $sample_image_URL;
?>

At the end of the second line it says this.

[0]

If set to “0”, the URL is output.
Changing this value allows information other than the URL to be output.

[1]

When set to “1”, only the number of the width of the image is output.

[2]

With “2”, only the height number of the image will be output.

[3]

When I type “3”, it outputs bool(false), but I honestly don’t know what it is (lol).

If anyone knows, please let me know… m(_ _)m

Output image alt

Although the Smart Custom Fields can output some information about the image as described above, wp_get_attachment_image_src(); cannot output alt.

The information about the alt is not in the array…!

I have somehow found a way to output the data and would like to share it with you.

<?php
$sample_image_data = get_post(SCF::get('sample_image'));
$sample_image_alt = get_post_meta($sample_image_data->ID, '_wp_attachment_image_alt', true );
echo $sample_image_alt;
?>

This will output the alt of the image registered with Smart Custom Fields.(￣▽￣;)

The key point is the part where “get_post” is used to get information on uploaded images.

I guess “SCF:get” alone is limited in the information it can retrieve.

Anyway, I couldn’t easily find an article that can output alt, so if you are a web engineer having the same problem, please use it!

Outputs an entire <img> tag for an image

Similar to what I wrote above, but using “wp_get_attachment_image_src();” above and “wp_get_attachment_image();” here.

<?php
$sample_image = SCF::get('sample_image');
$sample_image_imgtag = wp_get_attachment_image($sample_image,'full');
echo $sample_image_imgtag;
?>

Output WYSIWYG (text editor)

WYSIWYG is a text editor.

WYSIWYG can also be output in a manner of speaking by writing as follows.

<?php
$sample_wysiwyg = SCF::get('sample_wysiwyg');
echo $sample_wysiwyg;
?>

However, line breaks are not reflected, so use nl2br();, which reflects line breaks, as shown below.

<?php
echo nl2br($sample_wysiwyg);
?>

Output color picker

<?php
$sample_colorpicker = SCF::get('sample_colorpicker');
echo $sample_colorpicker;
?>

Writing it this way will output a color with a “#” as in #a5a5a5.

In fact, our site TechStock ONLINE also uses a color picker custom field.

Look at the title of this article.

It will have a background color and text color.

The way it works is that a color picker is created in a smart custom field for each article, the background and text colors are selected, and the output looks like this.

<div class="article_titArea" style="background: <?php echo SCF::get('sample_colorpicker01'); ?>;">
<h1 style="color: <?php echo SCF::get('sample_colorpicker02'); ?>">TITLE</h1>
</div>

Output date picker

Date pickers can also be output by writing in this manner.

<?php
echo $sample_date_picker = SCF::get('sample_date_picker');
?>

However, you need to set the “date format” when you create the date picker field.

For example, like this.

yy/mm/dd（D）

If you select a date with this setting, the output will look like this.

2020/04/16（木曜）

(The output results are from Japan.)

The “曜” in this is disturbing – I often use it in the following way.

<?php
$sample_date_picker = SCF::get('sample_date_picker');
echo str_replace('曜','',$sample_date_picker );
?>

Output timed date picker [Preparing].

Please wait for a while.

Output related posts

Under “Related Posts,” you can select and output articles from default posts, fixed pages, custom posts, etc.

Check the field settings to make sure you do not forget this setting.

• post type
• Number of pieces that can be selected

Then select the relevant posts in the article.

In this case, we selected two posts by setting the “number of selections allowed” to 2.

Now, let’s look at the output.

<?php
echo $sample_related_posts = SCF::get('sample_related_posts');
?>

Let’s write it this way.

Then, the output will be

Array

Looks like the “related posts” field is output as an array!

So let’s go ahead and use var_dump(); to see what’s in the array!

<?php
$sample_related_posts = SCF::get('sample_related_posts');
var_dump($sample_related_posts);
?>

The output results are as follows.

array(2) { [0]=> string(2) "55" [1]=> string(2) "11" }

Your article ID has been output!

This can be used to retrieve and output information about the article with this ID.

For example, writing like this…

<?php
$sample_related_posts = SCF::get('sample_related_posts');
foreach( $sample_related_posts as $loop ){
	$post = get_post($loop);
	echo $title = get_the_title($loop);
}
wp_reset_postdata();
?>

You can output the title of the selected article.

If you know the ID of the article, you can probably get all the information, not only the title, but also the link and the term to which it belongs.

It is a very useful field and I still use it often!

Output related terms [Preparing].

Please wait for a while.

Plugin-independent custom field output method

There are several custom field plug-ins, each of which has its own output function, but you can output custom fields in a unified writing style.

For more details, please click here m(__)m

【コピペ可】非プラグイン依存！カスタムフィールド出力の統一した書き方