Here are some of the most used code snippets for WordPress.
You can read about WordPress in my free e-book: WordPress in the Classroom.
Read my new book about WordPress REST API. The book is available as an e-book or printed, click here.
- Themes: ../wp_content/themes/yourThemeName
- Plugins: ../wp_content/plugins/yourPluginName
The loop will getx the content from the WordPress database to a webpage. Here is a relatively simple loop. Here is a very simple loop from https://developer.wordpress.org/themes/basics/the-loop/
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
endwhile;
else:
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>
You may want to format the loop. For instance with the date or the name of the author. In order to get this king of information you can use some of the template tags in the loop:
Here are a few:
the_author();
the_date();
previous_post_link()
next_post_link()
Often the building blocks are found in three files:
- header.php - whatever is in the head, header and so on
- footer.php - whatever comes after the loop or content has ended
- sidebar.php - asides, menus, widget areas and similar
The content of these partial files are imported like this:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You can add theme menu areas wherever you need them in your design.
In function.php find the place where the menus are defined.
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
In a childtheme you just add a menu as you see it above. Do it in the functions.php in the childtheme folder. Not in the parent theme.
Often menu areas are places in the header, sidebar or footer. But you can place the menu anywhere in your theme files. Just add this code in a relevant spot:
<?php wp_nav_menu( array( 'theme_location' => 'extra-menu' ) ); ?>
Now the menu area should be visible in your Dashboard. Attach one of your menus to the new area.
The first time you try to set the source to images in your images/myImage.jpg folder no image will show up. Here is the reason:
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/yourImage.png">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/yourImage.png">
or
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" width="" height="" alt="" />
For more information see this page in the Codex.
Add your script or css file along these lines in functions.php:
/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_theme_name_scripts() {
// below a css file
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
// below a script
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
PS: In a Childtheme add the code to the functions.php in the child theme folder
Add this line before wp_head() in header.php - or another relevant file:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
See this sample.
In order to avoid a conflict you should run jQuery in protected mode. Do it like this:
<script>
/**
* jQuery in protected mode
*/
( function( $ ) {
// hello world variant
$('h1').text('I\'m a poor lonesome cowboy');
// try: animate.css
// @url: https://github.com/daneden/animate.css
$('h1').hover( function(){
$(this).addClass('animated swing');
} );
} )( jQuery ); // jquery end
</script>
Here you have several options.
- In the Dashboard you can select at page and use that page as your front page.
- As an alternative you can create a file from scratch. If you name your file front-page.php WordPress will present whatever is in that page as the frontpage.
Tip: often themes has a page called page.php. Copy the file and save it as front-page.php. Then modify it according to your will.
<?php get_header(); ?>
<div id="text" class="yourClass">
<?php get_template_part('loop'); // import: loop.php ?>
</div>
<!-- /page.php -->
<?php get_footer(); ?>
WordPress use PHP in order to get pages or posts from the database. Save your loop in a separate file loop.php - the content of this file is:
<?php
/**
* File: loop.php
*/
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
the_title('<h3 class="title">','</h3>');
echo '<div class="content">';
the_content();
echo '</div>';
//
} // end while
} // end if
?>
In functions.php
add_action( 'widgets_init', 'my_widget' ); // add the widget
function my_widget() {
register_sidebar( array(
'name' => __( 'My Extra Sidebar' ),
'id' => 'sidebar-2',
'before_widget' => '<div class="sidebar-2">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
In the page / post file
<?php dynamic_sidebar('sidebar-2'); ?>
More about widgets
More about widget ares from the Codex
Try Underscores _S - https://underscores.me/
- Give your theme a name.
- Download your theme. It's a zip file.
- Install the theme on your server.
See the introduction to _S in this video.
Add a name for your tamplate before the oridnary html:
<?php /* Template Name: Page Full Width */ ?>
Save the template in your child theme folder. Then go to the Dashboard, and create a page and use the template.