Кастомный шаблон страницы WordPress

Давайте создадим файл под названием contact-page-template.php в каталоге page-templates. И добавим в него следующий код

<?php
/*
Template Name: Contacts page
*/

get_header();
?>


<?php
get_footer();

<?php

Template Name: Contacts page

get_header();

<?php

get_footer();

Теперь скопируем в него содержимое файла contacts.html кроме шапки и подвала.
Вот что должно получится:

<?php
/*
Template Name: Contacts page
*/
 
get_header();
?>

<!-- Page Title
============================================= -->
<section id="page-title">

	<div class="container clearfix">
		<h1>Contact</h1>
		<span>Get in Touch with Us</span>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page">Contact</li>
		</ol>
	</div>

</section><!-- #page-title end -->

<!-- Content
============================================= -->
<section id="content">

	<div class="content-wrap">

		<div class="container clearfix">

			<!-- Contact Form
			============================================= -->
			<div class="col_full">

				<div class="fancy-title title-dotted-border">
					<h3>Send us an Email</h3>
				</div>

				<div class="form-widget">

					<div class="form-result"></div>

					<form class="nobottommargin" id="template-contactform" name="template-contactform" action="include/form.php" method="post">

						<div class="form-process"></div>

						<div class="col_one_third">
							<label for="template-contactform-name">Name <small>*</small></label>
							<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="sm-form-control required" />
						</div>

						<div class="col_one_third">
							<label for="template-contactform-email">Email <small>*</small></label>
							<input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" />
						</div>

						<div class="col_one_third col_last">
							<label for="template-contactform-phone">Phone</label>
							<input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control" />
						</div>

						<div class="clear"></div>

						<div class="col_two_third">
							<label for="template-contactform-subject">Subject <small>*</small></label>
							<input type="text" id="template-contactform-subject" name="subject" value="" class="required sm-form-control" />
						</div>

						<div class="col_one_third col_last">
							<label for="template-contactform-service">Services</label>
							<select id="template-contactform-service" name="template-contactform-service" class="sm-form-control">
								<option value="">-- Select One --</option>
								<option value="Wordpress">Wordpress</option>
								<option value="PHP / MySQL">PHP / MySQL</option>
								<option value="HTML5 / CSS3">HTML5 / CSS3</option>
								<option value="Graphic Design">Graphic Design</option>
							</select>
						</div>

						<div class="clear"></div>

						<div class="col_full">
							<label for="template-contactform-message">Message <small>*</small></label>
							<textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
						</div>

						<div class="col_full hidden">
							<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
						</div>

						<div class="col_full">
							<button name="submit" type="submit" id="submit-button" tabindex="5" value="Submit" class="button button-3d nomargin">Submit Comment</button>
						</div>

						<input type="hidden" name="prefix" value="template-contactform-">

					</form>
				</div>

			</div><!-- Contact Form End -->

			<div class="clear"></div>

			<!-- Contact Info
			============================================= -->
			<div class="row clear-bottommargin">

				<div class="col-lg-3 col-md-6 bottommargin clearfix">
					<div class="feature-box fbox-center fbox-bg fbox-plain">
						<div class="fbox-icon">
							<a href="#"><i class="icon-map-marker2"></i></a>
						</div>
						<h3>Our Headquarters<span class="subtitle">Melbourne, Australia</span></h3>
					</div>
				</div>

				<div class="col-lg-3 col-md-6 bottommargin clearfix">
					<div class="feature-box fbox-center fbox-bg fbox-plain">
						<div class="fbox-icon">
							<a href="#"><i class="icon-phone3"></i></a>
						</div>
						<h3>Speak to Us<span class="subtitle">(123) 456 7890</span></h3>
					</div>
				</div>

				<div class="col-lg-3 col-md-6 bottommargin clearfix">
					<div class="feature-box fbox-center fbox-bg fbox-plain">
						<div class="fbox-icon">
							<a href="#"><i class="icon-envelope2"></i></a>
						</div>
						<h3>e-mail<span class="subtitle">info@site.com</span></h3>
					</div>
				</div>

				<div class="col-lg-3 col-md-6 bottommargin clearfix">
					<div class="feature-box fbox-center fbox-bg fbox-plain">
						<div class="fbox-icon">
							<a href="#"><i class="icon-twitter2"></i></a>
						</div>
						<h3>Follow on Twitter<span class="subtitle">twitter.com</span></h3>
					</div>
				</div>

			</div><!-- Contact Info End -->

		</div>

	</div>

</section><!-- #content end -->

<?php
get_footer();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

<?php

Template Name: Contacts page

get_header();

<!-- Page Title

============================================= -->

<h1>Contact</h1>

<span>Get in Touch with Us</span>

<li class="breadcrumb-item active" aria-current="page">Contact</li>

</ol>

</div>

</section>

<!-- Content

============================================= -->

<!-- Contact Form

============================================= -->

<h3>Send us an Email</h3>

</div>

</div>

<label for="template-contactform-email">Email <small>*</small></label>

