tmnt-tutorial/tmnt-tutorial.php at master · kstover/tmnt-tutorial · GitHub

1
2
3
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?php
/*
Plugin Name: TMNT: Who's Your Favourite Turtle?
Plugin URI: http://kstover.codes/tmnt-tutorial
Description: Select your favourite Ninja Turtle!
Version: 0.1
Author: Kevin Stover
License: GPLv2
*/

// Quick way to add an admin page.
function tmnt_tutorial_add_menu(){
	$page = add_menu_page( 'TMNT' , 'Pick a Character!', 'manage_options', 'tmnt-tutorial', 'tmnt_tutorial', 'dashicons-art' );
	add_action( 'admin_print_styles-' . $page, 'tmnt_tutorial_css_js' );
}

add_action( 'admin_menu', 'tmnt_tutorial_add_menu' );

/**
 * This is our main admin output function.
 * It includes an inline style section and requires a JS file.
 *
 * @since  1.0
 * @return void
 */
function tmnt_tutorial() {
	?>
	<style>
	.character-select {
		float: left;
		display: block;
		width: 200px;
	}
	.character-select::after {
	   clear: both;
	   content: "";
	   display: block;
	}
	.character-info {
	   float: left;
	   width: 400px;
	}
	.character-info::after {
	   clear: both;
	   content: "";
	   display: block;
	}
	.contact-card {
	   background: #fff;
	   border: 1px solid #ccc;
	   width: 400px;
	}
	.contact-card::after {
	   clear: both;
	   content: "";
	   display: block;
	}
	.contact-card .profile-pic {
	   float: left;
	   padding: 20px;
	   width: 100px;
	}
	.contact-card .profile-info {
	   float: left;
	   padding: 0 20px 20px;
	   width: 205px;
	}
	.contact-card h4 {
		margin-left: 85px;
	}
	</style>
	<div>
		<h1>Select A TMNT Character!</h1>
		<div class="character-select">
			<ul class="characters">
				<li>
					<label><input type="radio" class="character" name="character" value="leonardo"> Leonardo</label>
				</li>
				<li>
					<label><input type="radio" class="character" name="character" value="raphael"> Raphael</label>
				</li>
				<li>
					<label><input type="radio" class="character" name="character" value="michelangelo"> Michelangelo</label>
				</li>
				<li>
					<label><input type="radio" class="character" name="character" value="donatello"> Donatello</label>
				</li>
			</ul>
			<input type="button" class="button-secondary reset" value="Reset">
		</div>
		<div class="character-info">
			<div class="contact-card">
				<h4>Character Info Will Appear Here</h4>
				<!--
				<div class="profile-pic">
					<img class="img" src="http://placehold.it/100x100">
				</div>
				<div class="profile-info">
					<h2 class="name"></h2>
					<ul>
						<li><strong>Favourite Weapon:</strong> <span class="weapon"></span></li>
						<li><strong>Favourite Colour:</strong> <span class="colour"></span></li>
						<li><strong>Favourite Saying:</strong> <span class="saying"></span></li>
						<li><strong>Favourite Food:</strong> <span class="food"></span></li>
					</ul>
					<a href="#" class="delete">Delete</a>
				</div>
				-->
			</div>
		</div>
	</div>
	<?php
}

function tmnt_tutorial_css_js() {
	wp_enqueue_script( 'tmnt-tutorial', plugin_dir_url( __FILE__ ) .'admin.js' );
	wp_localize_script( 'tmnt-tutorial', 'tmnt', array( 'imgSrc' => plugin_dir_url( __FILE__ ) . 'images/' ) );
}