Where's the HTML in PHP template files? - php

So I am new to web development, and want to begin developing themes for Wordpress.
I am confident in my HTML and CSS skills but I am somewhat stuck on understanding how PHP works specifically for Wordpress.
To get straight to the point, when I download a basic theme from wordpress.org and look inside all of the template files, I don't see any HTML code.
I am familiar with the get function in php and so on, but watching videos/tutorials on theme development has confused me so much.
For example, most of all the tutorials I have watched shows someone copy and pasting HTML code from their static web templates directly into the PHP files. (index.php and so on). It works and I am told that is a correct method of doing it, but I just don't understand why I don't can't see HTML code in wordpress themes I download.
Is there a way of not showing the HTML?
Thanks you in advance...

The html code is inside the PHP file. there are various way to write HTML inside a PHP file. For example
<?php
echo "<html><h1>header</h1></html>";
?>
Save the above code as PHP and run it on the server You will get html output from PHP file.
You can also run it in the following way
<?php
//your first php code here//
?>
<html>
my html here
</htm>
<?php
//your second php code here//
?>
It is the right way to write html code inside a php file. you can't run php code on a html file so the html code should be written on the PHP file.
========question answer==========
this is the theme you have mentioned : https://github.com/WordPress/twentyseventeen
check the index.php file
https://github.com/WordPress/twentyseventeen/blob/master/index.php
you will see
get_header(); ?>
<div class="wrap">
<?php if ( is_home() && ! is_front_page() ) : ?>
<header class="page-header">
<h1 class="page-title"><?php single_post_title(); ?></h1>
</header>
this type of coding there.
<h1 class="page-title"><?php single_post_title(); ?></h1>
Look carefully the line. <h1 class="page-title"> it is a html tag ( it is html code )
You can download the theme on your pc and open the index.php file and others file. you will see html code but it is mixed with PHP.

I would recommend you install WAMP on your localhost.
There are PHP files for Wordpress that alter how it functions but I would not recommend you edit these unless you know what you are doing.
If you install Wordpress on WAMP you will have access to all this and can also set up specific projects on WAMP to develop and test your themes.
There is a good walk through here on setting it up https://premium.wpmudev.org/blog/how-to-set-up-wordpress-locally-for-pcwindows-with-wamp/?utm_expid=3606929-106.UePdqd0XSL687behGg-9FA.0&utm_referrer=https%3A%2F%2Fwww.google.co.uk%2F

Basically what you'll do with Wordpress templates is use HTML to hold the info you get from PHP, such as the page/post title, content, tags, categories, etc. You could do something like
<h1 class="title-class"><?php get_the_title();?></h1>

No there is no way to hide html and there is no point to do that either.
But if you look carefully in wp-content -> themes folder you will see all themes directories.
there you can find html "code". In some case you won't find any .html files, may be.
Reason for it because wordpress theme's all pages contains atleast one dynamic part like header. so to make html page dynamic you need to set .php extension for files instead of .html or .htm.
You will find less html and more php sometimes because mostly wordpress themes coded with reusable snippets and functions who generates some code blocks.
But there is html code blended with php code inside .php files:
for example:
<html>
<head>
<title><?php get_the_title(); ?></title>
<?php get_custom_css_files(); ?>
</head>
<body class="container">
<div class="col-md-8 text-center">
<?php foreach($posts as $post) {
<div class="title"><?php echo post['title']; ?></div>
<div class="desc"><?php echo post['text']; ?></div>
<?php } ?>
</body>
</html>

Related

Where to start when building a website from scratch using index.php

