Karanikolas Kostantinos logiblue

## header.php
In the header file at the body tag write this single line in order to dynamicly produce diffferent classes for each page that is rendered


  <body <?php body_class(); ?>>

## Query ACF IMAGES

In custom field we set that we need the image_id and the we retrieve it from the code.
			<div class="about-us-images">
           		 <?php if(get_field('image_1')){ ?>
            			<div class="photo">
                        	<?php $image_id= get_field('image_1'); ?>
                        <?php echo wp_get_attachment_image($image_id, 'medium',false ,array('class'=> 'polaroid-class')) ?>  //****ANALYZE BELLOW
               			 </div>
                 <?php } ?>
            </div>

## Copyrights PHP
        <p class="copyrights">All rights reserved <?php echo date('Y') ?></p>

## Add Thumnbail Support -WP
        function lapizzeria_setup(){
            add_theme_support('post-thumbnails');
        }
        add_action('after_setup_theme', 'lapizzeria_setup' );


and inside the page just call it


  <?php the_post_thumbnail(); ?>

## Import jQuery in Wordpress
<?php
            //Add javascript files
            wp_register_script('script', get_template_directory_uri() . './js/scripts.js', array('jquery'), '1.0.0',true);


            wp_enqueue_script('jquery');
            wp_enqueue_script('script');


?>

## Import Style.css in Wordpress
<?php

        function custom_styles(){
            //Adding Stylesheets
          wp_register_style('style', get_template_directory_uri() . './style.css', array('normalize'), '1.0');
          wp_enqueue_style('style');

        }

        add_action('wp_enqueue_scripts','custom_styles');

## Custom Logo Import - Wordpress
    <a href="<?php echo home_url('/')?>">
            <img src="<?php echo get_template_directory_uri() ?>/img/logo.svg " alt="logo" class="logo">
            </a>

## Theme Description WordPress
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready

## Liveserver - SASS
npm install concurrently --save-dev
npm install node-sass --save-dev
npm install -g live-server


PACKAGE.JSON

 "scripts": {
    "serve": "live-server",
    "sass": "node-sass sass/main.scss css/style.css -w",

## CSS ANIMATION - SIMPLE
.element-for-animation{
    animation-name: moveΙnLeft;
    animation-duration: 3s;
}


@keyframes moveΙnLeft{
    0%{
        opacity: 0;

	In custom field we set that we need the image_id and the we retrieve it from the code.
	<div class="about-us-images">
	<?php if(get_field('image_1')){ ?>
	<div class="photo">
	<?php $image_id= get_field('image_1'); ?>
	<?php echo wp_get_attachment_image($image_id, 'medium',false ,array('class'=> 'polaroid-class')) ?> //****ANALYZE BELLOW
	</div>
	<?php } ?>
	</div>
	function lapizzeria_setup(){
	add_theme_support('post-thumbnails');
	}
	add_action('after_setup_theme', 'lapizzeria_setup' );


	and inside the page just call it


	<?php the_post_thumbnail(); ?>
	<?php
	//Add javascript files
	wp_register_script('script', get_template_directory_uri() . './js/scripts.js', array('jquery'), '1.0.0',true);


	wp_enqueue_script('jquery');
	wp_enqueue_script('script');


	?>
	<?php

	function custom_styles(){
	//Adding Stylesheets
	wp_register_style('style', get_template_directory_uri() . './style.css', array('normalize'), '1.0');
	wp_enqueue_style('style');

	}

	add_action('wp_enqueue_scripts','custom_styles');
	<a href="<?php echo home_url('/')?>">
	<img src="<?php echo get_template_directory_uri() ?>/img/logo.svg " alt="logo" class="logo">
	</a>
	/*
	Theme Name: Twenty Thirteen
	Theme URI: http://wordpress.org/themes/twentythirteen
	Author: the WordPress team
	Author URI: http://wordpress.org/
	Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
	Version: 1.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
	npm install concurrently --save-dev
	npm install node-sass --save-dev
	npm install -g live-server


	PACKAGE.JSON

	"scripts": {
	"serve": "live-server",
	"sass": "node-sass sass/main.scss css/style.css -w",
	.element-for-animation{
	animation-name: moveΙnLeft;
	animation-duration: 3s;
	}



	@keyframes moveΙnLeft{
	0%{
	opacity: 0;