Adding Custom Fields

Topics covered in this WordPress tutorial:

Adding Custom Fields, Installing a WYSIWYG editor plugin

Exercise Preview

Exercise Overview

Sometimes you need more custom areas than just a main content field and title. What if you wanted a page to also have a bottom-right and left column that were editable and specific to that page? In this case, you would use Custom Fields.

1. We’ll be working on a different WordPress site, so let’s first set up a new database:

Installing WordPress

1. Navigate to Desktop > Class Files > WordPress.org Class.

2. Select the wordpress-4.1 folder.

3. Hit Cmd–C (Mac) or Ctrl–C (Windows).

4. Go to the htdocs folder:
   • Mac: Hard Drive > Applications > MAMP > htdocs
   • Windows: C: > xampp > htdocs

5. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the wordpress-4.1 folder.

6. Rename the new pasted folder landm

Creating a wp-config.php File

1. Open your favorite browser and go to:
   • Mac: localhost:8888/landm
   • Windows: localhost/landm

2. English (United States) should be selected, so click Continue.

3. Click the Let’s go! button at the bottom of the page.

4. Enter the following database information:

   Mac
   

   Database Name:	landm
   User Name:	root
   Password:	root
   Database Host:	localhost
   Table Prefix:	wp_

   Windows
   

   Database Name:	landm
   User Name:	root
   Password:	(leave blank for local install)
   Database Host:	localhost
   Table Prefix:	wp_

   NOTE: Remember that the username and password come from MAMP or XAMPP locally, or from the hosting account remotely.

5. Click Submit.

6. Click Run the install.

7. Fill out the fields as follows:

   Site Title:	L&M Classic Cars
   Username:	landmAdmin
   Password:	student
   Your E-mail:	Enter your email address (double-check before submitting the form).

8. Uncheck Allow search engines to index this site.

9. Click the Install WordPress button.

10. Click the Log In button.

11. For Username, enter: landmAdmin

12. For Password, enter: student

13. Click Log in. You’ll be taken to the Dashboard of L&M Classic Cars.

Creating the Theme Folder

We’ve already built most of the theme for you. This theme uses almost all of the same techniques you’ve learned in the rest of the book. First, let’s install the theme, then we’ll check out the template we are going to be using.

1. Navigate to the Desktop, then Class Files > WordPress.org Class.

2. Select the landmTheme folder.

3. Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy the folder.

4. Navigate to:
   • Mac: Hard Drive > Applications > MAMP > htdocs > landm >
     wp-content > themes
   • Windows: C: > xampp > htdocs > landm > wp-content > themes

5. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the landmTheme folder into the themes folder. This folder contains the static HTML mockup of the site design.

Activating the Theme

1. To use this theme, we need to activate it in the WordPress Dashboard. Switch back to the browser and go to:
   • Mac: localhost:8888/landm/wp-admin
   • Windows: localhost/landm/wp-admin

2. Log in if asked.

3. On the left side of the Dashboard, mouse over Appearance and click Themes.

4. You should see the L and M Classic Cars (Ready for Custom Fields) theme listed.

5. Click Activate underneath the theme.

6. At the top left, click the L&M Classic Cars title to see what we have so far.

7. On the left, click Sample Page. You’ll see a default page WordPress automatically made for us during installation. Notice that it just has one area for content (the main area). We will use another template that will have a main area for content, plus two more additional areas displayed beneath.

Checking Out Our Custom Template

Currently, the site has a few custom templates. The Default template has one editable area. We’ve made another template, Bottom Columns, that will eventually have two bottom columns of editable content.

1. Open your code editor.

2. For the next series of exercises, we’ll be working with the landmTheme folder. You may want to open that folder in your code editor if it allows you to (like Sublime Text does).

3. Open bottom-columns.php from the landmTheme folder located at:
   • Mac: Hard Drive > Applications > MAMP > htdocs > landm >
     wp-content > themes > landmTheme
   • Windows: C: > xampp > htdocs > landm > wp-content > themes > landmTheme

4. Notice that it currently has the standard WordPress Loop, as shown below:

   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <div class="intro">
         <?php the_content('<p>Continue reading…</p>');?>
      </div>
   <?php endwhile; ?>
   <?php else: ?>
      <div class="box">
         <p>
            <?php _e('Sorry, no posts matched your criteria.'); ?>
         </p>
      </div>
   <?php endif; ?>
   

   This just displays the_content() as we’ve seen earlier.

5. Notice that below the loop are two divs:

   <div class="rightColumn">
      <!-- right-column Content Here -->
   </div>
   <div class="leftColumn">
      <!-- left-column Content Here -->
   </div>
   

   This is where our custom fields will go. Each column will have some custom content. We’ll set this up later with the appropriate WordPress tags to display the content, but first let’s make some content for it to display.

