Wordpress

How to Create Review Boxes

If done right, review blogs are probably the most profitable. Like every blog, a review blog should have a solid design. One of the most important aspects of the design is review boxes, as it is the first thing that most users check before they read a review. This tutorial will demonstrate how you can make a great review box.

For this tutorial, I’ll make a review box of the movie “The Pursuit of Happyness”. The review box will contain the following information:

  • Name: The Pursuit of Happyness
  • Year: 2006
  • Director: Gabriele Muccino
  • Writer: Steve Conrad
  • Stars: Will Smith, Jaden Smith, Thandie Newton
  • Genre: Biography, Drama
  • Runtime: 117 minutes
  • Storyline: Based on a true story about a man named Christopher Gardner. Gardner has invested heavily in a device known as a “Bone Density scanner”. He feels like he has made these devices. However, they do not sell as they are marginally better than the current technology at a much higher price. As Gardner tries to figure out how to sell them, his wife leaves him, he loses his house, his bank account, and credit cards. Forced to live out in the streets with his son, Gardner is now desperate to find a steady job; he takes on a job as a stockbroker, but before he can receive pay, he needs to go through 6 months of training, and to sell his devices.
  • (An image will also be required.)

Preparing a custom meta box

The data will be held as custom field values, but it will be extremely laborious to add custom fields for every review. Therefore, I will create a custom meta box which will save the data as custom fields.

First of all, the add_meta_box() function will be used to create the meta box and build a callback function.

123

4

5

6

7

8

function buildtutorial_review_box_add_meta() {add_meta_box( ‘review-box’, ‘The Review Box’, ‘buildtutorial_review_box_meta’, ‘post’, ‘normal’, ‘high’ );}

add_action( ‘add_meta_boxes’, ‘buildtutorial_review_box_add_meta’ );

 

function buildtutorial_review_box_meta() {

// Hi there!

}

The callback function is used to create the input fields that will hold the data.

123

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<?phpfunction buildtutorial_review_box_meta($post) {global $post;

// get the custom field values (if they exist) as an array

$values = get_post_custom( $post->ID );

// extract the members of the $values array to their own variables (which you can see below, in the HTML code)

extract( $values, EXTR_SKIP );

wp_nonce_field( ‘review_box_meta_action’, ‘review_box_meta_nonce’ );

?>

<p>

<label for=”review_name”>Movie Name:</label>

<input type=”text” name=”_buildtutorial_review_name” id=”review_name” value=”<?php echo $_buildtutorial_review_name[0]; ?>” />

</p>

<p>

<label for=”review_year”>Year:</label>

<input type=”text” name=”_buildtutorial_review_year” id=”review_year” value=”<?php echo $_buildtutorial_review_year[0]; ?>” />

</p>

<p>

<label for=”review_director”>Director:</label>

<input type=”text” name=”_buildtutorial_review_director” id=”review_director” value=”<?php echo $_buildtutorial_review_director[0]; ?>” />

</p>

<p>

<label for=”review_writer”>Writer:</label>

<input type=”text” name=”_buildtutorial_review_writer” id=”review_writer” value=”<?php echo $_buildtutorial_review_writer[0]; ?>” />

</p>

<p>

<label for=”review_stars”>Stars:</label>

<input type=”text” name=”_buildtutorial_review_stars” id=”review_stars” value=”<?php echo $_buildtutorial_review_stars[0]; ?>” />

</p>

<p>

<label for=”review_genre”>Genre:</label>

<input type=”text” name=”_buildtutorial_review_genre” id=”review_genre” value=”<?php echo $_buildtutorial_review_genre[0]; ?>” />

</p>

<p>

<label for=”review_runtime”>Runtime:</label>

<input type=”text” name=”_buildtutorial_review_runtime” id=”review_runtime” value=”<?php echo $_buildtutorial_review_runtime[0]; ?>” />

</p>

<p>

<label for=”review_image”>Image:</label>

<input type=”text” name=”_buildtutorial_review_image” id=”review_image” value=”<?php echo $_buildtutorial_review_image[0]; ?>” />

</p>

<p>

<label for=”review_storyline”>Storyline:</label>

<textarea name=”_buildtutorial_review_storyline” id=”review_storyline” cols=”30″ rows=”10″><?php echo $_buildtutorial_review_storyline[0]; ?></textarea>

</p>

<?php

}

