Sunday, May 1, 2016

Shaheen Start Theme - Wordpress

Download Layout Theme and Play ...

https://app.box.com/s/v4nhvwrt34nep7kaji61pqra5dppqr7x

Simple CSS for Widget Area Style - Wordpress

Copy CSS from this file and add it to your theme css

/*********************************************************************************
WIDGET AREAS
*********************************************************************************/
.widget{    margin-bottom: 25px;}
.widget ul li {padding: 0px 12px;}
.widget table {    width: 100%;}
.widget table td {
    padding: 7px 0px;
    text-align: center;
}

.widget table th {
    padding: 7px 0px;
    text-align: center;
}
.widget table caption {    border-bottom: 1px solid #eee;
    padding: 0px 0px 10px 0px;
margin-bottom: 10px;}

.widget  select {    margin-left: 10px;
    border: 1px solid #eee;
    padding: 6px 22px 6px 3px;}
.widget  .screen-reader-text {
    /* font-weight: normal; */
    margin-left: 13px;
}

.widget .textwidget  {    padding: 0px 12px;}

/********************************************************************************
WIDGET AREAS
*********************************************************************************/

Tuesday, November 3, 2015

Simple Load more Posts Worpdress



<div class="row">

<div class="col-md-12 featurebox " id="myList">
<?php
$counter = 0; ?>
<?php query_posts(array('posts_per_page' => '50','post__not_in' => get_option('sticky_posts'))); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) :the_post();
$count++; ?>

<div class="col-md-4">
<div class="wrap_boxes">
<a href="<?PHP the_permalink(); ?>">
    <?php the_post_thumbnail(); ?>
</a>


<div class="category">
    <a href="<?php the_permalink() ?>" rel="bookmark"
       title="<?php the_title_attribute(); ?>"><?php the_titlesmall('', '...', true, '35') ?></a>

</div>
</div>
<!--wrap_boxes-->
</div><!--bigimage-->


<?php $postnum++;
if ($postnum % 6 == 0) { ?>
<div class="add_first clearfix">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Banner Content Bottom')): ?><?php endif; ?>
</div><!--add_first-->

<?php } ?>
<?php endwhile; ?>

<?php else : ?>
<?php get_template_part('no-results', 'index'); ?>
<?php endif; ?>
<br/>

<div id="loadMore">Load more</div>


</div>
<!--12-->

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

<style>

#myList .col-md-4{ display:none;}
#myList .add_first{ display:none;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$('#myList .col-md-4:lt(3)').show();
var totalNum = $('#myList .col-md-4').length;
var items = totalNum;
$('#loadMore').click(function () {
var shown = $('#myList .col-md-4:visible').size() + 3;
if (shown < items) {
$('#myList .col-md-4:lt(' + shown + ')').fadeIn("slow");
$('#myList .add_first:last').show();

}

else{
$('#loadMore').text(' No More Post');
}
});

});

</script>

Wednesday, January 21, 2015

Bootstrap Carousel With Thumbnails

/* ************* Add this code where u want to display carousel ***************/


 <div class="carousel slide article-slide" id="myCarousel"> <div class="carousel-inner cont-slider"> <div class="item active"> <img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/construction-science.png" alt="construction-science" width="377" height="399" class="alignnone size-full wp-image-72" /></div> <div class="item"><img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/museum.png" alt="museum" width="727" height="404" class="alignnone size-full wp-image-74" /></div> <div class="item"><img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/natural-hist.png" alt="natural-hist" width="1021" height="402" class="alignnone size-full wp-image-75" /></div> <div class="item"><img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/dot-red.png" alt="dot-red" width="1027" height="406" class="alignnone size-full wp-image-73" /></div> <div class="item"><img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/vita_time.png" alt="vita_time" width="1027" height="404" class="alignnone size-full wp-image-76" /></div> <div class="item"><img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/aerobic.png" alt="aerobic" width="420" height="404" class="alignnone size-full wp-image-70" /></div> <div class="item"><img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/cd.png" alt="cd" width="1025" height="402" class="alignnone size-full wp-image-71" /></div> </div> <ol class="carousel-indicators visible-lg visible-md"> <li class="active" data-slide-to="0" data-target="#myCarousel"> <img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/construction-science.png" alt="construction-science" width="377" height="399" class="alignnone size-full wp-image-72" /> </li> <li class="" data-slide-to="1" data-target="#myCarousel"> <img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/museum.png" alt="museum" width="727" height="404" class="alignnone size-full wp-image-74" /> </li> <li class="" data-slide-to="2" data-target="#myCarousel"> <img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/natural-hist.png" alt="natural-hist" width="1021" height="402" class="alignnone size-full wp-image-75" /> </li> <li class="" data-slide-to="3" data-target="#myCarousel"> <img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/dot-red.png" alt="dot-red" width="1027" height="406" class="alignnone size-full wp-image-73" /> </li> <li class="" data-slide-to="4" data-target="#myCarousel"> <img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/vita_time.png" alt="vita_time" width="1027" height="404" class="alignnone size-full wp-image-76" /> </li> <li class="" data-slide-to="5" data-target="#myCarousel"> <img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/aerobic.png" alt="aerobic" width="420" height="404" class="alignnone size-full wp-image-70" /> </li> <li class="" data-slide-to="6" data-target="#myCarousel"> <img src="http://www.studio.ayson.com/wp-content/uploads/2015/01/cd.png" alt="cd" width="1025" height="402" class="alignnone size-full wp-image-71" /> </li> </ol> <div class="bs_controls"><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <i class="fa fa-caret-left fa-2x" ></i><span class="sr-only">Previous</span></a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><i class="fa fa-caret-right fa-2x" ></i><span class="sr-only">Next</span></a><div class="playpause"> <a class="right" id="playButton" > <i class="fa fa-caret-right" ></i> </a> <a class="right1" id="playButton"> <i class="fa fa-caret-right" ></i> </a> <a class="right" id="playButton"> <i class="fa fa-caret-right" ></i> </a> <a class="left" id="pauseButton"> <i class="fa fa-pause"></i> </a> </div> </div> </div>

           /******************** Add this script in header *********************/

