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:
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:
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:
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:
A Multiline Textbox for the services:
And finally, an image field for the image/screenshot:
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.
<?php // ... <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 »</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> // ... ?>
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.