</div>

<label for="template-contactform-phone">Phone</label>

</div>

<label for="template-contactform-subject">Subject <small>*</small></label>

</div>

<label for="template-contactform-service">Services</label>

<option value="">-- Select One --</option>

<option value="Wordpress">Wordpress</option>

<option value="PHP / MySQL">PHP / MySQL</option>

<option value="Graphic Design">Graphic Design</option>

</select>

</div>

<label for="template-contactform-message">Message <small>*</small></label>

</div>

</div>

<button name="submit" type="submit" id="submit-button" tabindex="5" value="Submit" class="button button-3d nomargin">Submit Comment</button>

</div>

</form>

</div>

</div>

<!-- Contact Info

============================================= -->

</div>

<h3>Our Headquarters<span class="subtitle">Melbourne, Australia</span></h3>

</div>

</div>

<h3>Speak to Us<span class="subtitle">(123) 456 7890</span></h3>

</div>

</div>

</div>

</div>

<h3>Follow on Twitter<span class="subtitle">twitter.com</span></h3>

</div>

</div>

</div>

</section>

<?php

get_footer();

Контактной формой и хлебными крошками займемся чуть позже. А вот вывод контактной информации сделаем сейчас. Для этого создадим функцию sp_get_page_contacts и добавим ее в файл sp-framework/core/functions.php

function sp_get_page_contacts($result=null){

	$address 	= get_theme_mod('sp_contact_address');
	$phone 		= get_theme_mod('sp_contact_phone');
	$email 		= get_theme_mod('sp_contact_email');
	$twitter 	= get_theme_mod('sp_contact_twitter');

	if($address){
		$result .= '<div class="col-lg-3 col-md-6 bottommargin clearfix">';
			$result .= '<div class="feature-box fbox-center fbox-bg fbox-plain">';
				$result .= '<div class="fbox-icon">';
					$result .= '<a href="#"><i class="icon-map-marker2"></i></a>';
				$result .= '</div>';
				$result .= '<h3>Our Headquarters<span class="subtitle">'.$address.'</span></h3>';
			$result .= '</div>';
		$result .= '</div>';
	}	

	if($phone){
		$result .= '<div class="col-lg-3 col-md-6 bottommargin clearfix">';
			$result .= '<div class="feature-box fbox-center fbox-bg fbox-plain">';
				$result .= '<div class="fbox-icon">';
					$result .= '<a href="tel:'.$phone.'"><i class="icon-phone3"></i></a>';
				$result .= '</div>';
				$result .= '<h3>Speak to Us<span class="subtitle">'.$phone.'</span></h3>';
			$result .= '</div>';
		$result .= '</div>';
	}	

	if($email){
		$result .= '<div class="col-lg-3 col-md-6 bottommargin clearfix">';
			$result .= '<div class="feature-box fbox-center fbox-bg fbox-plain">';
				$result .= '<div class="fbox-icon">';
					$result .= '<a href="mailto:'.$email.'"><i class="icon-envelope2"></i></a>';
				$result .= '</div>';
				$result .= '<h3>e-mail<span class="subtitle">'.$email.'</span></h3>';
			$result .= '</div>';
		$result .= '</div>';
	}	

	if($twitter){
		$result .= '<div class="col-lg-3 col-md-6 bottommargin clearfix">';
			$result .= '<div class="feature-box fbox-center fbox-bg fbox-plain">';
				$result .= '<div class="fbox-icon">';
					$result .= '<a href="'.$twitter.'"><i class="icon-twitter2"></i></a>';
				$result .= '</div>';
				$result .= '<h3>Follow on Twitter<span class="subtitle">twitter.com</span></h3>';
			$result .= '</div>';
		$result .= '</div>';
	}	

	return $result;
}

function sp_get_page_contacts($result=null){

$address = get_theme_mod('sp_contact_address');

$phone = get_theme_mod('sp_contact_phone');

$email = get_theme_mod('sp_contact_email');

$twitter = get_theme_mod('sp_contact_twitter');

if($address){

$result .= '<div class="col-lg-3 col-md-6 bottommargin clearfix">';

$result .= '<div class="feature-box fbox-center fbox-bg fbox-plain">';

$result .= '<div class="fbox-icon">';

$result .= '<a href="#"><i class="icon-map-marker2"></i></a>';

$result .= '</div>';

$result .= '<h3>Our Headquarters<span class="subtitle">'.$address.'</span></h3>';

$result .= '</div>';

}

if($phone){

$result .= '<div class="col-lg-3 col-md-6 bottommargin clearfix">';

$result .= '<div class="feature-box fbox-center fbox-bg fbox-plain">';

$result .= '<div class="fbox-icon">';

$result .= '<a href="tel:'.$phone.'"><i class="icon-phone3"></i></a>';

$result .= '</div>';

$result .= '<h3>Speak to Us<span class="subtitle">'.$phone.'</span></h3>';

$result .= '</div>';

}

if($email){

$result .= '<div class="col-lg-3 col-md-6 bottommargin clearfix">';

$result .= '<div class="feature-box fbox-center fbox-bg fbox-plain">';

$result .= '<div class="fbox-icon">';

$result .= '<a href="mailto:'.$email.'"><i class="icon-envelope2"></i></a>';

$result .= '</div>';

$result .= '<h3>e-mail<span class="subtitle">'.$email.'</span></h3>';

$result .= '</div>';

}

if($twitter){

$result .= '<div class="col-lg-3 col-md-6 bottommargin clearfix">';

$result .= '<div class="feature-box fbox-center fbox-bg fbox-plain">';

$result .= '<div class="fbox-icon">';

$result .= '<a href="'.$twitter.'"><i class="icon-twitter2"></i></a>';

$result .= '</div>';

$result .= '<h3>Follow on Twitter<span class="subtitle">twitter.com</span></h3>';

$result .= '</div>';

}

return $result;

}

