Full width home page for ClassiPress

9/20/2016 – i found 2 problems and updated the post and zip file

This is a post about ClassiPress and how to change its layout to full width.

What we will do

  • A child theme
  • A custom template

Using a child theme, we create a custom template with this code

<?php /* Template Name: Full Width Home Page */ ?>



<div class="content">

	<div class="content_botbg">

		<div class="content_res">

			<?php get_template_part( 'featured' ); ?>

			

				<?php if ( $cp_options->home_layout == 'directory' ) { ?>

					<div class="shadowblock_out">

						<div class="shadowblock">

							<h2 class="dotted"><?php _e( 'Ad Categories', APP_TD ); ?></h2>

							<div id="directory" class="directory <?php cp_display_style( 'dir_cols' ); ?>">

								<?php echo cp_create_categories_list( 'dir' ); ?>

								<div class="clr"></div>

							</div><!--/directory-->

						</div><!-- /shadowblock -->

					</div><!-- /shadowblock_out -->

				<?php } ?>


			<div class="tabcontrol">

					<?php $ad_tabs = cp_get_ads_listing_tabs(); ?>

					<ul class="tabnavig">

						<?php $tab_cnt = 1; ?>

						<?php foreach ( $ad_tabs as $ad_tab => $ad_tab_args ) { ?>

							<li>
								<a href="#block<?php echo $tab_cnt++; ?>" id="<?php echo esc_attr( $ad_tab ); ?>"<?php if ( 2 < $tab_cnt ) { echo ' class="dynamic-content"'; } ?>>
									<span class="big"><?php echo esc_html( $ad_tab_args['title'] ); ?></span>
								</a>
							</li>

						<?php } ?>

					</ul>

					<?php $tab_cnt = 1; ?>

					<?php foreach ( $ad_tabs as $ad_tab => $ad_tab_args ) { ?>

						<!-- tab block -->
						<div id="block<?php echo $tab_cnt; ?>">

							<div class="clr"></div>

							<?php if ( 1 === $tab_cnt && function_exists( $ad_tab_args['callback'] ) ) {

								call_user_func( $ad_tab_args['callback'] );

							} else { ?>

								<div class="post-block-out post-block <?php echo esc_attr( $ad_tab ); ?>-placeholder"><!-- dynamically loaded content --></div>

							<?php } ?>

							<?php $tab_cnt++; ?>

						</div><!-- /tab block -->

					<?php } ?>

				</div><!-- /tabcontrol -->

			


			


			<div class="clr"></div>

		</div><!-- /content_res -->

	</div><!-- /content_botbg -->

</div><!-- /content -->

Name it tpl-home-full-width.php and save it in your child theme folder.

 

Edit #1

I missed the searchbar! the tabs ‘random’ , ‘popular’ didn’t work.

In the functions.php we add this code


if ( ! function_exists( 'cp_load_scripts' ) ) :
function cp_load_scripts() {
global $cp_options;

$suffix_js = cp_get_enqueue_suffix();

// load google cdn hosted scripts if enabled
if ( $cp_options->google_jquery ) {
wp_deregister_script( 'jquery' );
$protocol = is_ssl() ? 'https' : 'http';
wp_register_script( 'jquery', $protocol . '://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js', false, '1.12.3' );
}

// needed for single ad sidebar email & comments on pages, edit ad & profile pages, ads, blog posts
if ( is_singular() ) {
wp_enqueue_script( 'validate' );
wp_enqueue_script( 'validate-lang' );
}

// search autocomplete and slider on certain pages
wp_enqueue_script( 'jquery-ui-autocomplete' );

// advanced search sidebar and home page carousel
wp_enqueue_script( 'jquery-ui-slider' );

// used to convert header menu into select list on mobile devices
wp_enqueue_script( 'tinynav', get_template_directory_uri() . '/includes/js/jquery.tinynav.js', array( 'jquery' ), '1.1' );
// used to transform tables on mobile devices
wp_enqueue_script( 'footable' );

// adds touch events to jQuery UI on mobile devices
if ( wp_is_mobile() ) {
wp_enqueue_script( 'jquery-touch-punch' );
}

if ( ! wp_is_mobile() && $cp_options->selectbox ) {
// styles select elements
wp_enqueue_script( 'selectbox', get_template_directory_uri() . '/includes/js/jquery.selectBox.min.js', array( 'jquery' ), '1.2.0' );
}

if ( $cp_options->enable_featured && is_page_template( 'tpl-full-width-home.php' ) ) {
wp_enqueue_script( 'jqueryeasing', get_template_directory_uri() . '/includes/js/easing.min.js', array( 'jquery' ), '1.3' );
wp_enqueue_script( 'jcarousellite', get_template_directory_uri() . '/includes/js/jcarousellite.min.js', array( 'jquery', 'jquery-ui-slider' ), '1.9.2' );
}

wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . "/includes/js/theme-scripts{$suffix_js}.js", array( 'jquery' ), '3.3.3' );

