How to submit a form using AJAX

Originally posted on Universal Coder:

This is a Registration.php file

In This file Simple create registration form and submit by using AJAX

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#myForm').on('submit',function(event) {
$.ajax({
url:'success.php',          //target file
data:$(this).serialize(),    //translate data structure and object
type:'POST',
success:function(data){

console.log(data);
$("#success").show();       // Show Success Message==
},
error:function(data){

$("#error").show().fadeOut(5000);   //===Show Error Message====
}
});
event.preventDefault();         //To Avoid Page Refresh and Fire the Event "Click"
});
});
</script>

</head>
<body>
<h2 >Registration Form</h2>

<table align:center>
<form id="myForm" method="POST" action="" >
<tr>
<tr><td>Name :</td><td><input type="text" name="name" required></td></tr>
<tr><td>SarName :</td><td><input type="text" name="sarname" required></td></tr>
<tr><td>Birthday :</td><td><input type="date" name="bday" required></td></tr>
<tr><td>E-mail :</td><td><input type="email" name="email" required></td></tr>
<tr><td>Password :</td><td><input type="password" name="password" required></td></tr>
<tr><td>re-Password :</td><td><input type="password" name="passward" required></td></tr>
<tr><td><button type="submit" name="submit" id="submit">submit</button></td> </tr>
</tr>
<span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span>

<span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
</form>
</table>

<?php ?>
</body>

</html>

This is success.php…

View original 100 more words

How to add custom Javascript in WordPress

Tags

,

Copy this line and add in your theme header.php file.
Path : projectname/wp-content/themes/yourtheme/header.php

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js"></script>

File

Add the script.js file here :
projectname/wp-content/themes/yourtheme/js/script.js

How to add custom css in WordPress

Tags

, ,

Copy this line and add in your theme header.php file.
Path : projectname/wp-content/themes/yourtheme/header.php

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style/media.css" media="screen" />

custome

File

Add the media.css file here :
projectname/wp-content/themes/yourtheme/style/media.css

Display Most Popular Posts without plugin

Tags

,

<?php
	query_posts('meta_key=post_views_count&orderby=meta_value_num&order=DESC');
	if (have_posts()) : while (have_posts()) : the_post(); ?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php
	endwhile; endif;
	wp_reset_query();
?>

Display Random posts in WordPress

Tags

, ,

Display a list of 5 posts selected randomly by using the MySQL RAND() function for the orderby parameter value:

<ul>
<?php
$args = array( 'posts_per_page' => 5, 'orderby' => 'rand' );
$rand_posts = get_posts( $args );
foreach ( $rand_posts as $post ) : 
  setup_postdata( $post ); ?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; 
wp_reset_postdata(); ?>
</ul>

Basic WordPress Method

Originally posted on Universal Coder:

Display Post URL as  Link Text
<?php the_permalink(); ?>

For Homepage Url

<?php bloginfo('url'); ?>

For Image Source Or File Path

<?php bloginfo('template_directory'); ?>/folder-name/

For Get Header Menu

<?php wp_nav_menu('Menu=headermenu' ); ?>

For Get Footer Menu

<?php wp_nav_menu( array('menu' => 'footermenu' )); ?>

Make The “Read More” Link To The Post
Place this in a theme’s functions.php to make the “read more” link to the post

function new_excerpt_more( $more ) {
	return ' <a href="'. get_permalink( get_the_ID() ) . '">Read More</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );

For More Information

View original

Common steps to write a WordPress Plugin

Originally posted on PHP Technology Tutorials:

  1. Create a php file which name same as plugin name.
  2.  Add Standard Plugin header information in top of the file. This header information help wordpress to active ,load plugin and run its functionality. Without header information your plugin will never run and work in WordPress.
  3.  Write plugin code logic in file. Add plugin code for action and filters.
  4. Add admin panel for your plugin. this step is not neccessory but useful when you have plugin setting and want to save and retrive plugin settings from database.
  5. Plugin is ready to use in WordPress.

View original

Get search form WordPress

Tags

,

Usage

Display search form using searchform.php Theme file.

 get_search_form(); 

Examples

If you don’t have searchform.php in your Theme, WordPress will render its built-in search form:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

The above form is used on HTML4 websites. If your theme supports HTML5, which happens if it uses add_theme_support(‘html5′, array(‘search-form’)); it will output the following HTML form. This is the case since WordPress 3.6.

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>

How Edit Search Form Using Hooks: WordPress

Originally posted on Raghunath Gurjar:

Hello Friends!

Hope you are doing well :)