Теперь вызовем функцию в шаблоне вместо html разметки. И наш код будет иметь следующий вид:

<?php
/*
Template Name: Contacts page
*/

get_header();
?>	

<!-- Page Title
============================================= -->
<section id="page-title">

	<div class="container clearfix">
		<h1>Contact</h1>
		<span>Get in Touch with Us</span>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page">Contact</li>
		</ol>
	</div>

</section><!-- #page-title end -->

<!-- Content
============================================= -->
<section id="content">

	<div class="content-wrap">

		<div class="container clearfix">

			<!-- Contact Form
			============================================= -->
			<div class="col_full">

				<div class="fancy-title title-dotted-border">
					<h3>Send us an Email</h3>
				</div>

				<div class="form-widget">

					<div class="form-result"></div>

					<form class="nobottommargin" id="template-contactform" name="template-contactform" action="include/form.php" method="post">

						<div class="form-process"></div>

						<div class="col_one_third">
							<label for="template-contactform-name">Name <small>*</small></label>
							<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="sm-form-control required" />
						</div>

						<div class="col_one_third">
							<label for="template-contactform-email">Email <small>*</small></label>
							<input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" />
						</div>

						<div class="col_one_third col_last">
							<label for="template-contactform-phone">Phone</label>
							<input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control" />
						</div>

						<div class="clear"></div>

						<div class="col_two_third">
							<label for="template-contactform-subject">Subject <small>*</small></label>
							<input type="text" id="template-contactform-subject" name="subject" value="" class="required sm-form-control" />
						</div>

						<div class="col_one_third col_last">
							<label for="template-contactform-service">Services</label>
							<select id="template-contactform-service" name="template-contactform-service" class="sm-form-control">
								<option value="">-- Select One --</option>
								<option value="Wordpress">Wordpress</option>
								<option value="PHP / MySQL">PHP / MySQL</option>
								<option value="HTML5 / CSS3">HTML5 / CSS3</option>
								<option value="Graphic Design">Graphic Design</option>
							</select>
						</div>

						<div class="clear"></div>

						<div class="col_full">
							<label for="template-contactform-message">Message <small>*</small></label>
							<textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
						</div>

						<div class="col_full hidden">
							<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
						</div>

						<div class="col_full">
							<button name="submit" type="submit" id="submit-button" tabindex="5" value="Submit" class="button button-3d nomargin">Submit Comment</button>
						</div>

						<input type="hidden" name="prefix" value="template-contactform-">

					</form>
				</div>

			</div><!-- Contact Form End -->

			<div class="clear"></div>

			<!-- Contact Info
			============================================= -->
			<div class="row clear-bottommargin">

				<?php echo sp_get_page_contacts();?>

			</div><!-- Contact Info End -->

		</div>

	</div>

</section><!-- #content end -->


<?php
get_footer();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<?php

Template Name: Contacts page

get_header();

<!-- Page Title

============================================= -->

<h1>Contact</h1>

<span>Get in Touch with Us</span>

<li class="breadcrumb-item active" aria-current="page">Contact</li>

</ol>

</div>

</section>

<!-- Content

============================================= -->

<!-- Contact Form

============================================= -->

<h3>Send us an Email</h3>

</div>

</div>

<label for="template-contactform-email">Email <small>*</small></label>

</div>

<label for="template-contactform-phone">Phone</label>

</div>

<label for="template-contactform-subject">Subject <small>*</small></label>

</div>

<label for="template-contactform-service">Services</label>

<option value="">-- Select One --</option>

<option value="Wordpress">Wordpress</option>

<option value="PHP / MySQL">PHP / MySQL</option>

<option value="Graphic Design">Graphic Design</option>

</select>

</div>

<label for="template-contactform-message">Message <small>*</small></label>

</div>

</div>

<button name="submit" type="submit" id="submit-button" tabindex="5" value="Submit" class="button button-3d nomargin">Submit Comment</button>

</div>

</form>

</div>

</div>

<!-- Contact Info

============================================= -->

<?php echo sp_get_page_contacts();?>

</div>

</div>

</section>

<?php

get_footer();