Translations of this page:

Basic Usage

After you installed Magic Fields (How to install Magic Fields) you are ready to start creating Write Panels.

The best way to learn how Magic Fields works is by example. In this example we will create a Write Panel to display a portfolio. The fields we need are:

  1. A field for the url
  2. A field for listing the services
  3. A field with the image of the site

To create a Write Panel click on Write Panels in the Magic Fields menu.

and click on + Create a Write Panel.

The page where you create your Write Panel will appear. Here we will give the panel a name and some options.

Possible Write Panel options are:

  • Placement: The type of Write Panel we want - a post or page type.
  • Name: Write the name of the Panel.
  • Categories or Assigned Theme: If you panel is set as 'post' type, you can select its default categories. In other words, when we create an element with this Write Panel, we will have selected those categories. If we selected page as the type, we can define what template will be used when a new page is created. Either the template or the categories can be altered when we create a new element.
  • Quantity: This field indicates whether the Write Panel can have many elements (multiple), or only one element (single).
  • Standard Fields: These options define whether the selected fields will be visible or not, during post/page composition. 'Post / Page' is the content area of the post, 'Categories' is the box in which post/page categories are specified, and 'Tags' represents the panel where page/post tags are assigned. If a field is selected, the respective field will be visible when creating or editing an element of the Write Panel. If you want to hide a certain area, ensure the relevant box is not ticked.
  • Advanced Fields: Similar to above, this option serves to hide elements during creation or editing in the Write Panel.
  • Order: This field denotes the order of Write Panels. If we have several Write Panels we can specify the 'weight' order in which you want to display them. A higher number will move the field further down.

Once the Write panel is created, a new page will be displayed where fields can be created (Custom Fields). To do this we have to click on ”+ Create a Field”, as denoted in the picture below.

On this page we can select the type of field we are going to add. This page may also have some additional options for the field.

The available options that are for the field(s) include:

  • Name: This must be unique. It is the name of the field that we will use in the template to retrieve the information.
  • Label: Is displayed next to the relevant field on the Write Panel.
  • Help text: This is displayed as a tool-tip help message. During editing, the message will appear if you hover the mouse pointer over the what's this? text. This field is optional.
  • Can be duplicated: This option determines if the field can be duplicated. For more information, see Dealing with Groups, duplicate groups and duplicate fields.
  • Order: Set the weight as to which order the fields will be displayed on the Write Panel.
  • Required: Determines the field entry is mandatory; this only works with Magic Fields version 1.3 and higher.
  • Type: Specifies what type of field we are going to use. Some fields have additional options. To learn more about each field please read the Custom Fields types article.

As previously mentioned in the Portfolio tutorial, we are going to need 3 fields in this Write Panel;

The first field is a Textbox for the URL:

  • name: url_cliente
  • label: URL del cliente

A Multiline Textbox for the services:

  • name: servicios_cliente
  • label: servicios del cliente

And finally, an image field for the image/screenshot:

  • name: imagen_cliente
  • label: Imagen del cliente

In the additional options for this field enter Max Height: 100, Max Width: 100 Custom: zc=1&q=100. This will set the image to be displayed with 100×100 (width and height) and zoomed-cropped.

Once the fields are created, they will appear in the list shown below. Clicking on the name of a field will allow us to edit the respective field's options.

In our menu, we will see that a new element with the name of our Write Panel has been added. We can click on this element, and click on New to create a new post/page, or click on Manage to see the elements created with this Write Panel, and be able to edit them.

Click on new to create a new element. The page will be like the regular new Wordpress post/page, however there is an additional box with the fields we specified earlier.

Continuing the tutorial example, we will enter the name of our client into the Title box, and some text about the client into the post content area. In the additional custom fields, we will enter the URL, services, and an image of the site.

Now we have the post with data in the custom fields. The next step is to show this custom information in the template. In this case we are going to display the information using the single template (single.php). In your preferred code editor, open the file single.php from your current theme.

The Magic Fields functions we are going to use are get and get_image. To see more about the front-end functions please read the Front end functions article. We are going to use the next code fragment to display the values of the fields. In this example, we used the single.php file from the default Wordpress theme.

// ...
    <div class="entry">
                <?php echo get_image('imagen_cliente'); /* this function is used to display the 100x100 image */ ?>
                <?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
                Services: <?php echo get('servicios_cliente'); /* display the information of the field services */?>
                Url: <a hre="<?php echo get('url_cliente'); /* display the client URL */ ?>"><?php the_title(); ?></a>
// ...

The result;

This example shows a basic usage for Magic Fields. In other sections of the Wiki, you can find other functions and documentation which will assist in more complex cases.

getting_started.txt · Last modified: 2011/07/02 00:36 (external edit)