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...
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>
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.
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>