drupal7 theme page creation - drupal

I have created home page in drupal.it's work fine.But I don't able to create other pages(like,service contact,client.) (home page and other pages are different).I have create page.tpl.php.I could create region in .info file? here I have attached my page.tpl.php file.Could you please any one tell me.( other page format like one leftcontent and 2 rightcontent structure.).
page.tpl.php:
<div id="wrapper">
<header id="header">
<div class="section clearfix">
<div class="logo_left">
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
</div>
<nav class="logo_right"><?php print render($page['header']);?></nav>
</div></header> <!-- /.section, /#header -->
<div id="menu">
<!--ul>
<li>About</li>
<li>Service</li>
<li>Client</li>
<li>Contact</li>
</ul-->
<?php print render($page['header_menus']); ?>
</div>
<div id="content">
<article>
<div id="content" class="column">
<?php
$url = request_uri();
if(strpos($url, "user"))
{
}
else
{
?>
<?php if ($breadcrumb): ?>
<div id="breadcrumb"><?php print $breadcrumb; ?></div>
<?php endif; ?>

Create another file " page--front.tpl.php " for home page and other files can use page.tpl.php
you can set home page on "Default front page" by using below link
"admin/config/system/site-information"

Related

<! --nextpage--> pagination is not working in Wordpress

I'm trying to make it so posts can be easily paginated in a custom theme, but I'm doing something wrong. I've included wp_link_pages(); in the while like which I believe is required, but maybe I have it in the wrong place or I'm missing something else?
<?php get_header(); ?>
<?php
while(have_posts()) {
the_post();
wp_link_pages();
?>
<div class="mainConent">
<div class="leftSidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('left_sidebar') ?>
</div>
</div>
<div class="recentBlogsWrapper">
<div class="blogWrapper">
<h2><?php the_title(); ?></h2>
<p><?php the_time('F j, Y') ?></p>
<?php if(has_post_thumbnail()) { ?>
<div class="card-image">
<img class="page-image" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
</div>
<?php } ?>
<div class="card-description">
<?php the_content(); ?>
<?php comments_template(); ?>
<?php } ?>
<div class="backarrowwrap">
<a class="backhomelink" href="<?php echo site_url(); ?>" <?php if(is_front_page()) echo 'class="active"' ?>>
<img class="backarrow" src="<?php echo get_template_directory_uri(); ?>/img/backarrow.png" alt="back arrow" />
Go Back Home
</a>
</div>
</div>
</div>
</div>
<div class="rightSidebar" id="sidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('right_sidebar') ?>
</div>
</div>
<?php get_footer(); ?>
Another odd thing that's happening is that the code block is showing the code on the page instead of hiding it like it should.
The wordpress editor
My blog post page which shows the code
Gutenburg was preventing me from writing the comment as code, even in a code box. Once I switched to the classic view the problem went away since I could write the comment in the html directly.

how to start the loop from the second post in blog page in wordpress

I don't have much idea about wordpress. I have a blog in wordpress. In my blog page, i am showing the most recent post in top and rest of post will appear in bottom . I am getting the repitation of most recent blog in bottom as well. that means, it's appearing twice on page. I want to get rid it from bottom. Thanks
<?php if (have_posts()):?>
<!-- section -->
<section>
<div class="row justify-content-center">
<div class="col-md-5"><?php $image1 = get_field('main_image');?>
<img id="theImage" class="img-fluid" src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></div>
<div class="col-md-4 base">
<div class="hero_col">
<p class="blog_content"><?php the_time('F j, Y'); ?> </p>
<span class="head_blog_content">
<?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</span>
<div class="read_article py-3"><a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></div>
</div>
</div>
<div class="centered_cols"><span class="hero_text"><!-- post title -->
<?php the_title(); ?>
</span></div>
</div>
</section><!-- Gallery Section -->
<div class="product-container">
<div class="row justify-content-center">
<?php $Number = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-sm-12 col-md-3 blog-container mb-3"><a href="#">
<?php $image1 = get_field('main_image');?>
<img src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></a>
<!-- post details -->
<p class="blog_date"><?php the_time('F j, Y'); ?></p>
<span class="blog_caption"><?php the_title(); ?>
</span>
<p class="blog_content"><?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</p>
<div class="column-bottom"><span class="read_article">
<a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></span></div>
</div>
<!-- /post details -->
<!-- article -->
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
<!-- /article -->
<?php $Number++; endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
I guess, since you don't know much about wordpress, its easier to create a counter to skip output in first item, something like this:
while (have_posts()) : the_post();
$Number = 1; //initial value
if ($count != 1) : ?>
//all your post content here
<?php endif;
$Number++; // incrementing counter by 1
It seems you came up with the counting (I've set the var name as Number based on your code), you're just missing the conditional aparently.

Nested repeater field ACF - Showing content from field one

I have a nested repeater field.
The nested part is a modal window, which when open expands on the second repeater field. But when everything is filled out the modal window displays the info from the first item in the loop.
This is how it should be working:
http://pagedev.co.uk/hoppings/product-sector.php#
Here is my code:
<div class="container">
<?php while( have_rows('product_sections') ): the_row(); ?>
<div class="sector-heading">
<img src="<?php the_sub_field('section_logo'); ?>">
<div><?php the_sub_field('section_intro'); ?></div>
</div>
<?php if( have_rows('products') ): ?>
<div class="grid-wrapper">
<?php while( have_rows('products') ): the_row(); ?>
<!--Start Single Product-->
<div class="grid-item">
<div class="image-hovers">
<img src="<?php the_sub_field('thumbnail'); ?>">
<a class="js-open-modal" href="#" data-modal-id="popup"><div class="product-hover"></div></a>
</div>
<div class="grid-title">
<h2><?php the_sub_field('product_name'); ?></h2>
</div>
</div>
<!--Start Single Product Modal-->
<div id="popup" class="modal-box">
×
<div class="modal-wrap">
<div class="modal-img">
<img src="<?php the_sub_field('thumbnail'); ?>">
</div>
<div class="modal-content">
<h2><?php the_sub_field('product_name'); ?></h2>
<p><strong><?php the_sub_field('product_size'); ?></strong></p>
<hr>
<?php the_sub_field('product_description'); ?>
<div class="modal-stockist">Find a Stockist</div>
<div class="modal-literature">Literature</div>
</div>
</div>
</div>
<!--Close Single Product Modal-->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Grid Wrapper-->
<?php endif; ?>
<!-- Close product repeater field -->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Container-->
Any help would be great!
Lee
I figured it out. Something so simple!
My modal window needed a unique ID for each product!
All solved :)

How do I add a page featured image to nivo slider in wordpress?

I've followed the guide below in trying to manually install nivo slider into Wordpress: http://www.aoclarkejr.com/author/aj/
I'm trying to get the slider to pick up and display the featured image. I think perhaps there is a problem with the code in step 6, and not just the missing ' (see below). As the slider appears to be loading i.e I get the next/prev tabs and can see the code when viewing the page source, but it's not picking up and displaying the featured image.
<div id="slider-wrap">
<div id="slider">
<?php query_posts(array(
'post_type'=>'slides
));
?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post();
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
?>
<img src="<?php echo $thumbnail[0]; ?>" width="" height="" />
<?php endwhile; ?>
</div><!--/slider nivoSlider-->
</div><!--/slider-wrap -->
I should add that I'm trying to get this to work on a page, not custom post.
My ultimate goal is the get the same implementation as this: http://pexetothemes.com/demos/story_wp/home-default/
Here is my code now:
<?php get_header(); ?>
<div class="header-wrapper">
<div id="slider-wrap">
<div id="slider">
<?php query_posts(array(
'post_type'=>'page'
));
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
?> <img src="<?php echo $thumbnail[0]; ?>" width="" height="" />
<?php // endwhile; ?>
</div><!--/slider nivoSlider-->
</div><!--/slider-wrap -->
</div>
<div class="clear"></div>
<div id="content-container" class="content-boxed layout-full">
<div id="full-width" class="content">
<div class="content-box">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div><!-- page wrapper -->
<?php get_footer(); ?>
For some reason part of the page is repeating itself.
<div class="header-wrapper"></div>
<div id="slider-wrap">
<div id="slider">
<img width="" height="" src="http://localhost:8888/defylife/assets/images/posts/ccm_adventure_450gp_left.jpg"></img>
</div>
<!--
/slider nivoSlider
-->
</div>
<!--
/slider-wrap
-->
<div class="clear"></div>
<div id="content-container" class="content-boxed layout-full">
<div id="full-width" class="content">
<div class="content-box"></div>
</div>
</div>
<img width="" height="" src=""></img>
</div>
<!--
/slider nivoSlider
-->
</div>
<!--
/slider-wrap
-->

Open a custom link in a modal when fetching posts from wordpress

What I am trying to achieve is to create a grid with bootstrap inside a wordpress page and display 30 posts as thumbnails. By clicking on the thumbnail a modal box will be displayed with the image in full size.
What am I doing right now is that the modal pops up but displays the same image every time. I am trying to set the href value in the tag that will display the of the post in the modal.
<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="main" class="clearfix" role="main">
<?php $counter = 0; ?>
<div class="row-fluid">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php if ($counter < 4): ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix thumbnail-post span3'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<a href="#myModal" data-toggle="modal" >
<?php the_post_thumbnail( 'graphix-thumbnail' ); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class='modal-body'>
<img src="<?php echo $url; ?>" />
</div>
</div>
<div class="page-header"><h3 itemprop="headline"><?php the_title(); ?></h3></div>
</header> <!-- end article header -->
<section class="post_content clearfix">
<?php the_content(); ?>
</section>
</article> <!-- end article -->
<?php $counter +=1; ?>
<?php else: ?>
</div>
<?php $counter = 0; ?>
<div class="row-fluid">
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
</div>
<?php endif; ?>
</div> <!-- end #main -->
</div> <!-- end #content -->
<?php get_footer(); ?>
See this question. Its pretty easy to pass data to a modal with jQuery.
What I did wrong was that the modal's identifier was the same and the id has to be unique. So I changed the id of the modal to "#myModal-" and each one got its own unique id !

Resources