Friday, February 9, 2018

wordpress post subcategory list with count

Hi,

When using WordPress as a CMS, or even as a blog you might want to display subcategories on category pages.

<?php
    if (is_category()) {
    $this_category = get_category($cat);
    }
    ?>
    <?php
    if($this_category->category_parent)
    $this_category = wp_list_categories('orderby=id&show_count=0
    &title_li=&use_desc_for_title=1&child_of='.$this_category->category_parent.
    "&echo=0"); else
    $this_category = wp_list_categories('orderby=id&depth=1&show_count=0
    &title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID.
    "&echo=0");
    if ($this_category) { ?>
 
<ul>
<?php echo $this_category; ?>
 
</ul>
 
<?php } ?>

Comments are welcome :)

Thursday, December 14, 2017

React toggle Class Name on click

getInitialState: function() {
    return {
      myclass: "ravish"
    }
  },
  handleClick: function() {
var temp="ravish";
if( this.state.myclass=="ravish"){
  temp="ravish open"
}
this.setState({
      myclass: temp
    });


<div id="change button" className={this.state.myclass} onClick={this.handleClick} ></div>

Monday, July 31, 2017

Fixed: input type number spinner hide

Remove input number arrows firefox


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}

Thursday, July 7, 2016

Widgets Admin Page Not Working

 I needed to enable the widgets. <admin> Widgets > Screen Options > Enable



Friday, June 17, 2016

Gulp image sprite css gulp.spritesmith

npm install --save-dev gulp.spritesmith

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
    var spriteData = gulp.src('img/sprites/*.png')
        .pipe(spritesmith({
            /* this whole image path is used in css background*/
            imgName: '../img/sprite.png',
            cssName: 'sprite.css'
        }));
    spriteData.img.pipe(gulp.dest('img'));
    spriteData.css.pipe(gulp.dest('css'));
});


Enjoy Comments are welcome 




Wednesday, April 27, 2016

CSS multiline text with ellipsis

HTML

<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>


Css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}
h2 {
  display: block;
  /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 145.6px;
  /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}