All posts tagged “Fields”

How to Create WordPress Custom Fields Without Plugins

WordPress has made it easy for developers to customize WordPress in so many ways to meet their custom needs, including letting developers assign new meta-data within a post. That way developer can display additional outcomes within their themes or plugins on top of standard data like the post title, post content, and post author.

There are several methods to create custom meta, you can use a plugin or work on top of a framework, or you can do it from scratch. In this post, we’ll look into how to create custom meta from scratch (it isn’t as hard as you’d think) and use it to display a sponsored post message.

Adding a Custom Meta Data

First of all, go to the post editor. Usually you can find regular input fields like the title, the content, the category, and the tag box there. There are a few hidden fields as well, including a Custom Fields Editor, which we can use to add our custom meta.

To display it, click the Screen Options and tick the Custom Fields option.

The Custom Field box should now appear at the bottom of the post content editor. Now, we can add our custom meta-data.

A single meta-data is handled with key name/value pairs. Hence, as you can see below, the Custom Fields box consist of two input fields: name and value.

In this following example, I will specify a new meta-data for the post that I’m currently editing, with hello_world as the key and Hello World as the value.

Click the Add Custom Field to add them in the post. You can later update or delete this meta-data. Also, as you have entered a key name before, WordPress will store and list the name in a dropdown option, so that you can reuse the key without having to type it all over again.

Retrieving the Meta Data

Having the meta-data set, you can now display your theme single.php file, which is the file to display single post content. You can call out the value from hello_world key using the get_post_meta() function. like so.

 <?php $  meta = get_post_meta( get_the_ID(), 'hello_world' ); echo $  meta; ?> <?php the_content(); ?> 

But keep in mind that this meta-data won’t be available in all post, so we will have to run this function within a conditional statement; in other words, we should call this function only when the meta-data is set in the post, otherwise it will return an error.

 <?php $  meta = get_post_meta( get_the_ID(), 'hello_world' ); if( !empty($  meta) ) { echo $  meta[0]; } ?> 

Given the above code snippet, you should see the Hello World! of the key value displayed above the post content.

Show “Sponsored Post” Box

Now let’s use it in a real world example. Assuming we are going to publish a sponsored post, and we want to show a disclaimer in a box above the post content, we can do this by creating the meta-data named is_sponsored_post and then setting the value field to Yes, like so.

We will display the box when the value of is_sponsored_post is set to Yes through the conditional statement, just like in the previous example.

 <?php $  meta = get_post_meta( get_the_ID(), 'is_sponsored_post' ); if( $  meta[0] == 'Yes' ) { ?> <div class="sponsored-post"> <p>Disclosure: This is a sponsored post that contains affiliate links. End of post: I received compensation in exchange for writing this review.</p> </div> <?php } ?> 

And this is what it looks like when the message is displayed.





hongkiat.com

Responsive CSS3 Horizontal Application-Style Form Fields

Today we’d like to offer you a responsive CSS3 Form Fields tutorial. With it’s help you’ll be able to code a simple but really stylish form.
MonsterPost

Identity and Pattern Design for London Fields Soap Company by One Darnley Road

pattern designOne Darnley Road have created this identity and a selection of pattern design for London Fields Soap Companies beautifully minimalistic packaging. "Launching as an artisan brand in east London, this new company wanted an identity that complimented their handmade, organic and beautiful products. The brand’s ambition is to “bring back the bar”, with soaps that are good […]
Inspiration Hut – Everything Art and Design

How To Restyle Select Menus like Autosuggest Fields

Autosuggest is a really useful thing in every form. Let’s take a look at a tutorial that teach us how to restyle select menus.
MonsterPost

WordPress Custom Fields – A Simple Use


Custom Fields are one of those features inside WordPress that not everyone is fully aware of. While they’ve been around for awhile, they aren’t really screaming "use me" out of a standard install of WordPress. That said, they can really help you achieve some powerful and unique features in your projects.

Let’s explore one simple idea of how you can use WordPress custom fields to create an enhancement to the appearance of your site.

What You’ll Need

Before we start, make sure you install a copy of the Advanced Custom Fields plugin. While those of you that are proficient with PHP can certainly create their own custom fields (or even use the more basic implementation that comes with WordPress), Advanced Custom Fields makes things a bit easier. It adds a familiar WYSIWYG interface and will even export the PHP for you, under a separate Export entry in the plugin’s menu. If desired, you can then paste that code into your theme’s functions.php file. That isn’t completely necessary, however, as the custom fields you create will stay functional for as long as you keep the plugin active.