If you want to edit the html of default search form in your wordpress website, then don’t warry :) just add my code in your theme function file.

raghu-blog

/********************************************
 * Start search form hookes part here
*********************************************/
function my_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
    <div>
    <input type="text" value="' . get_search_query() . '" name="s" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" id="setop"/>
    <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
    </div>
    </form>';

    return $form;
}

add_filter( 'get_search_form', 'my_search_form' );
/********************************************
 * End hookes part here
*********************************************/

Enjoy Code! | Raghunath Blog

View original

Why use a Child Theme in WordPress ?

Tags

,

wordpress-child-themes

  • If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.
  • It can speed up development time.
  • It’s a great way to get started if you are just learning WordPress theme development.

Create custom navigation menu in WordPress

Tags

, ,

Custom-Navigation-Menus-WordPress-Themes

Register Menus

Firstly, in your theme’s functions.php, you need to write a function to register the names of your menus. (This is how they will appear in the Appearance -> Menus admin screen.) As an example, this menu would appear in the “Theme Locations” box as “Header Menu”.

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

And this would make two menu options appear, header menu and extra menu -

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

Display Menus on Theme

Once you’ve done that, your theme will be almost ready. The last preparation step is to tell the theme where you want the menus to show up. You do this in the relevant theme file. So, for example, we might want our header menu to be in header.php. So open up that file in the theme editor, and decide where you want to put your menu. The code to use here is wp_nav_menu which we will need once for each menu location. So, add this code -

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

All you need to ensure is that the theme_location points to the name you provided for your menu in the functions.php code above. (Note that it’s the header-menu being used here rather than Header Menu without a hyphen. header-menu is the name that the code understands, Header Menu is the human-readable version that you see in the admin page.)

To complete the code, you can put your extra menu someplace else. Maybe you want a menu on one of your pages, for example, and you might even want it to be jazzed up a little with a containing DIV of a certain class -

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );

So you’d put the above into your Page template, and not only would the menu show up wherever you put it, it’d be styled as my_extra_menu_class so that you can work with that in CSS.

Display Blog Posts on any Page (with navigation)

Tags

,

Create a blank page template named “page-blog.php” and include the following code:

<?php 
/*
	Template Name: Blog
*/
?>
<?php get_header(); ?>

	<article>

		<?php // Display blog posts on any page @ http://m0n.co/l
		$temp = $wp_query; $wp_query= null;
		$wp_query = new WP_Query(); $wp_query->query('showposts=5' . '&paged='.$paged);
		while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

		<h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
		<?php the_excerpt(); ?>

		<?php endwhile; ?>

		<?php if ($paged > 1) { ?>

		<nav id="nav-posts">
			<div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
			<div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
		</nav>

		<?php } else { ?>

		<nav id="nav-posts">
			<div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
		</nav>

		<?php } ?>

		<?php wp_reset_postdata(); ?>

	</article>

<?php get_footer(); ?>

How to stop WordPress asking for ftp details

Originally posted on PHP Technology Tutorials:

You can install plugin and theme easily from wordpress backend. But sometime due to folder permission WordPress may ask ftp details to install plugins in site. You can prevent asking ftp details just open wp-config.php file from the root folder of wordpress installation then write following php code
define('FS_METHOD', 'direct');

save the file to apply changes. Now you can install plugin or themes in wordpress backend.

View original

Follow

Get every new post delivered to your Inbox.

Join 486 other followers