Making a New Page

1. Log in to the Dashboard:
   • Mac: localhost:8888/landm/wp-admin
   • Windows: localhost/landm/wp-admin

2. Go to Pages > Add New.

3. Give it the title: Services & Restoration

4. Click the Add Media button to upload an image.

5. In the Upload Files tab, click the Select Files button.

6. Navigate to Desktop > Class Files > WordPress.org Class > landm Content > images and double–click highlight-wes-in-shop.jpg.

7. After the image appears on screen, next to Alt Text, type: Wes Monteith

8. Choose the following options for the image:

   Alignment:	Left
   Link To:	None
   Size:	Full Size

9. Click the Insert into page button.

10. Switch to your code editor.

11. For the next series of exercises, we’ll also be working with the landm Content folder located in Class Files > WordPress.org Class. You may want to open that folder in your code editor if it allows you to (like Sublime Text does).

12. We prepared the text for this page for you. Open services.txt from the Class Files > WordPress.org Class > landm Content folder.

13. Select all the code and copy it. Close the file. (To close the file but not the landm Content folder, hit Cmd–W (Mac) or Ctrl–W (Windows).)

14. Go back to the Dashboard.

15. Click the Text tab (we are inserting HTML).

16. Make a new line after the <img> tag.

17. Paste the content into the page.

18. On the right in the Page Attributes section, for Template, select Bottom Columns. This will set this page up to use the custom template, but this template isn’t yet set up to actually have any custom fields.

Adding Custom Fields

The Custom Fields option is already enabled, it’s just hidden.

1. At the top right of the Dashboard, click Screen Options.

2. Check on Custom Fields.

3. Click Screen Options again to hide it.

   At the bottom, you’ll see the Custom Fields section appear. We will add two new custom fields.

4. Where it says Add New Custom Field, enter the following:

   Name:	right-column
   Value:	this is some test content for the right column

5. Click Add Custom Field.

6. Add another one:

   Name:	left-column
   Value:	this is some test content for the left column

7. Click Add Custom Field.

8. At the top right, click Publish.

9. At the top, click View Page. You’ll see that the main content displays, but neither of our custom fields do. We need to add the WordPress tags to make it work.

Editing bottom-columns.php

1. Switch to your code editor.

2. Open bottom-columns.php from the landmTheme folder (if it isn’t open already).

3. Around line 22, find the rightColumn and leftColumn divs.

4. Add the following bold code:

   <div class="rightColumn">
      <!-- right-column Content Here -->
      <?php echo get_post_meta($post->ID, 'right-column', true) ?>
   </div>
   <div class="leftColumn">
      <!-- left-column Content Here -->
      <?php echo get_post_meta($post->ID, 'left-column', true) ?>
   </div>
   

   The get_post_meta() function takes the following three parameters:

   • The ID of the page or post that it should get the data from.
   • The name of the custom field to display.
   • Whether it should display a string or array. If set to true, it will display a string. We just want the raw HTML output from the field, so we want a string. If we had an array, we’d have to iterate through to display it, which can be powerful but is more complex.

5. These two divs should be inside the main loop. Select them both and cut them.

6. Right before the <?php endwhile; ?> tag, around line 14, paste so the code looks like the following:

   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <div class="intro">
         <?php the_content('<p>Continue reading…</p>');?>
      </div>
      <div class="rightColumn">
         <!-- right-column Content Here -->
         <?php echo get_post_meta($post->ID, 'right-column', true) ?>
      </div>
      <div class="leftColumn">
         <!-- left-column Content Here -->
         <?php echo get_post_meta($post->ID, 'left-column', true) ?>
      </div>
   <?php endwhile; ?>
   

7. Save the page.

8. Switch to the browser and reload the Services & Restoration page. You’ll see the two custom fields appear at the bottom.

Adding WYSIWYG Editors for the Custom Fields

While we can now add content, it isn’t very user-friendly to cut and paste HTML into the fields. Ideally, your clients should have WYSIWYG editors like other WordPress content. Luckily, there’s a plugin for that!

1. Go to the Dashboard.

2. On the left side, under the Plugins menu, select Add New.

3. In the search text field, type: advanced custom fields

4. Hit Return (Mac) or Enter (Windows).

5. The first plugin in the results should be Advanced Custom Fields by Elliot Condon.

6. Click Install Now near the plugin name (and click OK if the browser asks you).

7. After the plugin finishes downloading, click Activate Plugin.

   Now we need to set up the plugin to work with our bottom-columns.php template.