Let’s Create Some Fancy Page Titles

While there’s something to be said for simple text page titles, sometimes you might want something a little more interesting. For example, what if you wanted each page of your site to have its own page title background image, like this:

own page title background image

This has been designed to be a background image with a blue, semi-transparent box to hold the page’s title text. Here’s how to make it work:

Within Advanced Custom Fields

Within Advanced WordPress  Custom Fields settings

  1. Create a new custom field set and give it a name such as Page Header. Take note of the field name that Advanced Custom Fields creates – page_header in this case.
  2. Select Image as your Field Type.
  3. Set the Return Value to Image URL. This will make it easier to display the image we upload on the front end of the site.
  4. Set Rules in the Location box to Post Type is equal to Page. You may also set this to a specific page, post type or category if you wish (adjust your code accordingly).
  5. In the Options box, set the position of your field to High (after title). This will ensure the custom field will be placed just below the title of your page inside WordPress.
  6. Save your field.

Of course, there are a lot of other options and field types you could explore. Take a look at the Advanced Custom Fields documentation for more information.

Inside the WordPress Editor

  1. After you have created your custom field, visit the page you wish to edit in the WordPress Dashboard.
  2. You’ll notice that the custom field we created is now towards the top of your page, just under the title:
    You'll notice that the custom field we created is now towards the top of your page
  3. From there, click on the Add Image button to upload your custom image. This will be familiar to you as it’s exactly the same process as using the Add Media feature in your pages and posts.
  4. Once your image is uploaded, you’ll see a preview of it. Make sure to save your page.
  5. You can repeat these steps for each page on your site that you would like to use a custom page title image.

In Your WordPress Template

  1. Find the page template you wish to edit in your theme/child theme. Since I’m going to add this field to every page in the site, I’m using page.php.
  2. Add code similar to this in place of your current page title area (you may need to do some digging if using a pre-built theme):
<!--Custom Page Title, Grabs Image from Custom Field-->
<h1 class="custom-page-title" style="background-image:url(<?php the_field('page_header'); ?>); <span><?php the_title(); ?></span></h1>

In Your Theme’s Stylesheet

  1. Paste the below CSS into your theme’s stylesheet:
 .custom-page-title  {<br>
  font-size:34px;<br>
  line-height:40px;<br>
  font-weight:normal;<br>
  color:#FFF;<br>
  height:150px;<br>
  margin-top:10px;<br>
  -moz-border-radius-topright:  75px;<br>
  -webkit-border-top-right-radius:  75px;<br>
  border-top-right-radius: 75px;<br>
  -moz-border-radius-bottomright:  75px;<br>
  -webkit-border-bottom-right-radius:  75px;<br>
  border-bottom-right-radius: 75px;<br>
}

  h1.custom-page-title  span {<br>
  position:absolute;<br>
  background-image:url(images/page-title-background.png);<br>
  width:240px;<br>
  height:110px;<br>
  padding:20px;<br>
  }

Notice the use of <?php the_field('page_header'); ?> in the style attribute of the H1 tag. This allows the custom page title images we uploaded to our pages to be used as a background image. Then, we created a box using a semi-transparent .png file which will hold the title’s text.

Of course, you can style this in any number of ways. Depending upon how you want to implement this custom field, you may also use conditional statements to create a default page title (fallback) image or even hide the field on specific pages.

So Many Possibilities

As with Custom Post Types, Custom Fields can help add some cool features to your site, and even make it easier for your clients to update. Because there are so many different types of fields available to use, you can customize virtually any type of content you want.

Take some time and play around with Advanced Custom Fields and see what you can create!


The post WordPress Custom Fields – A Simple Use appeared first on Speckyboy Design Magazine.


Speckyboy Design Magazine

Printing with 400,000 volts reveals the beauty of electrical fields

Read more about Printing with 400,000 volts reveals the beauty of electrical fields at CreativeBloq.com


Click image to enlarge




Creative Bloq

London’s New Designers 2014: Part 1: Our favorites from the annual exhibition of emerging UK designers across all fields

London's New Designers 2014: Part 1


by Cajsa Lykke Carlson London’s annual New Designers exhibition gives the public a chance to interact with the designers of tomorrow, bringing together graduates from the UK’s leading universities to showcase their products and make industry contacts. Innovative and inspirational, the …

Continue Reading…


Cool Hunting

ION Hotel, Iceland: A place where luxury and design meet sustainability and adventure, all surrounded by lava fields and glacial lakes

ION Hotel, Iceland