?>

After that, copy the following code to create a function that will save input values as custom fields and you will be done here.

123

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

function buildtutorial_review_box_save_meta( $post_id ) {if( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) return;if( !isset( $_POST[‘review_box_meta_nonce’] ) || !wp_verify_nonce( $_POST[‘review_box_meta_nonce’], ‘review_box_meta_action’ ) ) return;

if( !current_user_can( ‘edit_post’ ) ) return;

// create an array of our custom fields

$review_array = array(

‘_buildtutorial_review_name’,

‘_buildtutorial_review_year’,

‘_buildtutorial_review_director’,

‘_buildtutorial_review_writer’,

‘_buildtutorial_review_stars’,

‘_buildtutorial_review_genre’,

‘_buildtutorial_review_runtime’,

‘_buildtutorial_review_image’,

‘_buildtutorial_review_storyline’

);

// create the “default” values for the array

$review_array_defaults = array(

‘_buildtutorial_review_name’ => ‘None’,

‘_buildtutorial_review_year’ => ‘None’,

‘_buildtutorial_review_director’ => ‘None’,

‘_buildtutorial_review_writer’ => ‘None’,

‘_buildtutorial_review_stars’ => ‘None’,

‘_buildtutorial_review_genre’ => ‘None’,

‘_buildtutorial_review_runtime’ => ‘None’,

‘_buildtutorial_review_image’ => ‘None’,

‘_buildtutorial_review_storyline’ => ‘None’

);

// parse ’em!

$review_array = wp_parse_args($review_array, $review_array_defaults);

// HTML elements that are allowed inside the fields

$allowed_html = array(

‘a’ => array(

‘href’ => array(),

‘title’ => array()

),

’em’ => array(),

‘strong’ => array()

);

// update the post meta fields with input fields (if they’re set)

foreach($review_array as $item) {

if( isset( $_POST[$item] ) )

update_post_meta( $post_id, $item, wp_kses($_POST[$item], $allowed_html) );

}

}

add_action( ‘save_post’, ‘buildtutorial_review_box_save_meta’ );

Creating a function to fetch the review box

The aforementioned methods helped you set the information and now, you will learn how to get the information. You will first load the custom field values into an HTML code, like this:

123

4

5

6

7

8

9

10

11

12

13

<div><img src=”http://ourwebsite.com/uploads/the-pursuit-of-happyness.jpg” alt=”The Pursuit of Happyness (2006)” /><ul>

<li><strong>Name:</strong> The Pursuit of Happyness</li>

<li><strong>Year:</strong> 2006</li>

<li><strong>Director:</strong> Gabriele Muccino</li>

<li><strong>Writer:</strong> Steve Conrad</li>

<li><strong>Stars:</strong> Will Smith, Jaden Smith, Thandie Newton</li>

<li><strong>Genre:</strong> Biography, Drama</li>

<li><strong>Runtime:</strong> 117 minutes</li>

<li><strong>Storyline:</strong> Based on a true story about a man named Christopher Gardner. Gardner has invested heavily in a device known as a “Bone Density scanner”. He feels like he has made these devices. However, they do not sell as they are marginally better than the current technology at a much higher price. As Gardner tries to figure out how to sell them, his wife leaves him, he loses his house, his bank account, and credit cards. Forced to live out in the streets with his son, Gardner is now desperate to find a steady job; he takes on a job as a stockbroker, but before he can receive pay, he needs to go through 6 months of training, and to sell his devices.</li>

</ul>

</div>

And now, you can get the custom field values by using the following code:

123

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