I have decided to build my site website from scratch, rather than using Wordpress, Magento or a bootstrap template.
I'm looking for a good guide to do so, Code Academy and w3schools are good for learning specific elements of HTML and CSS but I'm looking for a good guide for how to structure my site.
I am playing around with creating an index.php using e.g. to include all element of the page to make creating the individual pages of my site clean and more efficient that including the include for header and footer on each page.
One issue I am having is that I am struggling to understand how to include the different pages within the index.php. I have searched for this but I obviously am not finding the correct words to search for this as I'm struggling to find a decent answer. I think I need something along the lines of a wildcard so that I can say to call all html files within my pages folder so that all pages are using my index.php template.
Below is my index.php to help explain. Thanks in advance and apologies if this question is answered elsewhere on the site, I searched but did not find anyone else answering the same question!
<!DOCTYPE html>
<html>
<php include "head.html" ?>
<body>
<div class="container">
<php include "navigation.html" ?>
<div class="wrapper">
<php include pages/*.html ?>
</div>
</div>
</body>
<php include "footer.html" ?>
</html>
It looks to me like you are almost there. I am not sure of the syntax you are using works, but the code below is used in some of my sites to include a header:
<?php include('includes/header.php'); ?>
This means include the code in the file 'header.php' that is in the folder 'includes', which is on the same level as the file that is calling the code.
The result would be that the 2 files are merged in to one when the page is loaded, with the code from header.php being inserted in place of the line
<?php include('includes/header.php'); ?>
You need to pass variables in URL e.g index.php?page=home and then in your index.php file you shoud get that variable $page = $_GET['page']. Now in $page you have name of the file to include
<?php include($page.'.html') ?>
For now, I skipped security issues of that solution.

Edit Entire Site With One Code/Page?

As the title says, is there a way to edit a portion of an entire site with one code or page? For example, if the bottom of every page of a site said "2014", is there a way in html or css to change every page of the site to say "2015" without having to do so manually to each individual page?
I understand this can be done in php, and I understand that a server can be configured for html to read php code. Are there any flaws to this method (perhaps the html page will load slower if it's configured to read php)? Are there any other ways to do this besides using php code?
Performance Concern:
You will not see any performance difference between having PHP render basic HTML and typing the HTML yourself.
The performance impact is only noticeable on HUGE PHP applications. And even then, it's still very fast.
What you ask is common practice. This is an example of what you can do.
Make a file called index.php and put this inside:
<!doctype html>
<html>
<head>
<!--Your head stuff-->
</head>
<body>
<header><?php require_once 'header.html' ?></header>
<section class="main_content"><h2>My Page!</h2></section>
<footer><?php require_once 'footer.html' ?></footer>
</body>
</html>
Make a file called header.html and put this inside:
<h2>This is my header</h2>
Make a file called footer.html and put this inside:
<h2>This is my footer</h2>
As you can see, the practice is to use any of the built-in PHP functions to include other files in your PHP file:
include 'some_file.php';
require 'some_file.php';
require_once 'some_file.php';
I think Dreamweaver can do this, with its find and replace entire website property
Assuming all pages have a CSS file in common, you can use the content CSS property of a pseudo element like before or after to control content across all pages.
For example:
#footer:before {content:'2015';}
<div id="footer"></div>

Including a body file (that is much like a platform MySQL / PHP / JS) into a wordpress template

I’ve built an SEO platform that Works with MySQL database and outputs / Inputs to a PHP table.
I’ve made a template in wordpress that has the header and footer from the original theme, and left the body empty so I can call the application / platform.
<?php
/*
Template name: Keywords
*/
?>
<?php get_header(); ?>
<?php
include('/body_call/index.php');
?>
<?php get_footer(); ?>
I’ve tried to place the folder with all the files (body_call) in several places and called the index.php folder hoping that it fills the center of the template.
The index folder is something like this:
<html>
<div id="container">
<body id="body">
<?php include('body_call/body.php'); ?>
</body>
</div>
</html>
I know the problem is the calling part because the platform works well if it’s by its self…
And it's probably some worpress specific code that I'm missing.
Can anyone help?
Thanks,
Miguel
When you include a file from another file you are actually just including it in the file. That means you are actually in first file folder and not second. So if second file needs to include a file wich is stored somewhere else it has to be included by navigating from first file folder to it's actual path. It sounds a little tricky. So to nvigate to upper level if need you should use ../.
Anyway to avoid any confusion i would suggest to use absolute path so where ever the file is called from it will always be able to charge any file from anywhere.
Have a look at include documentation
an example could be
include(/home/user/body_call/index.php');

Custom PHP code won't show up in Wordpress theme?

This has me absolute stumped!
I have a small snippet of PHP code, <?php include('/includes/stuff.php'); ?>. All it does is output an image.
If I put this in the WP themes header.php or index.php files, it will never show up.
Here is the actual code in my the themes index.php file:
<img src="<?php bloginfo('stylesheet_directory');?>/images/content-top.gif" alt="content top" class="content-wrap" />
<?php include('/includes/stuff.php'); ?> TEST TEST TEST //this is the custom code
<div id="content">
But when it actually runs, it looks like:
<img src="http://www.bavarianblue.com/wp-content/themes/Polished/images/content-top.gif" alt="content top" class="content-wrap" />
<div id="content">
It just ignores my code entirely. No errors, no nothing.
The only time I could get it to work is if I included it in an already included file. For instance, in header.php there is an include for a features.php. If I included it there, it worked fine. But I don't want it there, I need it in index.php.
Is there some kind of configuration in wordpress where is needs to know all includes or something? I confirmed that my files are being modified (on the FTP).
EDIT
I just tried get_template_part(), as described on the wordpress codex, to no avail. Here is the snippet I tried:
<?php get_template_part( 'includes/stuff' ); ?>
Jared
Try the full path to stuff.php. Also, your host might be running php in safe mode, so check your file permissions.
Another way to include php functions in WordPress is via the functions.php file in your theme:
http://codex.wordpress.org/Theme_Development#Functions_File

Dynamic header with PHP?

I know this is a basic PHP question, and I'm trying to learn the stuff. I very familiar with HTML, CSS and familiar with the CONCEPT of PHP, but not with specifics.
I have always partnered with a back end developer to accomplish this stuff and to set up wordpress sites, etc.
I'm building a very basic four or five page website (a showcase for the client's custom fishing rods: http://www.tuscaroratackle.com/index2.php). I want to call the page header (as in logo, navigation, etc., not as in the head element) dynamically from a php file, and same thing with the footer, so I don't have to rewrite all the markup on every page for these bits.
I don't intend to use a database for this site, I was just thinking I could call those two bits from another file, as you would in a wordpress setup with the header.php in the wp-content directory.
Is there an easy explanation on how to do this? (I get the basics, just looking for help on the more specific PHP calls that need to be made)
Or, if this is not an answer somebody could easy give, can you point me to a good resource to research it further?
Thx
You betcha - include and require -
using include
in your page:
<body>
<?php include 'header.php'; ?>
in your header.php
<div id="header">
<!-- content -->
<?php echo "run php stuff too"; ?>
</div>
would result in:
<body>
<div id="header">
<!-- content -->
run php stuff too
</div>
You should put the header html code in some file such as header.php and then include it with php like:
include ('header.php');
You should specify the correct path there, for example, if you put the header.php file in includes folder, you can include it like:
include ('inclues/header.php');
More Info:
http://php.net/include
Put in a separate file and use include, require or require_once.
Eg
require_once("path/to/myfile.php");
Look into PHP includes.
The way I normally do it is to create a file called includes.php with two functions header() and footer(), then call them on each page like such:
includes.php:
<?php
function header(){
echo '<div id="header">Welcome</div>';
}
function footer(){
echo '<div id="footer">Goodbye</div>';
}
?>
index.php:
<?php
include_once('includes.php');
header();
echo '<div id="content">Main page body</div>';
footer();
?>

Categories