Iceland is often dubbed “the land of fire and ice”—and not just because “Game of Thrones” chose the island nation as a frequent filming location. About the size of Kentucky, Iceland boasts some of the most starkly juxtaposed landscapes in the world. From…

Continue Reading…


Cool Hunting

How to Create WordPress Custom Fields The Easy Way

WordPress provides the essential fields that allow us to publish posts and pages. A few of these fields include the Content Editor, Category Options, Tags, and Featured Image.

These fields, however, are not sufficient to accommodate certain cases. Let’s say you build a Book Listing site that will show the book author, the ISBN number, and the publisher. You will need some extra fields to input the extra information.

Luckily, WordPress is now quite extensive, it gives developers the ability to create custom fields to cater to any website needs. These custom fields could be a general text input, a textarea, a dropdown option, a color picker, calendar, and even an image uploader. In this tutorial, we show you how to create WordPress custom fields the easy way. Let’s get started.

Advanced Custom Fields

To give you a real example, let’s try building a book listing site. To create our custom fields easily, we will use a plugin called Advanced Custom Fields by Elliot Condon. With it, we won’t need to touch the code too much for creating the custom fields. However, some code-level editing in the theme files is required to display the data that we have entered into the fields.

Once we have installed it, it adds a new side-menu called Custom Fields. Go to this menu, click on the Add New button, and name the Fields Group. For example, "Custom Settings" (see shot).

Click on the + Add Field to create a new custom field, and we name the field label as Author. Below it, set the Field Name simply as book_author, which we will use to call out or display the data of Book Author. You may also set Field Instruction, and the Placeholder Text, but those are optional.

Then, we can create a set of other fields as in Page Length, the Publisher, and Book Language like so.

Next, we need to assign the field group to display it in a particular Post Type. You can assign it with Post, Page, Page Template, Attachment, or set rules that involve several Post Types altogether. In the following example, I would like to display the fields to Book Post Type, which you can easily create on your own with this handy tool, GenerateWP.

Then we head over to our Book Post Type editing screen, and fill it up.

Displaying the Data

Before proceeding, since we assigned the fields to Custom Post Type, we need to create a new file to display the content called single-book.php (have a look at this page for reference). We will also put our codes in this file.

Once all our custom fields have been populated, we will display them in the front-end by using the_field() function followed by the field name. For example, this code below displays the data from the Author Book field that we’ve created above.

 the_field('book_author') 

It’s really that easy. Furthermore, if you want to make sure that it should only be displayed when the data is present, you can wrap the code with a conditional statement. For example:

 if( !empty(the_field('book_author')) ) : the_field('book_author'); endif; 

And below you will find all the codes that we put in single-book.php to display our book.

 <div class="entry-content"> <?php if ( has_post_thumbnail() ) { echo '<figure class="book-thumbnail">'; the_post_thumbnail('book-thumbnail'); } echo '</figure>'; ?> <div class="book-info"> <h3 class="book-title"><?php the_title() ?></h3> <p class="book-description"><?php the_content() ?></p> <h4 class="book-details-title">Book Details</h4> <div class="book-details"> <ul> <li class="book-author"><span class="label">Author:</span> <?php the_field('book_author') ;?></li> <li class="book-pub"><span class="label">Publisher:</span> <?php the_field('book_publisher') ;?></li> <li class="book-pages"><span class="label">Length:</span> <?php the_field('book_pages') ;?></li> <li class="book-lang"><span class="label">Language:</span> <?php the_field('book_language') ;?></li> <li class="book-pubid"><span class="label">ISBN/ASIN:</span> <?php the_field('book_isbn_asin') ;?></li> </ul> </div> </div> </div> 

With a little bit of styling with CSS, we can achieve the following neat and subtle result.

Final Thought

In this tutorial, we’ve shown you the very basic example of using Advanced Custom Fields plugin to create your own a set of new Text fields and assign them to a Custom Post Type easily.

Apart from that, this plugin provides a number of custom fields to enhance our website including WYSIWYG Editor, TextArea, Dropdown, User List Options, Google Maps, and many more. You can explore the plugin further and see what cool things you can come up with.


    




hongkiat.com

Best of CH 2013: Interviews: A look back at a few of our top interviews with creative minds on the cutting edge of their fields

Best of CH 2013: Interviews


With the year drawing to a close, it’s time to pop some bottles and reminisce about some of our favorite moments from 2013. We’re searching through the year’s content for the best of CH 2013—looking back at the people, designs, destinations and moments that we fondly remember. This year…

Continue Reading…


Cool Hunting