// only load the general.js if available in child theme
if ( file_exists( get_stylesheet_directory() . '/general.js' ) ) {
wp_enqueue_script( 'general', get_stylesheet_directory_uri() . '/general.js', array( 'jquery' ), '1.0' );
}

// only load cufon if it's been enabled
if ( $cp_options->cufon_enable ) {
wp_enqueue_script( 'cufon-yui', get_template_directory_uri() . '/includes/js/cufon-yui.js', array( 'jquery' ), '1.0.9i' );
wp_enqueue_script( 'cufon-font-vegur', get_template_directory_uri() . '/includes/fonts/Vegur_400-Vegur_700.font.js', array( 'cufon-yui' ) );
wp_enqueue_script( 'cufon-font-liberation', get_template_directory_uri() . '/includes/fonts/Liberation_Serif_400.font.js', array( 'cufon-yui' ) );
}

// load the gravatar hovercards
if ( $cp_options->use_hovercards ) {
wp_enqueue_script( 'gprofiles', 'https://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), '1.0', true );
}

// only load gmaps when we need it
if ( is_singular( APP_POST_TYPE ) ) {

$gmap_params = array(
'language' => $cp_options->gmaps_lang,
'region' => $cp_options->gmaps_region
);

if ( $cp_options->api_key ) {
$gmap_params['key'] = $cp_options->api_key;
}

$google_maps_url = ( is_ssl() ? 'https' : 'http' ) . '://maps.googleapis.com/maps/api/js';
$google_maps_url = add_query_arg( $gmap_params, $google_maps_url );

wp_enqueue_script( 'google-maps', $google_maps_url, array( 'jquery' ), '3.0' );
}

if ( is_singular() || is_home() ) {
wp_enqueue_script( 'colorbox' );
}

$listing_id = 0;

if ( ! empty( $_GET['action'] ) && 'change' === $_GET['action'] ) {
$checkout = appthemes_get_checkout();
$listing_id = $checkout ? $checkout->get_data( 'listing_id' ) : false;
} elseif( ! empty( $_GET['listing_renew'] ) ) {
$listing_id = (int) $_GET['listing_renew'];
}

/* Script variables */
$params = array(
'appTaxTag' => APP_TAX_TAG,
'require_images' => ( $cp_options->ad_images && $cp_options->require_images ),
'ad_parent_posting' => $cp_options->ad_parent_posting,
'ad_currency' => $cp_options->curr_symbol,
'currency_position' => $cp_options->currency_position,
'home_url' => home_url( '/' ),
'ajax_url' => admin_url( 'admin-ajax.php', 'relative' ),
'nonce' => wp_create_nonce('cp-nonce'),
'text_processing' => __( 'Processing...', APP_TD ),
'text_require_images' => __( 'Please upload at least 1 image.', APP_TD ),
'text_before_delete_ad' => __( 'Are you sure you want to delete this ad?', APP_TD ),
'text_mobile_navigation' => __( 'Navigation', APP_TD ),
'loader' => get_template_directory_uri() . '/images/loader.gif',
'listing_id' => $listing_id,
);
wp_localize_script( 'theme-scripts', 'classipress_params', $params );

$params = array(
'empty' => __( 'Strength indicator', APP_TD ),
'short' => __( 'Very weak', APP_TD ),
'bad' => __( 'Weak', APP_TD ),
'good' => __( 'Medium', APP_TD ),
'strong' => __( 'Strong', APP_TD ),
'mismatch' => __( 'Mismatch', APP_TD ),
);
wp_localize_script( 'password-strength-meter', 'pwsL10n', $params );

}
endif;

This will load all required JS for the theme to work  and for our custom template.

Edit #2

We need to override the file ‘archive-ad-listing.php’ of the parent theme for the pagination (page 2, page 3 of ads) to work.We add the file in the child theme making the necessary code changes (full width)


<div class="content">

<div class="content_botbg">

<div class="content_res">

<div id="breadcrumb"><?php cp_breadcrumb(); ?></div>

<!-- left block -->

<?php get_template_part( 'loop', 'ad_listing' ); ?>

<div class="clr"></div>

</div><!-- /content_res -->

</div><!-- /content_botbg -->

</div><!-- /content -->

Now you can select the new template from your wp>pages>templates

untitled-1

The ads get all the space but there is still a problem with the positioning of the image+ad data.

full-width-page-no-css

we need to add some style in the style.css file

.post-block .post-right {
max-width:800px;
}

@media screen and (max-width: 960px)
{

.post-block .post-right {
max-width: 77.7777778% ;
min-width: 76.2790698%;
}

This will increase the width of the right part of the ad (title, price, excerpt) and make sure it looks correct in mobile devices

Download the child theme here