8. On the left side of the Dashboard, click Custom Fields.

9. Click Add New.

10. Give the custom field the title: Bottom Columns

11. Click the + Add Field button.

12. Enter the following:

    Field Label:	left-column
    Field Name:	left-column
    Field Type:	Wysiwyg Editor

13. Click the +Add Field button again to add the right column.

14. Enter the following:

    Field Label:	right-column
    Field Name:	right-column
    Field Type:	Wysiwyg Editor

15. Scroll down the page and under Location, set the rule to Page Template is equal to Bottom Columns.

16. At the top, click Publish.

17. On the left side of the Dashboard, click the Pages menu.

18. Click Services & Restoration.

19. Scroll down towards the bottom of the page. You’ll see the left-column and right-column fields as well as the Custom Fields module (it looks like there are four fields). It’s confusing to have both, so we should hide the Custom Fields module.

20. At the top right of the Dashboard, click Screen Options.

21. Uncheck Custom Fields.

22. Be sure Bottom Columns is checked ON.

23. Click Screen Options again to hide it.

Adding Some Content to the Custom Fields

1. Scroll to the bottom and notice that we have a left-column and right-column section with WYSIWYG editors. We can use these to edit and create content without touching HTML code. Let’s add some content.

2. In the left-column custom field, delete everything in the text area.

3. Under left-column, click the Add Media button to upload an image.

4. In the Upload Files tab, click the Select Files button.

5. Navigate to Desktop > Class Files > WordPress.org Class > landm Content > images and double–click highlight-red-cars.jpg.

6. After the image appears on screen, next to Alt Text, type: L&M Classic Cars

7. Choose the following options for the image:

   Alignment:	None
   Link To:	None
   Size:	Full Size

8. Click the Insert into post button.

9. We also still have the option to paste in HTML code. Let’s do so for our right-column. Switch to your code editor.

10. Open services-bottom.txt from the Class Files > WordPress.org Class > landm Content folder.

11. Select everything and copy it.

12. Hit Cmd–W (Mac) or Ctrl–W (Windows) to close the file but not the folder.

13. Go back to the Dashboard. In the right-column section, click the Toolbar Toggle button to show more options.

14. Click the Source code button to open up a modal where we can paste HTML.

15. Delete everything in the text area.

16. Paste in the content.

17. Click OK and you’ll see a nicely-formatted list:

    

18. At the top right, click Update.

19. Click View Page at the top and check it out! That’s some nicely-formatted content.

Bonus: Adding Another Page

1. In the Dashboard, go to Pages > Add New.

2. Give it the title: About & Contact

3. Click the Add Media button to upload an image.

4. In the Upload Files tab, click the Select Files button.

5. Navigate to Desktop > Class Files > WordPress.org Class > landm Content > images and double–click highlight-red-cars.jpg.

6. After the image appears on screen, next to Alt Text, type: Classic Cars

7. Choose the following options for the image:

   Alignment:	Left
   Link To:	None
   Size:	Full Size

8. Click the Insert into post button.

9. Switch to your code editor.

10. Open about.txt from the Class Files > WordPress.org Class > landm Content folder.

11. Select everything and copy it.

12. Hit Cmd–W (Mac) or Ctrl–W (Windows) to close the file but not the folder.

13. Go back to the Dashboard.

14. Click the Text tab if it’s not already selected (we are inserting HTML).

15. Make a new line after the <img> tag.

16. Paste the content into the page.

17. On the right, in the Page Attributes section, for Template, select Bottom Columns.

Bonus: Adding Content to Custom Fields

1. Switch to your code editor and open form-static.txt from the Class Files > WordPress.org Class > landm Content folder.

2. Select everything and copy it.

3. Hit Cmd–W (Mac) or Ctrl–W (Windows) to close the file but not the folder.

4. Go back to the Dashboard. In the left-column section, click the Toolbar Toggle button to show more options if they aren’t already showing.

5. Click the Source code button to open up a modal where we can paste HTML.

6. Paste in the content.

7. Click OK to see the text properly formatted.

8. Switch to your code editor and open contact.txt from the Class Files > WordPress.org Class > landm Content folder.

9. Select everything and copy it.

10. Hit Cmd–W (Mac) or Ctrl–W (Windows) to close the file but not the folder.

11. Go back to the Dashboard. In the right-column section, click the Toolbar Toggle button to show more options if they aren’t already showing.

12. Click the Source code button to open up a modal where we can paste HTML.

13. Paste in the content.

14. Click OK and you should see the text properly formatted.

15. At the top right, click Publish.

16. Click View Page at the top to check out the About & Contact page.