- \n
- PHP can generate dynamic page content.<\/li>\n
- PHP can add, delete, and modify data in your database.<\/li>\n
- PHP can be used to control user-access (logins).<\/li>\n
- PHP can collect form data.<\/li>\n
- PHP works completely behind the scenes.<\/li>\n<\/ul>\n
How PHP is used in WordPress<\/h3>\n
PHP is mostly used for getting and putting content to\/from the WordPress database. The information stored in the database includes such things as posts, pages, comments and users. PHP functions can be written to fetch and display content from the database (such as a blog post).<\/p>\n
Did you know? If you use the search box at the top of a WordPress web page, PHP is being used to give you the search results.<\/p>\n
WordPress has a lot of PHP files. A PHP file ends with the extension .php.<\/h4>\n
Some PHP files contain only PHP code and some contain a combination of PHP and HTML code.<\/p>\n
- \n
- WordPress theme files <\/strong>contain a combination of PHP and HTML.<\/li>\n
- WordPress plugin files<\/strong> contain primarily PHP code. They may have some HTML, CSS and JavaScript too.<\/li>\n<\/ul>\n
You can learn more about PHP by studying the files in a simple WordPress theme. You will become more familiar with the syntax.<\/p>\n
![\"WordPress](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/wordpress-theme-with-php-3.jpg\")
<\/p>\nNAKED WORDPRESS<\/a> is a straightforward and well-commented theme. You can download it to your computer and look at the files. In it, you’ll find a functions.php file. We will discuss that in a minute.<\/p>\n
How to recognize PHP (syntax)<\/h3>\n
- \n
- A PHP script starts with <?php <\/strong>and ends with ?><\/strong><\/li>\n
- PHP code goes inside PHP tags<\/li>\n
- A PHP script can be placed anywhere in a web page.<\/li>\n
- A PHP variable starts with the $<\/strong> sign followed by the name of the variable (variable names are case-sensitive).<\/li>\n<\/ul>\n
<?php<\/strong>
\n echo “This is my page.”;<\/strong>
\n ?><\/strong><\/div>\nAll PHP code goes inside the PHP tags.<\/p>\n
<?php \/\/ PHP code is placed between the tags. ?><\/strong><\/div>\nPHP Comments<\/h4>\n
![\"PHP](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/php-script-1.png\")
<\/p>\n\/\/ This is a single line comment. It’s for a brief comment.<\/p>\n
The multi-line PHP comment begins with <\/strong>\/* and ends with *\/ . It can be used to write multiple line comments.<\/p>\n
PHP Script Example<\/strong><\/p>\n
Copyright <?php echo date(‘Y’); ?><\/strong> Crimson Designs.<\/div>\nThis is a simple way to show the dynamic copyright date in your website. Put this code in a PHP file to show the current year. (NOTE: The file you put it in must end in .php<\/strong>)<\/p>\n
You can place your PHP code directly into your child theme\u2019s template files (but not in a cascading style sheet file. That is strictly for CSS).<\/p>\n
Code Snippets<\/h4>\n
You may come across code snippets online that do handy things for your WordPress website. You\u2019ll be told to put the code snippet into your functions.php<\/strong> file. (You\u2019ll want to create that file in a child theme and add the code snippet there.)<\/p>\n
<?php
\n<\/strong>echo “I\u2019m learning php.”;
\n?><\/strong><\/div>\nIf you place the above PHP code in your child theme\u2019s functions.php<\/strong>, it will output the text in every page of your site. All your website visitors will discover that you\u2019re learning PHP. You can be more specific about when and where (on which pages) you want your announcement to be displayed by using PHP functions and hooks. (We’ll discuss the functions.php file in a minute.)<\/p>\n
![\"simple](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/simple-php-script-1.png\")
<\/p>\nSee: Beginners Guide To PHP in WordPress<\/a><\/p>\n
PHP Files\/Pages<\/h4>\n
PHP files are similar to HTML files, but PHP files can include both HTML and PHP. A user visiting a web page made in PHP cannot view the PHP code, only the output generated by the code.<\/p>\n
When an online visitor accesses a PHP page, the Web browser only gets sent the HTML code. The Web server has already processed the PHP code in the background. In a PHP file, the .php<\/strong> extension is important. It tells the Web server that the page may include PHP code.<\/p>\n
PHP compared to HTML<\/strong><\/h4>\n
- \n
- PHP is a scripting language; HTML is a markup language.<\/li>\n
- HTML cannot perform computations like 1 + 1 = 2.<\/li>\n
- HTML is very easy and forgiving of mistakes while PHP isn\u2019t.<\/li>\n
- HTML files are static. They are the same every time they are viewed. PHP files are dynamic. The output might not always be the same.<\/li>\n<\/ul>\n
Learn more about HTML and CSS: WordPress under the Hood: Beginner HTML & CSS.<\/a><\/p>\n
PHP Include Files<\/h4>\n
PHP allows you to include the contents of one file into another. (This makes designing web pages much easier and more efficient.) PHP functions such as include() or the WordPress function get_template_part() make it possible to include page templates in a web page.<\/p>\n
![\"PHP](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/php-include-file.png\")
<\/p>\nA full web page on your WordPress site contains code for the header, the footer, the sidebar etc.. It’s like putting the pieces of a puzzle together. These files will be included in the page.<\/p>\n
- \n
- the header will be in a file called header.php<\/strong><\/li>\n
- the sidebar(s) is normally in sidebar.php<\/strong><\/li>\n
- the footer is normally in footer.php<\/strong><\/li>\n<\/ul>\n
These are template files.<\/p>\n
![\"WordPress](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/wordpress-template-files.jpg\")
<\/p>\nWhat is a function?<\/h3>\n
A function is simply a set of program statements which perform a specific task. A PHP function can be \u201ccalled\u201d or executed. You can define functions you wish to re-use in your theme\u2019s template files.<\/p>\n
Where exactly is the functions.php file?<\/h4>\n
A theme\u2019s functions.php file is located in your theme’s folder in the \/wp-content\/ folder. (NOTE: It is NOT<\/strong> in the \/wp-includes\/ folder. Do not even look in that folder. It should not be touched.)<\/p>\n
You can download WordPress<\/a> to your computer in a ZIP file, then open it to get a look at all the files. Look for the wp-content<\/strong> folder. Open it. Then find the the folder called “themes.” Inside that folder, you will see the folders of some default themes. Each one has a functions.php file inside with functions in it.<\/p>\n
PHP Function Example:<\/h4>\n
function twentyseventeen_setup() {<\/strong><\/p>\n
\/* Each function may contain a lot of code. Each function will end with a curly brace. This is a multi-line comment in a function that doesn’t really do anything right now. *\/<\/p>\n
}<\/strong><\/p>\n
Inside your functions.php file<\/h3>\n
If you look at a functions.php file, you will notice that it starts with:<\/p>\n
<?php<\/strong><\/p>\n
The closing PHP tag ?><\/strong> is optional at the end of the file. So if you don\u2019t see the closing PHP tag<\/strong> at the bottom of the file, that\u2019s okay. If you\u2019re creating a child functions.php page, you will need to type: <?php<\/strong> at the very top before you add any functions or code snippets.<\/p>\n
Your functions.php<\/strong> file is not the place to put custom CSS code. This file is for PHP code snippets and functions.<\/p>\n
![\"WordPress](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/wordpress-functions-file.png\")
<\/p>\nNOTE: If you’re comfortable modifying your functions.php file, you are capable of creating a simple plugin. The code you paste in your functions.php can most likely be used in a plugin.<\/p>\n
Here are some PHP functions that can be added to a functions.php page.<\/p>\n
WordPress functions.php Template with 15 Essential Custom Functions<\/a><\/p>\n
Here\u2019s a tutorial for writing a simple WordPress plugin:<\/p>\n
Writing a Simple WordPress Plugin, Beginner Tutorial<\/a><\/p>\n
You can copy and paste WordPress PHP functions, at first, once you figure out where to put them. With a little effort, you\u2019ll start to recognize them. Then you\u2019ll begin to understand them, and maybe someday write your own.<\/p>\n
- \n
- Make sure you wait until a function is \u2018over\u2019 before you insert your code. Remember, a closing curly brace }<\/strong> designates the end of a function.<\/li>\n
- Don\u2019t mess with existing functions in a parent theme. Put functions in a child theme.<\/li>\n
- Be prepared. Even a tiny mistake in your functions.php<\/strong> page can break your WordPress site and make it inaccessible.<\/li>\n<\/ul>\n
Adding Custom Code Snippets in WordPress<\/h4>\n
The Code Snippets plugin<\/a> is a great way to add custom code to a WordPress site. It gives you a safer way to add chunks of code<\/strong> to the functions.php<\/a> file. Your code snippets can all be managed from the Manage screen of the plugin. You can easily activate and deactivate them.<\/p>\n
NOTE: ALWAYS back up your WordPress site before making any changes to the code.<\/p>\n
Next up: Beginner JavaScript<\/h4>\n
- \n
- PART 1: PHP in WordPress<\/a><\/li>\n
- PART 2: JavaScript in WordPress<\/a><\/li>\n<\/ul>\n
![\"WordPress](\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/wordpress-beginner-php-js.gif\")
<\/p>\n<\/p>\n
PART 2: JavaScript<\/h2>\n
Why do I need to learn JavaScript if I manage a WordPress site?<\/h3>\n
- \n
- By learning the basics of JavaScript<\/strong> and PHP<\/strong>, you can go beyond customizing the appearance of your WordPress website. You can modify the way it works. Even if you just take the first step: being able to recognize JavaScript and PHP (and tell them apart), you will be able to better manage your site.<\/li>\n
- You may need to copy and paste some JavaScript or PHP code into your WordPress site. But, JavaScript and PHP are not as forgiving as HTML<\/strong> and CSS.<\/strong> Sometimes, just forgetting to include something as simple as a semicolon (;)<\/strong> can mess up the code and lead to hours of troubleshooting.<\/li>\n
- It\u2019s good to know the basics. It\u2019s good to recognize the syntax. It\u2019s great to be able to write a simple script and know what to do with it in your WordPress site.<\/li>\n
- JavaScript is going to become a major component in future WordPress sites. You\u2019ll learn more about that in a minute. <\/em><\/li>\n<\/ol>\n
![\"JavaScript](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/javascript-in-wordpress.gif\")
<\/p>\nWhat is JavaScript (JS)?<\/h3>\n
- \n
- JavaScript (JS) is a scripting language that can run in your browser.<\/li>\n
- JavaScript allows immediate feedback to visitors.<\/li>\n
- It helps make web pages more dynamic and interactive.<\/li>\n
- You can use JavaScript for calculations. HTML can’t do that.<\/li>\n
- It is commonly found embedded in HTML code.<\/li>\n
- JavaScript has often been used to create web animations such as image sliders. But, you can also build entire sites with it.<\/li>\n<\/ul>\n
Adding JavaScript into an HTML Document<\/h3>\n
You can add JavaScript code in an HTML document by using the tag
<script><\/code> that wraps around JavaScript code.<\/p>\nJavaScript Example:<\/strong><\/p>\n
<script><\/strong>
\nwindow.alert(5 + 6);
\n<\/script><\/strong><\/div>\n(This script can be placed in an HTML page or a PHP page.)<\/p>\n
![\"JavaScripts](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/javascript-script-tag.gif\")
<\/p>\nYou can place a whole bunch of JavaScript scripts in an HTML document, if you really want to. Scripts can be placed in the the <head><\/strong>, the <body><\/strong> or <footer><\/strong> section of a web page.<\/p>\n
Scripts that are small can be included in an HTML file.<\/p>\n
The most common way to include JavaScript is to put JavaScript scripts in a separate file and link to them from a web page. JavaScript files end with the extension .js. <\/strong><\/p>\n
You can add script tags in your HTML document which point to your javascript files.<\/p>\n
Example Script Tags Pointing to an External .JS File<\/strong><\/p>\n
<script type=”text\/javascript” src=”js\/script.js”><\/script><\/div>\nJavaScript Compared to PHP<\/h3>\n
- \n
- Your web browser executes JavaScript code. Your browser does all the processing.<\/li>\n
- PHP runs on the server where your website is stored. The server computer does all PHP processing and it sends the result to your browser.<\/li>\n
- It is not hard to learn JavaScript or PHP, but it\u2019s harder than learning HTML and CSS.<\/li>\n
- All the arithmetic operators are the same. Loops, arithmetic logic, variables and functions and assignments are all terms used for both languages.<\/li>\n
- The syntax signs are one of the major differences between JS and PHP.<\/li>\n
- JavaScript and PHP are both case-sensitive.<\/a><\/li>\n<\/ul>\n
![\"JavaScript](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/javascript-versus-php.gif\")
<\/p>\nContact Forms: Example of how HTML, CSS, JavaScript and PHP are commonly used together<\/h4>\n
A contact form can be created with HTML. Then CSS can be used to make it look nice. Form validation can be done on the client-side (web browser) and on the server-side (PHP). Client-side validation can be done with JavaScript and also HTML5 (the newest version of HTML). The form can then be sent with PHP.<\/p>\n
How to recognize JavaScript (syntax) <\/em><\/h3>\n
- \n
- JavaScript statements are separated by semicolons (;)<\/strong>.<\/li>\n
- JavaScript uses the var <\/strong>keyword to declare variables.<\/strong><\/li>\n
- The var<\/strong> keyword tells the browser to create variables.<\/li>\n
- An equal sign <\/strong>is used to assign values<\/strong> to variables.<\/li>\n<\/ul>\n
![\"JavaScript](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/javascript-on-computer-1.jpg\")
<\/p>\nHyphens, camelCase and Underscores<\/strong><\/p>\n
- \n
- The common convention around naming variables in JavaScript is to use camelCase<\/a>, (without any dashes or underscores). camelCase consists of combining words while removing spaces, capitalizing the beginning of each new word except for the initial word.<\/li>\n
- Hyphens are not allowed in JavaScript names.<\/li>\n
- On the other hand, hyphens are commonly used in CSS. Underscores are often used in PHP (ex. date_of_birth), especially in SQL databases.<\/li>\n<\/ul>\n
![\"camelCase](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/camelcase-in-javascript.gif\")
<\/p>\nAdding JavaScript to Your WordPress Site<\/h3>\n
Don\u2019t try to add JavaScript in your VISUAL\/TEXT editor. WordPress by default strips out any code in posts and pages that may be considered malicious. It may also add <p><\/strong> tags around your <script><\/strong> tags in the TEXT editor, preventing your script from working.<\/p>\n
JavaScript and Page Speed<\/h3>\n
NOTE: Adding JavaScript (and Plugins) to your website can affect your site\u2019s speed. Javascript that is located towards the top of an HTML document can block page rendering, slowing down a web page. In order to defer parsing of Javascript, it is best to call these scripts at the end of an HTML document and link to your external JavaScript files in the FOOTER sections of your pages.<\/p>\n
![\"JavaScript](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/javascript-and-page-speed-1.gif\")
<\/p>\nCombine and Minify JavaScript files<\/strong><\/p>\n
Having “multiple” JavaScript files can also hurt a website\u2019s load time. These scripts can often be combined for better website performance. JavaScript can be compressed (minified) to speed up page loading time. Minification <\/strong>removes <\/strong>all the white space from the code before serving it to visitors. <\/em><\/p>\n
Helpful Links:<\/strong><\/p>\n
- \n
- How to Eliminate Render-Blocking JavaScript and CSS<\/a><\/li>\n
- JavaScript for WordPress Developers: Learning the Basics<\/a><\/li>\n<\/ul>\n
JavaScript and the Future of WordPress<\/h3>\n
JavaScript will play a key role in the future of WordPress. You may have heard about or seen the new interface, Calypso.<\/strong> ( It\u2019s currently in use on WordPress.com.)<\/p>\n
- \n
- Unlike the traditional WordPress Admin interface, Calypso uses JavaScript.<\/li>\n
- Calypso provides a more streamlined way to create posts and pages.<\/li>\n
- Rather than connecting directly to the MySQL database, Calypso manages content over the web using a special language known as a REST API. It eliminates the need to login to the WordPress admin section (dashboard) from a browser to manage content. In the future, it may eliminate the need for the dashboard altogether.<\/li>\n<\/ul>\n
If you aren\u2019t super comfortable with JavaScript, it would be a great time to start learning.<\/p>\n
Visit: JavaScript For Cats.<\/a><\/p>\n
It’s a helpful tutorial for JavaScript beginners, not for real cats.<\/p>\n
- \n
- PART 1: PHP in WordPress<\/a><\/li>\n
- PART 2: JavaScript in WordPress<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
By learning the basics of JavaScript and PHP, you can go beyond customizing the appearance of your website. You can modify the way it works. Even if you just take the first step: being able to recognize JavaScript and PHP (and tell them apart), you will be able to better manage your site.<\/p>\n","protected":false},"author":1,"featured_media":7676,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[115,164,287,288,279,281],"class_list":{"0":"post-4323","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-and-css","8":"category-wordpress","9":"tag-javascript","10":"tag-php","11":"tag-php-function","12":"tag-template-files","13":"tag-wordpress-beginner","14":"tag-wordpress-function","15":"cat-5-id","16":"cat-10-id","17":"has_thumb"},"_links":{"self":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/4323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=4323"}],"version-history":[{"count":3,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/4323\/revisions"}],"predecessor-version":[{"id":7732,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/4323\/revisions\/7732"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media\/7676"}],"wp:attachment":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=4323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=4323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=4323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- PART 2: JavaScript in WordPress<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
- PART 1: PHP in WordPress<\/a><\/li>\n
- JavaScript for WordPress Developers: Learning the Basics<\/a><\/li>\n<\/ul>\n
- JavaScript uses the var <\/strong>keyword to declare variables.<\/strong><\/li>\n
- JavaScript statements are separated by semicolons (;)<\/strong>.<\/li>\n
- You may need to copy and paste some JavaScript or PHP code into your WordPress site. But, JavaScript and PHP are not as forgiving as HTML<\/strong> and CSS.<\/strong> Sometimes, just forgetting to include something as simple as a semicolon (;)<\/strong> can mess up the code and lead to hours of troubleshooting.<\/li>\n
- PART 2: JavaScript in WordPress<\/a><\/li>\n<\/ul>\n
- the sidebar(s) is normally in sidebar.php<\/strong><\/li>\n
- the header will be in a file called header.php<\/strong><\/li>\n
- WordPress plugin files<\/strong> contain primarily PHP code. They may have some HTML, CSS and JavaScript too.<\/li>\n<\/ul>\n
- WordPress theme files <\/strong>contain a combination of PHP and HTML.<\/li>\n