Blog - Page 6 of 7 - Freelance Web House

Responsive layout using page media

Today I am going to show you how to make website responsive using page media. For doing so you need to understand the screens width of different device like mobile,Tab, Etc. Below is the table of content which specifies various screen width of various devices.

/* Table of Contents
==================================================
#Mobile – 240px
#Mobile – 320px
#Mobile – 480px
#Tablet – 768px
*/
/* #Mobile – 240px

================================================== */
@media only screen and (min-width: 320px) and (max-width: 479px) {
.aman{
width:300px;
height:50px;
background:yellow;
}
}
/* #Mobile – 480px
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.aman{
width:460px;
height:50px;
background:blue;
}
}
/* #Tablet – 768px
================================================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.aman {
width:748px;
height:50px;
background:red;
}
}
/* #Screens Bigger than – 1280px
================================================== */
@media only screen and (min-width: 1281px) {
.aman {
width:970px;
height:50px;
background:#ccc;
}
}

Now adjust your CSS into those area according to your need. You can use firebug for firefox to navigate element and set there properties according to devices.

That’s it. It’s too easy but sometimes it may take time to adjust various devices.

Back up Buddy

Backup Buddy is a premium wordpress plugin which helps to backup restore the wordpress site. It’s really simple and easy to use. I use it. Really helpful. Check the plugin here

Adding content in Meteor Slider

Meteor Slider is an awesome slider plugin by Josh. But only one lacks was there with this plugin I think which has been resolved now. You can add content to meteor slider in the following way.

First Copy meteor-slideshow.php from /meteor-slides/includes/ to your theme’s directory to replace the plugin’s default slideshow template.

Then add the following code to show the title of the slider.

`1`	`<p><?php the_title(); ?></p>`

That should go directly above the closing slides tag:

`1`	`</div><!-- .mslide -->`

To add excerpt to the slider as content add the following code to the theme function file

// Add excerpts to Meteor Slides

	add_post_type_support('slide', 'excerpt');

And then drop this into your custom slideshow template, somewhere within the .mslide div:

<?php // Get the slide post's excerpt

	the_excerpt();?>

Maximum Execution time 30 Second at wordpress

You can Do it By following

1. By Wp-config.php Changes

set_time_limit(60);

Important – If you are making changes in wp-config.php, then add this line above “/* That’s all, stop editing! Happy blogging. */” comment.

2. In htaccess

php_value max_execution_time 60

<stro

Custom lof Slider for wordpress

Put this at header
=======================================================================

<style>

ul.lof-main-wapper li {
position:relative;
}
</style>

<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );

/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>

</script>

=============================
Body Section
=============================

<div >Previous</div>

<!– MAIN CONTENT –>

<ul>
<?php query_posts(‘category_name=slider&order=dsc&showposts=12’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<img src=”<?php bloginfo(‘stylesheet_directory’);?>/images/thumbl_980x340.png” title=”Newsflash 2″ >
<div>

</div>

<!– END MAIN CONTENT –>
<!– NAVIGATOR –>

<ul>
<?php query_posts(‘category_name=slider&order=dsc&showposts=12’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<div>
<img src=”<?php bloginfo(‘stylesheet_directory’);?>/images/lofthumbs/791902news3.jpg” />
<h3> <?php the_title();?></h3>

</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>

</div>

<!—————– END OF NAVIGATOR ———————>
<div>Next</div>

</div>

Scroll text or Image without Jquery?

It is really easy to scrolling text (up, down, left, right) to any direction. Someone may think that it need obviously jquery to do so. Even I also thought like that way. But I got a easy solution for that by <marque> tag of HTML. Here is the code that how to do it below

</marquee>

Specific category post to a certain place of theme in WordPress ?

Specific category post to a certain place of theme

<h2><a href=”http://mydomain.com/?cat=XXX”>TITLE OF CATEGORY</a></h2>
<?php query_posts(‘category_name=xxxxxxxxxxxx&order=dsc&showposts=12’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a>
<br clear=”all”><br />
<?php endwhile; ?>
<?php endif; ?>

Contact Form 7 Thank you page

The one limitation for Contact Form 7 plugin is that after submitting the form it just shows a text says “your message sent” or something like that. But if we want to redirect visitor to a different page that has a full content with some more text with thank you confirmation. All you need to do just add the following code to contact form 7 additional setting box that stays at very bottom of a form.

on_sent_ok: "location.replace('url of the page');"

You can set the URL whatever you like.

But now this technique is deprecated and may not work. So here is the new solution below. Simply add the below code to your theme function.php file

Adding subtitle to your wordpress post

For adding post subtitle simple place the below code in your theme template or wherever you like.

<?php
{ $subtitle = get_post_meta
($post->ID, 'subtitle', $single = true);

if($subtitle !== '') echo $subtitle;} ?>

After this you have to go to your post then create a custom field named “subtitle” and put the value that you want as a subtitle. To see the custom field you have to enable it from screen option from wordpress backend.

That’s all. It’s simple.

Display a Widget in WordPress Theme

It’s really a simple process.

For doing so Just follow the process bellow
First Declayer it in the theme function like bellow

======================================

<?php

if ( function_exists (‘register_sidebar’))

register_sidebar (array(

‘name’ => __( ‘widget name’, ‘theme name ),

‘before_widget’ => ‘ ‘ ,
‘after_widget’ => ‘ ‘

‘before_title’ => ‘<h2> ‘ ,

‘after_title’ => ‘</h2> ‘ ,

));

=======================================

Declare Widget where you wnat like the way below
=======================================

<?php dynamic_sidebar(‘widget name’); ?>
</div>

=======================================