function buildtutorial_review_box() {global $post;// get the custom field values as an array

$values = get_post_custom( $post->ID );

// extract the members of the $values array to their own variables (which you can see below, in the HTML code)

extract( $values, EXTR_SKIP );

// if there’s no image link in the “review_image” custom field, try to get the featured image

if($_buildtutorial_review_image == ”) {

if(has_post_thumbnail()) {

$get_buildtutorial_review_image = wp_get_attachment_image_src(get_post_thumbnail_id(), ‘full’);

$_buildtutorial_review_image = $get_buildtutorial_review_image[0];

} else {

$_buildtutorial_review_image = ‘http://placehold.it/150×200&text=No+Image’;

}

}

// escape the output, just in case

$allowed_html = array(

‘a’ => array(

‘href’ => array(),

‘title’ => array()

),

’em’ => array(),

‘strong’ => array()

);

$_buildtutorial_review_name_output = wp_kses($_buildtutorial_review_name[0], $allowed_html);

$_buildtutorial_review_year_output = wp_kses($_buildtutorial_review_year[0], $allowed_html);

$_buildtutorial_review_director_output = wp_kses($_buildtutorial_review_director[0], $allowed_html);

$_buildtutorial_review_writer_output = wp_kses($_buildtutorial_review_writer[0], $allowed_html);

$_buildtutorial_review_stars_output = wp_kses($_buildtutorial_review_stars[0], $allowed_html);

$_buildtutorial_review_genre_output = wp_kses($_buildtutorial_review_genre[0], $allowed_html);

$_buildtutorial_review_runtime_output = wp_kses($_buildtutorial_review_runtime[0], $allowed_html);

$_buildtutorial_review_storyline_output = wp_kses($_buildtutorial_review_storyline[0], $allowed_html);

$_buildtutorial_review_image_output = wp_kses($_buildtutorial_review_image[0], $allowed_html);

$output = ‘<div>

<img src=”‘.$_buildtutorial_review_image_output.'” alt=”‘.$_buildtutorial_review_name_output.’ (‘.$_buildtutorial_review_year_output.’)” />

<ul>

<li><strong>Name:</strong> ‘.$_buildtutorial_review_name_output.'</li>

<li><strong>Year:</strong> ‘.$_buildtutorial_review_year_output.'</li>

<li><strong>Director:</strong> ‘.$_buildtutorial_review_director_output.'</li>

<li><strong>Writer:</strong> ‘.$_buildtutorial_review_writer_output.'</li>

<li><strong>Stars:</strong> ‘.$_buildtutorial_review_stars_output.'</li>

<li><strong>Genre:</strong> ‘.$_buildtutorial_review_genre_output.'</li>

<li><strong>Runtime:</strong> ‘.$_buildtutorial_review_runtime_output.'</li>

<li><strong>Storyline:</strong> ‘.$_buildtutorial_review_storyline_output.'</li>

</ul>

</div>’;

return $output;

}

Now that your review box is created, you can style it any way you like. If you don’t want to experiment with styling, feel free to use mine:

123

4

5

6

.review-box {width:550px;border:1px solid #DDD;border-radius:5px;margin:10px;}.review-box-image {float:right;width:150px;border:10px solid #fff;border-width:0 0 10px 10px;margin:10px 10px 0 0;}.review-box-list {margin:10px;padding:0;list-style:none;}

.review-box-list li {margin-bottom:5px;padding-top:5px;border-top:1px solid #EEE;}

.review-box-list li:first-child {border-top:0;}

.review-box-list li strong {display:inline-block;width:75px;}

Creating a shortcode to show the review box

You know how to set and get the information. It’s time you learn how to show the information!

You can add the review box at the end or the beginning like this:

123

4

5

6

7

function buildtutorial_review_box_add($content) {$review_box = buildtutorial_review_box();// show the box at the end of the post:

return $content.$review_box;

// show the box at the beginning of the post:

// return $review_box.$content;

} add_action(‘the_content’,’buildtutorial_review_box_add’);

And you’re done! You can use the review box for different reviews like movies, TV shows, books, software and so on.

About the author

Tabish Shaikh

Website designer, website developer, blogger and a writer. These are the things I like, love and live for. Having years of experience in each field. Developing sites since childhood. Getting the most complicated things done is my specialty. Providing each and everything of top most quality to each and every client.

Leave a Comment


*