<script>

$(function () {
    $('.carousel').carousel({
  interval:3000
});
    $('#playButton').click(function () {
        $('#myCarousel').carousel('cycle');
   
    });
        $('#pauseButton').click(function () {
        $('#myCarousel').carousel('pause');
    });

$('.right1').click(function () {
        $('#myCarousel').carousel('cycle');
   
    });


});


</script>


<script>
$(document).ready(function(){
  $("#pauseButton").click(function(){
    $(".right1").css('z-index','2');
  });
   $(".right1").click(function(){
    $(".right1").hide();
  });



});
</script>




Saturday, January 10, 2015

To Display Posts Month And Year Wise


/**************** use this code *************/

<div class="posttitleleft">

<ul class="years">
<?php
$all_posts = get_posts(array(
  'posts_per_page' => -1 // to show all posts
));

// this variable will contain all the posts in a associative array
// with three levels, for every year, month and posts.

$ordered_posts = array();

foreach ($all_posts as $single) {

  $year  = mysql2date('Y', $single->post_date);
  $month = mysql2date('F', $single->post_date);

  // specifies the position of the current post
  $ordered_posts[$year][$month][] = $single;

}

// iterates the years
foreach ($ordered_posts as $year => $months) { ?>
  <li>

 

    <ul class="months">
    <?php foreach ($months as $month => $posts ) { // iterates the moths ?>
      <li>
        <?php echo $year ?> <?php printf("%s (%d)", $month, count($months[$month])) ?>

        <ul class="posts">
          <?php foreach ($posts as $single ) { // iterates the posts ?>

            <li class="active">
              <?php echo "<span class='yearmonthdate'> ". mysql2date('d.m.Y ' , $single->post_date)."</span>"; ?> <a href="<?php echo get_permalink($single->ID); ?>"><?php echo get_the_title($single->ID); ?></a> </li>
            </li>

          <?php } // ends foreach $posts ?>
        </ul> <!-- ul.posts -->

      </li>
    <?php } // ends foreach for $months ?>
    </ul> <!-- ul.months -->

  </li> <?php
} // ends foreach for $ordered_posts
?>
</ul><!-- ul.years -->
</div>

Pagination in posts

<?php
// set the "paged" parameter (use 'page' if the query is on a static front page)
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

// the query
$the_query = new WP_Query( 'cat=1&paged=' . $paged ); 
?>

<?php if ( $the_query->have_posts() ) : ?>

<?php
// the loop
while ( $the_query->have_posts() ) : $the_query->the_post(); 
?>
<?php the_title(); ?>
<?php endwhile; ?>

<?php

// next_posts_link() usage with max_num_pages
next_posts_link( 'Older Entries', $the_query->max_num_pages );
previous_posts_link( 'Newer Entries' );
?>

<?php 
// clean up after the query and pagination
wp_reset_postdata(); 
?>

<?php else:  ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>


/************************** Numeric Pagination ********************/
if ( ! function_exists( 'my_pagination' ) ) :
function my_pagination() {
global $wp_query;

$big = 999999999; // need an unlikely integer

echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages
) );
}
endif;


To Limit the title text.

 function the_titlesmall($before = '', $after = '', $echo = true, $length = false) { $title = get_the_title();

if ( $length && is_numeric($length) ) {
$title = substr( $title, 0, $length );
}

if ( strlen($title)> 0 ) {
$title = apply_filters('the_titlesmall', $before . $title . $after, $before, $after);
if ( $echo )
echo $title;
else
return $title;
}
}

/************ add above code into function.php ****************/

<?php echo getPostViews(get_the_ID());?>

/************ add this code where u want to display title text ****************/