Create a simple WordPress Widget using PHP

Example of a simple WordPress text widget in action

Before I attempt to show you how to code your own WordPress PHP Widget I think it would be advantageous to see a real world example of a WordPress Widget in action.

  1. Login to your WordPress admin
  2. In your WordPress admin go to Appearance and then to Widgets
  3.  I will be adding a new text widget to the Sidebar Widget Area of my Hillviewweb.com website. First find the text option under Available Widgets to the left side of the screen.Under the Text option you will see a description like “Arbitrary text or HTML”.  Click on this Text Widget option and drag it over to your Sidebar Widget area and put it at the bottom of the list. Below is a screen print showing the move of the text widget over to the Sidebar Widget Area.

 

  1. Now edit your new Text box as created in the Sidebar Widget Area and add a simple title and some words to the body as shown below.

 

  1. Now view your new sidebar text widget after saving changes. Below is a screen print of the new text widget.

 

Example of a simple WordPress text widget with an image

This section will show how to add an image to your new text widget from the instructions from above. I will pick up at step 4 above now and add the html code in to the text widget to display the desired image.

  1. Now edit your new Text box as created in the Sidebar Widget Area in step 4 above and take out the title. We want just a simple image with no title.  I will use the basic size of 300 px by 250 px for the widget image.  Following this i will show her to upload to WordPress and place inside your widget using HTML. Here now is the 300 px by 250 px image I created in Photoshop to be used in the widget.

 

  1. I will now show you how to insert this new image (Free Downloads) into your new widget in the sidebar as created above. You first need to find the url location of your uploaded Free Downloads jpg file as shown in the above step.  To do this go to the Media tab and then click on the Free Downloads image and then copy the URL from the right side of the page. Now go to the Appearance Widgets tab and locate your Text Widget as created above and pass the URL as copied into the body of the Widget. Also delete any text that is currently in the Widget Title:.  Now add the <img src=”http://www.websitename.com/wp-content/uploads/2016/07/five.jpg”> </a>  as shown below.

 

  1. Below is a screen print now of the new widget in the sidebar showing the new image from the steps above.

 

New E-Book coming soon – a detailed step by step tutorial of creating a new WordPress Website

I am currently writing my new E-Book that will be a step by step detailed approach to taking a new website from concept to design in Photoshop and then template updates in WordPress. The reason I am writing this E-Book is because I wished I had it myself when I was starting out, and never really found a resource like this. I realize there are many many approaches to website design and development but just seeing a screen by screen print of someone doing the entire process would have been most valuable to me starting out. I don’t have a completion date for this E-Book but I will keep you informed of my progress.

You can also sign up for our newsletter below . This newsletter will let you know when the E-book is ready.

[easy_sign_up title=”Sign up for newsletter and info on new E-book”]

What I have learned working with WordPress the past three years

AdobeStock_94891192-compressorThis blog entry is a bit different then the many WordPress technical blogs I have written over the past three years or so. I wanted to share with you my experience as a WordPress developer and designer and some important lessons I have learned sometimes the hard way. Hopefully this might help you also in your journey with WordPress website development and design.

Am I a WordPress Designer or Developer?

This first question will deal with a topic that I have wrestled with on and off now working with WordPress over the past three years, pretty much full time. First a bit of background of how I got here. I worked in IT full time with a number of large corporations for spanning three decades. After leaving the corporate world three years ago or so I launched out on my own as a Website developer and designer, not really knowing what I was doing but full of optimism and promise.  It soon became apparent that I had to somehow choose where I was in fact a Website developer or designer. I attended the jQuery conference in Portland Oregon and met with a presenter there who right away made sure I knew whether I was in fact a developer and designer.   I came from more of an application programming background so it seemed logical that I would in fact be a developer. But what happened next was unexpected and very interesting. I began to get opportunities to create brand new websites for new clients. This sort of put me in the perhaps good place, but a challenging place too of having to be both a website designer and developer because both skills were required to complete the tasks at hand which in the end produced a functional website.

I took a number of online WordPress classes as well as working hard to learn PHP and just the basics of how I would in fact create a useable Website for a client. Many lessons were learned over the past three years of creating websites for my clients. The first lesson was – I am by default both a WordPress developer and designer if I really wanted to complete a website that was useful and functional but did not look too bad for website visitors.

So to answer my first question here – yes I am both a designer and developer more by default because of the requirement to complete a full website.

Advice – Don’t get too overwhelmed by the inner workings of WordPress and thus get lost on your journey

This was in fact a very hard lesson to learn, but an important one never-the-less.  I immersed myself in learning PHP and how to make changes to a WordPress template and how to create a simple WordPress Widget, even learning how to use MySQL databases for inputing data and presenting data on the website. You can read the many blog entries on this website and see how detailed these subjects can be and how much time they can in fact take.  These things are important and there would not really be a WordPress without those important technical people doing all this magic behind the scenes.

But what I began to find was that I could get lost in the technical details of WordPress and still not be able to deliver a functional website to a client. The client does not really care too much if I know how to create a Widget or if I could query a table in MySQL and show the results nicely on the webpage.  What my clients really want is just a good clean easy to use website.

This brings me to my next lesson learned.

Rely on WordPress Templates and don’t try and modify the code of a template unless you really have to

I found I could easily get very lost very quickly trying my hardest to make a change to a WordPress template and making sure that change then worked on all devices like iPhones and iPads. If you really wanna get lost quickly in the jungle of technical things with WordPress then by all means create a WordPress child theme and begin your changes. But if you have a goal of just completing a WordPress website for a client that meets his or her design requirements without spending two years on it  I found , at least for me, that it is best to really trust your selected WordPress theme and to work within it’s boundaries.  This might mean that a design option that looks amazing might not in fact be the best for the client because of the number of hours it takes to create the WordPress child theme and then make sure it works on all devices for responsive design.

Trust the WordPress template

I think I have already stated this above, but it is important to really trust your WordPress template and to work within its known boundaries. If you find a template does not in fact work, then it is a good idea to look for another template that might better match your client’s requirements. I personally do not think one size fits all either for WordPress templates, I think some templates are good for presenting data a certain way and other templates are good for other issues.

Create your client’s WordPress website design first in Photoshop as a mock-up before launching into development

This was a very hard lesson for me to learn because as I noted I come from a technical background where code rules at all times. But my nature a Website is in fact a visual and somewhat designed and artistic thing. Yes, some more then others, but there is design in most websites.  I found I would get bogged down way too much in development  tasks and would quickly loose the big picture of needing to create a website that looks somewhat like what the client wants it to look like!  I found after a very key and good class with a Web site Designer in Seattle WA that it is a great idea to really have a well documented design photoshop version of a website that a client can review and make changes and then and only then begin the development process using the WordPress template.

Always keep in mind your template limitations when doing  your Website Design prototype

I have learned that one WordPress template cannot do everything your imagination comes up with for the design phase. Just will not happen. The perfect marriage of design with development I have found is to have a well thought out and documented WordPress design document that in fact integrates and takes into account all the aspects of the theme you are working with both the templates strengths and weaknesses. Again you can always move to another WordPress theme if you have to, it is all about trade offs. . WordPress themes are so powerful these days and there are simply so many that I believe you can really design using your clients requirements but do so with the WordPress template limitations always in mind.

Am I a WordPress designer and developer? Well both yes but……

There is not doubt that most of us are geared more towards either the left brain code and technical side of things or the right brain design and artistic aspects. Just kind of the way it is. I have found that it is important to know what you are naturally good at and have ability in and to focus on that BUT to also become somewhat proficient with the other side of the brain. When I do a new clients website design now, I turn off all code and left brain type of things and just in a quiet place work on the design with Photoshop only or maybe with just paper and pencil and no computer!  Then and only then when the client has signed on to the design document will I start on the development. It is different for different people but I have found that on Monday I might work full time on the design but then if I finish it I think wait another day like Wednesday  to do the left brain development tasks. This has worked pretty well so far for me.

I hope some of these thoughts are helpful. It did take me about 3 years full time to learn these things, so I hope that it can help you in your journey with the wonderful world  of WordPress Website design and development.  If you are a one person WordPress website shop like I am you will find you can be very effective if you are careful how you manage your time with both your right and left brain!

Photoshop CC – How to Create a Nice Image Layout for Envira Gallery

This is more then likely too specific, but I will show you the steps I use with Photoshop to get the following Image and Text at the bottom. I realize that you can do this with just CSS and HTML but I have found for me Photoshop is faster if I have a lot of photos to upload to my Envira Gallery.

First here is the image that we are trying to create. And then I will give you the steps. This is for one of my clients that does really nice home renovations in the Southern Oregon area.

Tiered Planting Area

 

 

 

 

 

 

 

As of right now the final page is shown below. I might re-do all these images with these steps now so that the Text format is all the same and looks more uniform.

 

chris

 

 

 

 

 

 

Steps using Photoshop

  1. Open your raw image in Photoshop
  2. Make sure the image is 650W X 500H pixels. I sometimes have to crop and resize to get the image correct.
  3. Duplicate the image Layer and call it PHOTO ONLY
  4. Make the background canvas 750W X 700H Pixels. Make sure relative on resize is off
  5. Make a large rectangle the exact size of the canvas and make it all white in color. You might have to move the image layer up to see it.
  6. Move the PHOTO ONLY layer so it is 31 PX from top
  7. Click on the PHOTO ONLY layer and click on FX and then create a drop shadow as shown above.
  8. Create a new TEXT layer and make it Bold Arial 55 PT with text color of #4D3131
  9. Move the TEXT now so that there are 87 PX from the bottom of the photo to the bottom of the text.
  10. Save as jpg on desktop
  11. Use Envira Gallery and import the new .jpg saved and it should format nicely

Alternate Steps that help retain location of text and image boxes better

  1. Use instructions above to create one MASTER psd file in Photoshop that looks perfect to you save it off as MASTER
  2. Use photoshop to take your raw image and

Make sure the image is 650W X 500H pixels. I sometimes have to crop and resize to get the image correct. save this off. I save this jpg file as raw.jpg on the desktop. 

  1. Test it out with your Gallery plugin in WordPress to make sure looks fine
  2. For next photo make a copy of the MASTER.psd file you saved from previous steps
  3. Name this new file exactly the proper name for the gallery photo
  4. Select now the Text layer and type in your new Text description over the top, being careful to keep the same location. I use the right and left arrow on keyboard so as to not change height.
  5. Select the PHOTO layer.
  6. Drag our saved raw.jpg image right onto of the image already there and line up
  7. Click on the effects and drop shadow lines from the PHOTO layer and drag right into the raw image. then delete the PHOTO layer.
  8. Now save as jpg file and then import into WordPress and Voalla you have a perfectly matched image now in wordpress.!!!

On Bluehost Delete A current WordPress Site and Install a New Fresh WordPress Install Feb 2016

Uninstall Current WordPress Install on Server

  1. To uninstall WordPress on your server (for example Bluehost) you delete all the files in your domain root directory first. This includes wp-admin, wp-content, wp-includes and all other files (usually around 17 to 19 files or so). I use FileZilla to delete.
  2. The next step for uninstall of WordPress on your server now that the files are gone is to drop all the tables and delete the current database in MySQL using PHPMYSQL. Sometimes though I just simply create a new database and add a new user for the new install, ignoring other databases and users from past I have used.
  3. I like to logout of Filezilla and log back in after these steps.

Install a new Fresh WordPress on Your Server (following delete of old)

  1. The first step in creating our new fresh WordPress install is creating a brand new database and database user and assigning the new user to the database. Here are the steps in detail.
  2. First login to your server (for example Bluehost)
  3. Go to Cpanel
  4. Go to database tools
  5. Go to MySQL Databases
  6. Create a new database (note the predefined prefix like xxxx_ in Bluehost. Make sure to write down your new database name
  7. Create a new username again with xxxx_ prefix.  Make sure to use a strong password and safe the password locally
  8. Now add that user to that new database.
  9. Click on All Privileges and click on Make Changes
  10. Now leave Bluehost for a bit
  11. Go to  http://wordpress.org/ and click on Download WordPress and then select Release Archive on left.
  12. I am selecting 4.2.2 for my example and save to desktop
  13. In Downloaded WordPress directory rename wp-config-sample.php to wp-config.php and add the following right away –    define( ‘WP_AUTO_UPDATE_CORE’,false ); I also make sure that the unzipped project files already on desktop also has a wp-config.php with this false added too. Better safe then sorry.
  14. At this point I recommend setup of your Filezilla FTP with Bluehost pointing to new directory. Note that I have seen my FTP files actually go to the ftp named directory instead which is fine, just move them to the real url for your new project.
  15. Now update the wp-config.php in the raw WordPress unzipped directory on your desktop from step 11 and put in the following. At this point ONLY do this for the WordPress directory and not your backed up project directory that is also waiting patiently for you on desktop. Notice that we are only creating a database name that also will be used later.  NEVER use root on server, just localhost.

define(‘DB_NAME’, ‘yourdb’);
define(‘DB_USER’, ‘root’);
define(‘DB_PASSWORD’, ‘root’);

  1. Now go to  https://api.wordpress.org/secret-key/1.1/salt/ and copy into wp-config.php FOR NOW ONLY ON RAW WORDPRESS over the current define section.
  2. Now on localhost in your wordpress directory copy over all the wordpress files that we have been working on that have been on the desktop with changes made in last few steps. These files go directly now into the localhost wordpress directory. If you are doing this as server option then this would be your domain root directory.
  3. Just to review where we are at now we have our raw new wordpress wp-config.php file with auto update off and with db_name as what our database will be called later like db1 and then user and pass as root for localhost but real user and password if on server.
  4. Now on localhost or on server we are ready to see if our raw generic wordpress is working, but FIRST we must install it. Go to localhost:8888/wordpress/wp-admin/install.php if you are on localhost or just user correct url if on server. You should now see ENGLISH and other language options. Choose English and click Continue.
  5. Now enter the site title and username that you will use for login and password and your email. Then click install wordpress.
  6. You will see success now and will login to your generic site. You will now see Hello world! and so on.
  7. Now update the wp-config.php with the exact database name and username and password we setup in steps through 7 above.  Use the xxxx_ qualified names.
  8. So now we have generic wordpress installed locally on localhost (or on server if you are on Bluehost or other server)
  9. Our next steps will be to update or local wordpress generic to our saved unzipped project on desktop.
  10. First we will import the database into our generic wordpress as installed now (into MySQL using phpMyAdmin). In phpMyAdmin go to import tab and choose the mwp_db folder INSIDE YOUR zipped project folder on your desktop (NOT the WordPress generic, but the project folder) And then select the *.sql file and import.
  11. Next copy all the files in our unzipped desktop project directory and paste inside the localhost wordpress directory (or if on server the root domain directory). Note that instead of 17 raw files for generic WordPress I am now copying in about 32 files.
  12. The next step is important as all the steps are. You must now go inside the wp-config.php file in your localhost wordpress directory (or domain root on server) and then edit it and leave the database name the same as it currently is but change the username and password to root for both of localhost and whatever is correct on server.
  13. As it stands right now I am still having issues with Localhost here after all these steps not finding the wordpress site. I will revisit this in the near future
  1. define(‘DB_NAME’, ‘database_name_here’);
    define(‘DB_USER’, ‘username_here’);
    define(‘DB_PASSWORD’, ‘password_here’);
  2. Note that with just MAMP MAC Localhost only the db name is root and password is root and then database is whatever you created for this step. NEVER use root on server though.
  3. Just to review, we have been doing all of this directly on the wp-config.php file in the wordpress directory as downloaded in step 11 to the desktop.
  4. Now log back into Filezilla and point to your new domain directory. Use File Site Manager. On left panel go to desktop and then wordpress as we have been working on  and on right make sure you are in fact in the root directory of your domain.
  5. Select all files from wordpress on left side and right click to upload now to your domain root on right side, might take few minutes.
  6. Once the upload is complete I like to edit the wp-config.php now on right side in domain root and make sure my new database and username and password are really there and also the salt keys and the turning off of the auto update of wordpress before I continue.  Sometimes I even go into bluehost and file manager to make sure in fact wp-config.php is what it should be.
  7.  Next on your local mac Safari browser type in this url and press enter – http://domain.org/wp-admin/install.php
  8. If everything has gone fine you should now see English (United States) and all other languages. Select English and click on Continue.
  9. Now type in your Site Title.
  10. Now type in your Username – which will be the name that comes up when you login to WordPress admin from now on.
  11. Now type in your password twice. make is strong
  12. Now type in your email address
  13. Now click on Install WordPress
  14. You should now see a Success! note.
  15. Now login and you should see the very generic Hellow World !
  16. I recommend now reading and working on the security fixes on steps 14 and 15 of my other blog.

Resorting WordPress from backup Zip file now that you have new fresh WordPress Install from above

  1. There are two options for restore from backup. The first is to use ManageWP. But first you will have to remove your current URL from the ManageWP left panel and then add it back in, but also you will need to install ManageWP plugin on your newly fresh installed WordPress site.  This assumes that you have a valid backed zip file of an older saved version of the website you are trying to restore.  By the way the second method is to do all the following steps WITHOUT ManageWP but just manually. Note that the Manual restore of a backup is nicely outlined also at http://managewp.com/user-guide/how-to-use-managewp/backup/restore-wordpress-site-from-backup
  2. I am only going to layout the steps for option 2 which is a manual reload. I had too many issues with restore attempt using ManageWP from a zipped file copied to server (option 1)
  3. The manual method will reload the MySQL database using phpMyADMIN and will also restore all files to directory.
  4. First have a zipped and unzipped version of the WordPress project you want to restore on your desktop.
  5. We will first upload our MYSQL database from backup. Login to Bluehost and click on phpMyADMIN.
  6. Go to databases tab
  7. Go to the database that we created in the last section.
  8. Go to bottom of list tables and Check All and select drop
  9. Should now see no tables
  10. Now go to import tab
  11. Choose file and choose the map_db directory and then the *.sql file and click on Choose
  12. You should see Import has been successful……
  13. Now we will restore all the files now that the database has been restored.
  14. Login to your Filezilla
  15. Before this though it is good to go into your unzipped directory of files to restore on desktop and edit your wp-config.php file.  Make sure the wordpress auto update is false
  16. Good idea in Filezilla to delete all the files on the right side for your currently working and installed wordpress that we did earlier. Might be faster with bluehost file manager
  17. Then once all right side of Filezilla deleted you can begin the upload of the unzipped wordpress project on desktop to the domain root now on right side.
  18. Now try out the domain website and see of everything reloaded correctly. Might have to rename plugins directory though first.
  19. Restore worked!!  All I had to do with fix permalinks.

 

How to Clone a Hosted WordPress Website to Localhost

  1. I recommend using a WordPress plugin like ManageWP and keep all your backups out on DropBox. I know there are many ways to accomplish this, but I have found AdobeStock_45275928 [Converted]personally that ManageWP and Dropbox are perfect partners for cloning and backing up WordPress websites.  So the first step would be to copy down a backed up ManageWP WordPress website down to your Mac or PC local desktop using Dropbox.
  2. Next copy the unzipped file from step 1 into your (I will be using Mac with MAMP as an example) applications/mamp/htdocs/wordpress directory. If anything was in your Mac WordPress directory back it up and save it off on your desktop and empty that directory of WordPress now. Now unzip that step 1 file from DropBox and put all the files inside that WordPress directory. Keep in mind you might have to rename ds_store file first.
  3. If this was a new WordPress install I would have you now install WordPress. But this is in fact a clone from your host server so we will not have you install right now.  The first step now is to use your phpmyadmin on your local Mac and create a database first. Write down the database name and password and userid. I recommend that when you create this database that you use the exact database name and userid and password from your Website on your host that you are cloning. You can find this info in your wp-config.php file.
  4. The next step is to try and access your Website locally, for sure you will get a database error if you don’t have the exact same database setup locally as noted above.
  5. Ok I forgot an important step. If you in fact use ManageWP then your bkp file will have a mwp_db.sql file. Put that on your desktop
  6. Now import that database into your newly created local database again with exact same database name , userid and password as Server version we discussed.
  7. Make sure that the database has all privileges also setup. And make sure to add a user to that database again the exact same as server version. Keep localhost also
  8. This is an important new step that used to get me into trouble so I will outline it here now. Edit your new database created and edit the wp_options table and the rows site url and home should be changed to show your new URL of http://localhost:8888/wordpress/  again for both of these rows. Very important. It is important to have the http:// also as noted I have found or you will have issues.
  9. Now try to access your newly cloned local WordPress website and fix any strange issues you might find, and don’t forget to reset the permalinks.
  10. I will try to provide a better flow later for these instructions along with screen prints. But this at least gets you started on the right track for a good clone from the server.
  11. Unrelated – I just learned a fantastic Photoshop shortcut. Nice. If you want to get rid of a background of an object and make the background transparent then you click on the magic eraser and simply click anywhere on the background of the image and it sets the background to transparent. amazing nice.

Steps for making a WordPress Child Theme

  1. First backup your WordPress website , I use ManageWP which is fantastic
  2. Next create a new directory in you themes directory and call it something like theme-child
  3. Next create a new file in your new theme-child directory and call it style.css
  4. Next fill out your style.css header area in the file with Theme Name and so on as follows
    • /*
      Theme Name: responsivepro-childcjr
      Theme URI:
      Description: Steves child theme
      Author: Steve Massey
      Author URI: www.hillviewweb.com
      Template: responsivepro
      Version: .01
      Tages:
      Text Domain: responsivepro-childcjr
      */
  5. Type in this code so it picks up your parent template css –
    • @import url(“../responsivepro/style.css”);
  6. I am assuming you have already made changes to css directly in your parent theme by using customize and the css so just copy ALL that into your new child theme css file
  7. Activate your new child theme
  8. In many cases you might have to tweak a few things. I had to, for example, reimport my custom header and had to reset my custom menu and settings too and had to tweak a few settings, nothing too complex just a few tweaks here and there.
  9. Now we have an active child theme with css and it is time to make our html and PHP changes in the PHP files all in the child theme only. To do this I fully recommend from now on when you are making changes to the parent theme that you use PHP // comments with a code like dogfish2 or something so later you can in fact do a EasyFind search for dogfish2 comment and thus will know right away which PHP files you need now to put in your child theme. IT IS SUPER important that the PHP files in your child theme are in the EXACT same parent and child file configuration also.
  10. Let’ say that for now you did not dogfish2 comment all your PHP file changes in your parent theme. That is fine. Just use a plugin called what the file and see what files you really did make changes on and then find those PHP files and copy them into your child theme again with the EXACT same file structure. Once the files are copied you can then delete your custom PHP code in the parent PHP file because it is now in the child theme only
  11. If you really want to test things, then try to reinstall the parent theme and IT SHOULD still work because your child theme directory is OUTSIDE your parent theme directory and also you can upgrade WordPress now too with no issues because you have a separate child theme directory set. nice.
  12. Once all these steps are done then you can edit all the child theme php files we just copied into the child theme directory and change all the PHP code so that it is not just sitting there in the PHP file but is added as a new function and then call the function from the PHP file. This I believe is best practice for WordPress PHP changes.
  13. There are various methods for this, but I like to copy over the functions.php file from the parent theme and then put it in the child theme in the proper location and then add my new functions to that.
  14. Note that you may run into some issues if you copy down your parent theme functions.php into your child’s directory. This is because you cant have to functions.php files one in parent and one in child like the style.css. Functions are kinda different.  It is recommended that you use function_exists()if isset() or if defined() - one of these for functions. To make things even more interesting WordPress looks for functions.php FIRST in child theme and then the parent theme. So really bad idea to copy down the parent functions.php file into child and them make changes. Another thing to remember is to make sure that if you create a new function to make sure it has a unique and different name then any function in parent functions.php file. And don't forget as noted above to use function_exists() and such.
  15. So in summary of a few of the items I have written about above – create and EMTY functions.php file in the exact same directory tree structure as Parent in our child directory and when you do add a new function use the function_exists() for sure and a unique name for the function. Then all will be well and YOU NEVER have to or want to make any function changes to the parent files at all.  Here is a good example of what to add if ( ! function_exists( ‘twentytwelve_entry_meta’ ) ) :

Working with ManageWP – How to clone a WordPress website effectively by reducing size of files

I have to admit that I have struggled just a bit for the past few months on cloning my WordPress Websites for my clients. The primary reason for my struggle has been the fact that I start with a good size WordPress website like 56 MB in size and then I clone that website using ManageWP which by the way I love using, and then the destination cloned website grows to sometime over 700 MB in size.  Well yesterday I just figured out why this is and am very happy with much better results now. Here is what I found:  I realize all this information is out there on the Web but when you learn by doing it is more powerful and effective.

A quick aside here – if you want to run a short code from within a php template file in WordPress you would do something like this

<?php

echo do_shortcode(‘[foodog id=”675″]’);

?>

  • Reduce your number of WordPress Plugins down to what you really need and don’t just deactivate the unwanted plugins –  delete all files for that plugin.
  • Delete all themes from your Website other then the current active theme. This has saved tons of file space for my project.
  • I found most of the unwanted files by the way in my wp-content directory, I will explain more now:
  • I highly recommend using dropbox for all your backups with ManageWP and don’t save any backup zipped files on your host server (mine is BlueHost) this can save tons of files on your WordPress website.
  • Get rid of all images in your gallery and library that you are not using. This again can save tons of space.
  • Just by doing these easy steps yesterday I reduced down my cloned destination WordPress Website from 750 MB size down to just 110 MB and I have not even deleted images yet!
  • I trick I learned for finding out what images you REALLY use is to right click on your website and then Inspect Element and find location and exact name of your file. Then make sure you save that one. If you really want to get your website size down you can get rid of various size versions of that exact image, but I am not recommending that for right now. Perhaps later if you want to really get size down to super small. Remember to use ManageWP show in folder and then copy zip file to desktop.
  • Now unzip and use EasyFind to find our desired home_widget_1
  • I usually start my EasyFind search in wp-content directory
  • Search took less then 1 second. I find that this home_widget_1 is located in the sidebar-home.php file located in the wp-content/themes/responsivepro directory. Going there now

Another lesson learned yesterday was the ability with BlueHost file manager to use that small binoculars icon to search any directory for a file, and I believe content of a file, but i have not fully rested this yet.

How to use BlueHost and FileZilla to reduce images down to just used ones

  • Login to your Bluehost Hosting
  • Go to File / File Manager
  • Under your public_html find your wordpress project, in this case our destination project for ManageWP for clone
  • Go to wp-content directory
  • Go to uploads directory
  • Use your WordPress admin for your destination clone project and find out which images you REALLY use and delete here in Bluehost or in WordPress admin  any unused images, you may want to zip them up first if you want to save them for other use
  • By the way its a good idea to backup your destination cloned website before getting rid of unwanted images.

How did this all work?

  • I just did all these steps for my source and destination wordpress websites using ManageWP and my source is now only 55 MB in size and my destination is only 75 MB. This is amazing keep in mind that my destination at one time was 750 MB wow.
  • This also has huge good implications for not just cloning but for finding really hard to find code inside each file, using EasyFind locally on Mac. Just simply use DropBox and copy down the zipped up saved cloned file and just run an EasyFind on it and you can find stuff fast.
  • The most effective and important issue I have found with all these steps is the fact that I can now make code changes to my dev version of WordPress on Bluehost and then simply clone it to production using ManageWP. This is huge because I don’t have to suffer by having to make changes directly in production ever again.
  • By the way make sure to reset permalinks after you clone!!

Finding data inside any file for purpose of change to code

  • One big advantage we have seen from the above posting is that with a smaller cloned and backup file of a project we can copy down to localhost MAC and use EasyFind method to find out in what file something is located , so that we can then make a proper change to our code via Child Theme or perhaps plugin.
  • First I do an inspect element for my desired change on my wordpress page. I then write down, in my case home_widget_1 which is an id #.
  • I then tried just using Search in Bluehost, but I think it only looks for filenames not file content.
  • So my next step is to copy down from dropbox my backup and saved dev project so that locally on Mac I can use EasyFind to see what file it is in. Note that because we have such a smaller zip file we can do this quickly now.
  • Ok I just opened the sidebar-home.php file using Komodo Edit
  • Ok I found that the home_widget_1 is a div which is in the responsive_widgets_before() function.
  • So now I am going to start a new section that will discuss how to make the required changes to the code now that I have found it!

How to make PHP code changes in the sidebar-home.php file for home_widget_1 with the goal of adding a fourth box to the home screen

  • Make sure you go to Bluehost to the real file to make changes, not just on local mac.
  • I am using Appearance, editor
  • I am finding sidebar-home.php. note that I should really be making this a child theme which I will later, for now just hacking the direct theme which is kind of a no no.
  • I found that there are in fact three widget code sections. I simply added a fourth
  • This can be tricky with adding fourth widget so another option at this point would be to use a new plugin called Envira Gallery and just add a four section gallery , but I will still have to code a new a-href so that when clicked it will go to the desired page.
  • So what I will do is create a new Envira Gallery with four boxes but I will use Photoshop to put the titles at the bottom of each image so that it will always stay together with responsive.
  • So I did that step as noted right above and then I just put the function into PHP line in sidebar-home.php where the widget code was that I got rid of and here is a screen print of the results. Now the tricky part is to add links to pages from this now
  • sample

 

 

 

 

 

 

 

  • ok now for that tricky part of adding links to pages from each of the gallery items. Note that this is NOT part of that gallery plugin though I wish it was. Thus I will have to kind of make my own plugin based on copy of this plugin with that functionality or something like that, perhaps a  new function.
  • I will do those steps from above again where I do an inspect element and then find out where in the plugin is that image and then see if I can add a new function that will add a link to that image
  • The first phase of changes to both the template and also in the case to a plugin with my own functional PHP code I will use comments section to reference with a code name, for example dogfish1 so that later I can do a find for all dogfish1 items and them change to proper child theme and or plugin code, which would be phase 2.
  • in my case for the plugin change to add link to image I did an EasyFind  for class=”enviro-gallery-item-inner” which I found right away in a shortcake.php file located in wp-content/plugins/envira-gallery. Again make sure you you that dogfish1 or other code so you can find this change I would be making later quickly and do a proper function for it.
  • So what I found was the following:
  • $output .= ‘<div class=”envira-gallery-item-inner”>';
    $output = apply_filters( ‘envira_gallery_output_before_link’, $output, $id, $item, $data, $i );
  • So yes a bit tricky indeed, but not too bad actually. lets unpack this
  • Another idea is on my home page just put a phantom invisible page with relative right on top of the four boxes that would have href links

Install WordPress on Bluehost and Setup Security

How to Install Fresh WordPress and Then Restore a WordPress Backup From Zip File (New Instruction Version)

New Entry Nov 2015 – How to clone a WordPress website hosted on Bluehost to your Mac Localhost running MAMP

  1. Login to your Bluehost account and go to cpanel
  2. Go to database tools and then phpmyadmin
  3. Before we do this step though we need to go to wp-config for your source website and edit that to see what your database name and password is and write that down use cpanel and then file manager.
  4. Now that you have the database name you can use phpmyadmin again on Bluehost login and then locate that database and then use the Export tab to export to sql file.
  5. You should now have xxxx.sql file downloaded on your desktop
  6. My Localhost on my Mac is http://localhost:8888/wordpress/ so you also would then go into the xxxx.sql file and edit it with your local editor and then you would replace all references to old database location with this new one. For example my source website is called http://box.com (not really just example) and my change file command would change all those in that file to http://localhost:8888/wordpress/
  7. Now go to phpmyadmin on your Mac localhost and import the xxx.sql file we just edited. Use the import tab in phpmysql. But first make sure you have created in localhost phpmyadminn the database with exact same name and username and password as our source website and sql file has.
  8. Now that step 7 is complete you will go into your current wordpress install on localhost mac mamp and edit wp-config.php file and make sure exact same database , username and password are in the file. Make sure the host also is localhost. I always like to verify that the imported database has the tables by just boring in phpmyadmin localhost.
  9. Now go back to your Bluehost and cpanel.  You can also use FileZilla for this step as well. Copy down ALL the files in your source Bluehost WordPress website and zip it up an copy down to desktop on local Mac. You might have to setup a new FileZilla setup for your source project. When setting up FileZilla make sure the Directory name is the correct fully qualified path to your source project.
  10. The next step is to move all the downloaded files over to your WordPress directory already setup on Localhost MAMP Mac. When zipping up in Bluehost from filemanager make sure to right click and then select zip option after selecting all files.  I have had trouble at times with the Compress Icon at the top of screen. Then download the zip file to desktop.

 

 

Link to my new security checklist

As a quick note I love using ManageWP for backing up all my clients WordPress websites.  I am using now ManageWP for cloning and works great as well as backups.

An important new note about WordPress security. I recommend that you change using Filezilla, your file permissions to not be writable for wp-admin and wp-includes and wp-content plugins only. You can right click on directory with Filezilla and change back to writeable if you are making changes at all. This is a good security move.

This set of instructions assumes you do in fact have a good zip file backup of your entire WordPress Website on your desktop. If so then proceed. These instructions were modified to include both fresh new WordPress install and restore all together on Aug 2015 by Steve Massey. The steps below include deleting your current Server WordPress install, installing a fresh new WordPress install and then finally restoring a backup of a saved zipped file of a completed WordPress Website. I had these instructions in various places and I am not integrating into one instruction step. Aug 2015

One lesson learned is that it is easy to add way too many WordPress plugins and have way too many images in your library and way too many themes not even being used to the point that a smaller WordPress site grows to over 350 MB in file size, which is not good. It is important to keep the WordPress website lean and well trimmed of excess files and images.

Uninstall Current WordPress Install on Server

  1. To uninstall WordPress on your server (for example Bluehost) you delete all the files in your domain root directory first. This includes wp-admin, wp-content, wp-includes and all other files (usually around 17 to 19 files or so). I use FileZilla to delete.
  2. The next step for uninstall of WordPress on your server now that the files are gone is to drop all the tables and delete the current database in MySQL using PHPMYSQL. Sometimes though I just simply create a new database and add a new user for the new install, ignoring other databases and users from past I have used.
  3. I like to logout of Filezilla and log back in after these steps. 

Install a new Fresh WordPress on Your Server (following delete of old)

  1. The first step in creating our new fresh WordPress install is creating a brand new database and database user and assigning the new user to the database. Here are the steps in detail.
  2. First login to your server (for example Bluehost)
  3. Go to Cpanel
  4. Go to database tools
  5. Go to MySQL Databases
  6. Create a new database (note the predefined prefix like xxxx_ in Bluehost. Make sure to write down your new database name
  7. Create a new username again with xxxx_ prefix.  Make sure to use a strong password and safe the password locally
  8. Now add that user to that new database. 
  9. Click on All Privileges and click on Make Changes
  10. Now leave Bluehost for a bit
  11. Go to  http://wordpress.org/ and click on Download WordPress and then select Release Archive on left.
  12. I am selecting 4.2.2 for my example and save to desktop
  13. In Downloaded WordPress directory rename wp-config-sample.php to wp-config.php and add the following right away –    define( ‘WP_AUTO_UPDATE_CORE’,false ); I also make sure that the unzipped project files already on desktop also has a wp-config.php with this false added too. Better safe then sorry. 
  14. At this point I recommend setup of your Filezilla FTP with Bluehost pointing to new directory. Note that I have seen my FTP files actually go to the ftp named directory instead which is fine, just move them to the real url for your new project.
  15. Now update the wp-config.php in the raw WordPress unzipped directory on your desktop from step 11 and put in the following. At this point ONLY do this for the WordPress directory and not your backed up project directory that is also waiting patiently for you on desktop. Notice that we are only creating a database name that also will be used later.  NEVER use root on server, just localhost. 

define(‘DB_NAME’, ‘yourdb’);
define(‘DB_USER’, ‘root’);
define(‘DB_PASSWORD’, ‘root’);

  1. Now go to  https://api.wordpress.org/secret-key/1.1/salt/ and copy into wp-config.php FOR NOW ONLY ON RAW WORDPRESS over the current define section.
  2. Now on localhost in your wordpress directory copy over all the wordpress files that we have been working on that have been on the desktop with changes made in last few steps. These files go directly now into the localhost wordpress directory. If you are doing this as server option then this would be your domain root directory. 
  3. Just to review where we are at now we have our raw new wordpress wp-config.php file with auto update off and with db_name as what our database will be called later like db1 and then user and pass as root for localhost but real user and password if on server. 
  4. Now on localhost or on server we are ready to see if our raw generic wordpress is working, but FIRST we must install it. Go to localhost:8888/wordpress/wp-admin/install.php if you are on localhost or just user correct url if on server. You should now see ENGLISH and other language options. Choose English and click Continue.
  5. Now enter the site title and username that you will use for login and password and your email. Then click install wordpress.
  6. You will see success now and will login to your generic site. You will now see Hello world! and so on. 
  7. Now update the wp-config.php with the exact database name and username and password we setup in steps through 7 above.  Use the xxxx_ qualified names. 
  8. So now we have generic wordpress installed locally on localhost (or on server if you are on Bluehost or other server)
  9. Our next steps will be to update or local wordpress generic to our saved unzipped project on desktop.
  10. First we will import the database into our generic wordpress as installed now (into MySQL using phpMyAdmin). In phpMyAdmin go to import tab and choose the mwp_db folder INSIDE YOUR zipped project folder on your desktop (NOT the WordPress generic, but the project folder) And then select the *.sql file and import.
  11. Next copy all the files in our unzipped desktop project directory and paste inside the localhost wordpress directory (or if on server the root domain directory). Note that instead of 17 raw files for generic WordPress I am now copying in about 32 files.
  12. The next step is important as all the steps are. You must now go inside the wp-config.php file in your localhost wordpress directory (or domain root on server) and then edit it and leave the database name the same as it currently is but change the username and password to root for both of localhost and whatever is correct on server. 
  13. As it stands right now I am still having issues with Localhost here after all these steps not finding the wordpress site. I will revisit this in the near future
  1. define(‘DB_NAME’, ‘database_name_here’);
    define(‘DB_USER’, ‘username_here’);
    define(‘DB_PASSWORD’, ‘password_here’);
  2. Note that with just MAMP MAC Localhost only the db name is root and password is root and then database is whatever you created for this step. NEVER use root on server though. 
  3. Just to review, we have been doing all of this directly on the wp-config.php file in the wordpress directory as downloaded in step 11 to the desktop.
  4. Now log back into Filezilla and point to your new domain directory. Use File Site Manager. On left panel go to desktop and then wordpress as we have been working on  and on right make sure you are in fact in the root directory of your domain. 
  5. Select all files from wordpress on left side and right click to upload now to your domain root on right side, might take few minutes. 
  6. Once the upload is complete I like to edit the wp-config.php now on right side in domain root and make sure my new database and username and password are really there and also the salt keys and the turning off of the auto update of wordpress before I continue.  Sometimes I even go into bluehost and file manager to make sure in fact wp-config.php is what it should be.
  7.  Next on your local mac Safari browser type in this url and press enter – http://domain.org/wp-admin/install.php   
  8. If everything has gone fine you should now see English (United States) and all other languages. Select English and click on Continue.
  9. Now type in your Site Title.
  10. Now type in your Username – which will be the name that comes up when you login to WordPress admin from now on.  
  11. Now type in your password twice. make is strong
  12. Now type in your email address
  13. Now click on Install WordPress
  14. You should now see a Success! note.
  15. Now login and you should see the very generic Hellow World !
  16. I recommend now reading and working on the security fixes on steps 14 and 15 of my other blog. 

Resorting WordPress from backup Zip file now that you have new fresh WordPress Install from above

  1. There are two options for restore from backup. The first is to use ManageWP. But first you will have to remove your current URL from the ManageWP left panel and then add it back in, but also you will need to install ManageWP plugin on your newly fresh installed WordPress site.  This assumes that you have a valid backed zip file of an older saved version of the website you are trying to restore.  By the way the second method is to do all the following steps WITHOUT ManageWP but just manually. Note that the Manual restore of a backup is nicely outlined also at http://managewp.com/user-guide/how-to-use-managewp/backup/restore-wordpress-site-from-backup
  2. I am only going to layout the steps for option 2 which is a manual reload. I had too many issues with restore attempt using ManageWP from a zipped file copied to server (option 1)
  3. The manual method will reload the MySQL database using phpMyADMIN and will also restore all files to directory.
  4. First have a zipped and unzipped version of the WordPress project you want to restore on your desktop.  
  5. We will first upload our MYSQL database from backup. Login to Bluehost and click on phpMyADMIN.
  6. Go to databases tab
  7. Go to the database that we created in the last section.
  8. Go to bottom of list tables and Check All and select drop
  9. Should now see no tables
  10. Now go to import tab
  11. Choose file and choose the map_db directory and then the *.sql file and click on Choose
  12. You should see Import has been successful……
  13. Now we will restore all the files now that the database has been restored.
  14. Login to your Filezilla
  15. Before this though it is good to go into your unzipped directory of files to restore on desktop and edit your wp-config.php file.  Make sure the wordpress auto update is false
  16. Good idea in Filezilla to delete all the files on the right side for your currently working and installed wordpress that we did earlier. Might be faster with bluehost file manager
  17. Then once all right side of Filezilla deleted you can begin the upload of the unzipped wordpress project on desktop to the domain root now on right side.
  18. Now try out the domain website and see of everything reloaded correctly. Might have to rename plugins directory though first
  19. Restore worked!!  All I had to do with fix permalinks. 

 

Older instructions kept for reference only below

I have found it is good to delete out your current bluehost wordpress install from project root directly and then do fresh install and then do these steps below. Don’t even edit wp-config.php at all yet. only wait till after raw wordpress install and then quickly change auto update wordpress.

  1. If you got a fatal error and just a blank screen instead of your desired WordPress website (after a major update or even plugin update) then I recommend that you re-install WordPress (to a version before the fatal error) using the instructions above here. Note that with this fatal error you might not even have ManageWP connecting to your hurting website so it will require a new setup of your newly created site after these steps. NOTE – I find that reinstalling wordpress back to lets say 4.2.2 for example (before issue that caused white screen) and then follow steps below but make sure that you add the code in wp-config.php to have wordpress updates FALSE so does not auto update. Also good idea to rename the plugins directory to something else during this process.
  2. If you are using ManageWP (which I highly recommend) for all your backups then a good link is – ManageWP User guide on how to restore
  3. First unzip your backup zip file on your desktop in a new folder
  4. It is important that if you ALREADY have new WordPress 4.2.2 lets say installed per instructions up farther in this blog. Before you do next steps.SEE Steps for Installing WordPress 4.2.2 On Bluehost for a new Domain Name Setup above.
  5. Note that we will be restoring BOTH the MySQL database as well as the files for WordPress.
  6. Login to Bluehost or whatever hosting you have
  7. click on PHPMyADMIN (if you are starting a new database which I do recommend it is better to use MYSQL for the database create.
  8. Find your current database for your website or create a new one
  9. Select all tables and then drop and make sure to say YES
  10. Go to IMPORT tab in PHPMyADMIn (if you were using mysql to create database just leave mysql and go to PHPMyAdmin now for this step)make sure select your new database first!
  11. Use Choose File and navigate to our unzipped directory on the desktop with all the files we unzipped on step 3
  12. Make sure to choose the ENTIRE database directory for import and then click on Choose
  13. It will want JUST one file so select the *.sql file
  14. Click now on GO
  15. It should say something now like Import has been successfully finished…..
  16. GREAT! we now have our database. Now we will import all wordpress files
  17. Login to your Filezilla
  18. On left or local side navigate to your local desktop wordpress unzipped directory from step 3 again.
  19. Copy all files from that left side with the exception of your database directory that you already dealt with thru steps 15.
  20. It is SUPER important that you double check and make sure that on the right side you are in fact logged in and showing your correct domain root location.
  21. Once that copy to your server root for your domain is complete you can now test your website to make sure it is now restored!
  22. RIGHT AWAY edit your wp-config.php and change so there is no WordPress Autoupdate. very important step!
  23. This method is also useful for cloning your wordpress website lets say from your Bluehost server to your localhost on your Mac.
  24. Note that this upload of unzipped files in previous few steps can take a bit of time. So be patient.  My current website I am restoring has an unzipped directory size of 168 MB which is way too large, thus taking tons of time. This is due to the fact I have an image library that has never been cleaned out.  I also have way too many plugins and themes also which makes up that large size. Good idea to keep things cleaned up before backup.

Steps for Installing WordPress 4.2.2 On Bluehost for a new Domain Name Setup

While Mojo one click install sounds like a great idea, I have found this option to not work at times. I will be showing you the steps for a manual install of WordPress on Bluehost for a new Domain purchased. Refer to the book Smashing WordPress by Thord Daniel Hedengren for details on this install. This book is by far the best WordPress technical book I have run into.  See page 8 for the Manual Installation Method section. Another great resource is a website by Eric Hansel.

  1. Go to bluehost.com and login
  2. Go to database tools and then MySQL Databases. Create a new database, I usually use the name of the domain or subset of domain name for the db name.
  3. Create database user. I like to have computer generate my password. Make sure to write it down safely , username and password. Set the new user to the new database with full privileges.
  4. Now go to http://wordpress.org/ and click the download
  5. # Disables all core updates:
    define( ‘WP_AUTO_UPDATE_CORE’, false );  make sure to add this to your new wp-config.php from step below right away!
  6. Now go into your new wordpress directory downloaded on your desktop and change wp-config-sample.php to wp-config.php. Make sure to use fully qualified name like xxxx_databasename
  7. define(‘DB_NAME’, ‘database_name_here’);
    define(‘DB_USER’, ‘username_here’);
    define(‘DB_PASSWORD’, ‘password_here’);
  8. Go to https://api.wordpress.org/secret-key/1.1/salt/ for unique keys and salts and put inside your wp-config.php file.
  9. Save wp-config.php and upload the wordpress directory we just changed to Bluehost using the File utility in Bluehost.
  10. Create a directory on bluehost under public_html for your new website and title the directory the domain name.
  11. Now copy all files from our WordPress directory already updated on the desktop to this new directory with domain name. Might want to zip. I use 644 security. I use the Bluehost File Manager utility and select all files in the wordpress directory as unzipped and then right click and select move and then type in the “to” directory which is something like public_html/domainnamehere. And then press enter and all files are moved from WordPress directory as unzipped to home directory of your new website.  I also use filezilla.
  12. Make sure to change the wp-config.php file in your project root directory with the following to make sure there are NO automatic updates. Make sure to do this step AFTER you upload wordpress to root BUT before you install WordPress.
    1. define( 'WP_AUTO_UPDATE_CORE', false );
    2. add_filter( 'auto_update_theme''__return_false' );
  13. Find your install.php file inside something like this –     public_html/domainname/wp-admin/install.php .  Create first a Bluehost FTP (I use Filezilla).  Something I learned the hard way is that when you setup your Filezilla with Bluehost you have to have a Bluehost FTP setup username and password, with the password not to complex and the directory that is setup like /home/user/directoryname is a real directory that has had WordPress installed already for that domain name.  And you will have to have an FTP account setup for each and every add-on domain that has WordPress installed. It is a good idea to use Password Generator also.   When setting up filezilla username and password I use ip address for Host and Port 21 and FTP and FTP plain and Normal and user and password from Bluehost FTP setup. The tricky thing is if you have an add-on domain on Bluehost. You have to make sure your directory : on Blue Host FTP account setup is set to /home/name/public_html/addondomain name. this is very important.  For the install you can disregard what I said about FTP Filezilla , you can do everything with just cpanel in Bluehost File Manager only  to change permissions and such and then simply use the URL as noted below for install. 
  14. Might have mentioned this already but important – to install WordPress you use your browser (I use Safari) and then type this in the browser – http://example.com/wp-admin/install.php or you might have to put a subdirectory in there also.  Sometimes when you try this install method with URL you might get an error as shown below. You need to make sure the MySQL that is setup for this install username and password are exactly the same on wp-config.php.  With Bluehost I have found that when you are editing the wp-config.php file for database name and database username you have to have the proper login id _ so something like xxxx_databasename.
  15. It is important to encrypt login pages as well as outlined in Bluehost safety. http://www.bluehost.com/blog/security/website-security-how-to-keep-your-site-safe-from-digital-threats-2426/  Also see codex on how to setup SSL security for login. http://codex.wordpress.org/Administration_Over_SSL  Add the following code to your wp-config.php file.
      define('FORCE_SSL_ADMIN', true);
  16. This is an important one. Only connect from home to your website using any login and password. Starbucks and other public areas are really dangerous cause people can see your login and passwords.
  17. Scan daily for issues using ManageWP. Click website on left panel and then click on Security check on list below domain name.
  18. Go to Bluehost and use the File Manager utility and find the following directories and change the permissions – take away write privilege. This is a good security method. See the book titled WordPress Security: Protection from Hackers by Lambert Klien for more details on this.  Take away write access to the folders  –  /wp-admin/    /wp-includes/    /wp-content/plugins/   make sure not to do this for just wp-content but for the plugins folder right below that only.

WordPress Post Install Security Checklist

This checklist is just a simple way to keep track of what you have setup with WordPress for security following an install. The list items are not in any kind of priority order. Some of these security items are based on the book –  WordPress Security: Protection from Hackers by Lambert Klienand thus I highly recommend purchasing that book so you can see the examples clearly right in the chapters. I will not disclose the details here. 

 

 Make sure your MySQL database tables all start with WP prefix.
 When creating your MySQL & user  never use ADMIN as username
 Use unique keys and salts inside your wp-config.php file (get from wordpress.org)
 Stay on a secure network and never access using passwords from Starbucks or common area.
 Update your WordPress to current release and keep all Plugins up to date
 Only activate plugins that are really needed.
 Know what you are linking to
 Scan each of your WordPress websites every week (I use ManageWP)
 Protect wp-config.php file  code added to bottom of htaccess file. See book p 25 .
 Protect wp-content file  code bottom of htaccess file  STORED – wp-content dir. Book p 26.
 Get rid of unused WordPress User accounts.
 Use securi.com and other tools to check for security holes in all your websites
 Change your WordPress settings so that you don’t have auto setup of users
 Bkp Site and Database and get rid of unsed user accounts
 Change Admin Login password monthly to computer generated name with special characters
 Make daily backup copies of all .htaccess files
 Make wp-admin directory writable permission only by your user account.
 Make wp-includes directory writable permission only by your user account.
 Make wp-content directory writable permission only by your user account.
 Use SFTP and not just FTP.
 Revoking privileges of Drop, Alter and Grant might be good, but might cause issues. caution
Go to WordPress.ORg/hardening_wordpress and do advanced features.
 Setup http://www.wpwhitesecurity.com/wordpress-tutorial/definitive-guide-wordpress-ssl-setup/

 

How to Setup Filezilla with BlueHost

  1. Create a new username in BlueHost FTP setup. Note that the full username is really name@domain.com. You will need this later as well as password that you setup
  2. Then while still in Bluehost click on the most right Configure FTP Client Blue link and it will save a small xml file on your desktop
  3. Go to Filezilla now and File / Import and then import that Xml file from previous step.
  4. Make sure to put in the proper password when it asks you also as you setup for your new user in Bluehost FTP.

How to Create a WordPress Child Theme

  1. Install One-click child Theme plugin and use that to create your new child theme directory name and website name
  2. The child theme CSS is a css file (use FTP app) that is inside your new child theme directory as created (file.css). Make changes as required.
  3. The PHP theme files can also be changed but they are a complete replace of the parent themes files so when you put a new file using FTP app in your new child theme directory WordPress knows to ue that new one only and not the parent file.
  4. Remember at all times to make changes directly to the child theme files using editor on menu because if you use the CSS and other changes right inside of WordPress they won’t work.
    1. ***** IF YOU WANT TO ADD FILES THAT ARE NOT THERE ALREADY IN EDI T AND THEN CHILD THEME SIMPLY GO TO PARENT AND COPY THAT FILE AND PASTE THAT FILE IN THE CHILD FOLDER AND IT WILL SHOW UP!!
    2. ALSO if you have your development on MAMP on MAC on Localhost then make your changes and every hour or so use FileZilla to upload all the files in your theme directory , in my case it would be responsivePro and responsivePRO Child and that way it will automatically update the server (very important to make sure it goes in proper directory on server !!)
    3. What I have learned at least for now is to NOT use localhost as building area for new website with WordPress, but just use it as what if area sandbox only. Use the Server version and then backup using ManageWP. I need to fix though ManageWP next so that there are unique database names for each clone to URLs so will clone correctly there.

Lesson Learned the Hard Way – Backup to zip file daily all your WordPress sites

I tried to rely just on ManageWP plugin which is fantastic. BUT I found that if WordPress was auto updated to new major release that it can cause a fatal error on your WordPress website and ManageWP is of no value to you UNLESS you by chance had backed up not just on the server BUT also as an exported Zip file. It is even worth getting another external drive to store these on. I learned the hard way on this.  Lesson learned – backup daily to zip file. (this will automatically include all custom WordPress files and the database data)

What to do now if after upload of bkp you still get white screen of death

  1. I assume your website is now on the server as restored from previous post section.
  2. Edit the wp-config.php file on your website root on Bluehost Server.
  3. Set your WP_DEBUG to true –  define(‘WP_DEBUG’, true);
  4. Use the following code right above happy blogging for security (see this link for details of code CODE
  5. Now access your bad website and then look for the log located at  /wp-content/debug.log
  6. DONT forget to put debug back to false when done.
  7. I believe I got the white screen of death again after all these steps because I did NOT TURN OFF auto updates of WP. Will try again now. I will clean out unwanted plugins and files and themes first.
  8. I have not had too much luck with deleting the htaccess. file but that is one idea if still issues.
  9. The other idea is to rename the plugins directory also to see if things clear up some.

How to clone a WordPress Website from Bluehost down to your localhost MAMP Mac

 

Setting Up Proper Security, SEO and Final Testing for a New WordPress Website

You have your new WordPress website created and hosted so what do you do now to have proper security, SEO setup and final testing?

SEO Setup

Before I discuss SEO setup – I want to point out the when using VPS Bluehost hosting it is best to install a new wordpress install on bluehost domain for first time using the manual method. Here are the instructions for this. https://thisbox.rocks/installing-wordpress-manually-in-cpanel/  I would not try using Mojo with VPS account on Bluehost.  When installing you might come to that part of the instructions called Finish The Installation. It is kind of unclear what to do at that step. Basically once you hand create the database you then go to cPanel and click on install WordPress, then select the domain name as noted above that was hand unzipped and proceed with directions. Rather then retype the instructions for hand install of WordPress go to this website location and scroll down to Installing WordPress.   //www.ejhansel.com/installing-wordpress-on-bluehost-com/

 

I recommend becoming a member seositecheckup.com. This is an excellent way to quickly find out what you are missing SEO wise on your new website. I ran my new WordPress website through and eval just now and am fixing a number of SEO issues.  My initial score for SEO was low at 61% but a few fixes and I was up to 75%. I am now fixing the remaining items to get above 90% rating for SEO. Tomorrow I will publish here my unique visitor count to see if better. It was about 24 visitors right now for my new site.  I am using a new WordPress plugin called All in One SEO Pack. This helps make sure meta tags and related SEO items are all taken care of. A nice plugin.  Here are some fixes I am doing now.

  1. Code to Text Ratio – making sure there is enough text to balance out all the PHP code. I added more pure text.
  2. In WordPress in the All Pages window make sure there is an SEO title and SEO description with SEO keywords. I added SEO info for both the website but also for each page.
  3. I will also add Google analytics.
  4. There are a number of other fixes to htaccess and such, I will write on these soon.
  5. I checked the next day and my visitors went from 21 to about 31 in one day because of my SEO fixes. Nice.

WordPress Website Testing

There are a number of tools out there to test your website. I am using nibbler right now. http://nibbler.silktide.com/en_US

 WordPress Security Testing

There are a number of security testing tools for WordPress websites.

https://hackertarget.com  I get 502 Bad Gateway I need to fix

There is a WordPress plugin called Sucuri. Also if you go to Sucuri website you can scan for security.  My only issue found on my site was Website Firewall.

WordPress Security Testing Checklist From the Book Smashing WordPress by Thord Daniel Hedengren and ManageWP.com

Checklist for Website security can be found on page 21 of Fourth Edition of Smashing WordPress by Thord Daniel Hedengren  (first three items below only) and WPManage.com.  Below this list are screen print instructions for each step.

  • Edit your wp-config.php file and make sure the secret keys are in fact installed. wp-config.php  on the root directory

You will see something like define(‘AUTH_KEY’, ‘usidfiji83u8jsedifjojsdifjisojjisjdifjiosdfjijdsij’); This is a fictional key but gives you the general idea.

  • Make sure there is an empty index.php or index.html file in every file folder.

  • I recommend changing your password to a strong generated password every few weeks for your Bluehost accounts but also for each WordPress Wp-admin login. Again as noted above I would use length 16 for passwords and use computer generated.

  • Harden your WordPress install setting file permissions.

Most of Web developers are using a shared server from a host provider. This opens up potential security risks from the many other accounts on that same server. I will be moving to a dedicated server later this year, but for now I am sharing with others, thus it is recommended that I in fact change file permissions. Each file or directory can have permissions. Refer to http://codex.wordpress.org/Hardening_WordPress.  I see that in Bluehost all my files do seem to already be set to 644 for permission which is good.

I recommend changing the wp-config.php file to 400 from 644 for permissions. I changed permissions on all my wp-config.php files in all directories to 400.

  • Make sure your MySQL tables have WP prefix

  • Change your default Login URL address.

  • Keep your WordPress install updated at all times.

  • Add the following to your wp-config.php file     define(‘DISALLOW_FILE_EDIT’,true);
  • Limit wp-admin login to IP address. I will show this below also
  • Prevent people from executing plugin or theme files.  Make a new htaccess file in wp-content/plugins and wp-content/themes with the following

<files *.php>

deny from all

allow from xxx.xxx.x.x (where the xxx.xxx.x.x is your own ip address)

</files>

  • Add the following to your root WordPress install .htaccess file       Options All -Indexes
  • Backup your WordPress install and all theme and plugin files every few days

Setup A Development and Production Website on Bluehost

 How to setup a Development and Production Website Version on Bluehow

It is great that in Bluehost you can host as many domains in one account as you like ( I believe up to 100). I am setting up a development and a production domain now for each of my WordPress websites on Bluehost and I will explain how to do this. Many developers use a local MAMP WordPress install which is fine, I do that also on occasion. I have found it to be more effective to keep the development and the production version of my website on the Bluehost server though.  This blog will discuss the various Bluehost domain options and also how to setup this dev and prod version. So let’s dig in and get into the details now!

So having read the section below on Primary and parked domains I am going to now setup a production domain for all my clients on Bluehost called www.hillviewwebprod.com. I am now setting up a new Bluehost account that is the Business Pro option that I will use for all of my customers as add-on domains.  On that Primary website has been setup.

Now it is time to add new customers websites as Add-On’s to my Primary. I will add the first customer now

 

By the way I am going live with this blog so today May 12 2015 you may see more details added during the day. Thanks again for stopping by.

 

How do Bluehost Primary, Parked, Add-on and Sub-domains Work

The Bluehost Primary domain is your main Bluehost account domain that you use to log into your account. There is only one Primary domain for a given hosting account. I have two hosting accounts currently, but am going to combine other websites now into one of those hosting accounts.  A parked domain lets you have a number of domains that point always to the same primary domain. For example you might have dogtreats.com but have dogtreats.net also pointing always to the same website dogtreats.com.    The add-on domain is attached to the hosted account but has a separate website domain name. This add-on domain has its own unique folder located in your public_html folder. This is the option that web developers use for managing a number of clients websites from one Bluehost account. I have read that you can have up to 100 add-on domains, but also I have read that you can have unlimited add-ons. But 100 is sure a lot, so I am not too worried about this rule.    A subdomain in Bluehost is just a bit different. It allows for sort of a prefix like blog.dogtreats.com or perhaps news.dogtreats.com. I don’t see myself using subdomains at this point, but useful for sure.

 

 

How To Copy A WordPress BlueHost Website to Another Domain On BlueHost Using ManageWP.com

Here are my instructions for the copy of a WordPress Website on Bluehost to another Domain on Bluehost. You may ask why would I even do this. I have up to now been doing all my development on my localhost and using WP Migrate Pro DB to move that website up to Bluehost to production. This I believe is working too hard. It is easier as you will see to put the initial development on a Domain in Bluehost and then to use the new ManageWP.com to clone the development into the production domain right now Bluehost. I have such good internet speed that I don’t have to really develop anymore on localhost and can use my localhost as a sandbox only. So I have a localhost sandbox, a Bluehost development and a Bluehost production, which works better.

So right now I have www.hillviewport1.com for my first portfolio and now I am adding www.hillviewport1dev.com for my development Bluehost setup.

How to Transfer A WordPress Website from Localhost To Bluehost Using WP Migrate DB Pro

This blog entry will show you how to transfer a WordPress Website from your Mac MAMP Localhost up to your Bluehost using WP Migrate DB Pro and a few other steps. Note that any media like images and such will have to be FTPed by hand. Also any customizations to files inside the wp-content and such will have to be FTPed by hand. WP Migrate DB pro is fantastic for Database copies from localhost to a server but does not handle Media and custom files. Those have to be done by hand. Ok, let’s get started with the detailed steps to make this happen.

Step 1 – Make sure you have your localhost WordPress installed and working. My url for example for my localhost looks like this – http://localhost:8888/wp-admin/

Step 2 – Make sure on your server host (I use BlueHost) that you have your new domain fully setup and working.

Step 3 – Install WordPress on your server (from now on I will call the server Bluehost) and fully working. My Bluehost is something like www.website.com/wp-admin/

Step 4 – I highly recommend the purchase of WP Migrate DB Pro. Once purchased then install it as a plugin install on both your localhost WordPress website and also on your new WordPress Website installed on Bluehost.

Step 5 – Use the instructions from WP Migrate DB Pro to copy the database over from localhost to Bluehost. I use the Push method and copy the Bluehost key over to the localhost and then run it. Note that as a one time fix you have to edit the Bluehost wp-config.php file and change the wp-czwf or whatever it was to simply wp_   This is just a one time fix

Step 6  – Now you can make changes to your local host Website like adding text to the front page or whatever and then simply run the WP Migrate DB Pro plugin as we did above and the changes show up on Bluehost. Very nice indeed.

Step 7 – Ok, now for some sort of bad news. This plugin only works for database changes and not for any media (like your photo images) and for any customizations made directly to any WordPress files. You will have to FTP by hand those changes.  I will be writing a very detailed blog with screen prints on these important steps soon.

Step 8 – I highly recommend that when you purchase the WP Migrate DB Pro that you get the developers version so that you can add the plugin add-on for Media transfer. This is a very handy tool. Basically it checks your Media library for media (images in my case) and then uploads the images to the Bluehost server in the proper location and does the database updates. Does not get any better then this!  Then run the update and the new media is right there.

Step 9 – This is a very important and critical step. As noted above while WP Migrate Pro DB with the Media Addon plugin is great and does a super job of database and media update, it does not however see updates in a file and then update those file changes. This must be done by hand> here is a good example. I went to my localhost and to the front-page.php file and made some text changes. Upon running MP Migrate DB Pro I don’t see these changes on Bluehost nor would I expect to see the changes. So what I do is use Filezilla FTP to copy my localhost front-page.php file located in the wp-content directory and FTP it to the same location on the Bluehost server. Then see if the test changes take effect.

I find it a good idea to keep track of all wp-content files that I change with code so that I will know exactly what files need to be hand FTPed up to Bluehost. Note too that I am hacking the Orbit template to make it really my own template thus I am not at this time using child themes, but will soon.

I made the change to front-page.php and then I FTPed up to Bluehost and now the changes appear just fine.

Step 10 – Widgets meta data does transfer over using WP Migrate DB Pro but the actual widgets themselves need to be installed via plugin install on the server version of the Website.

 

How To Add a Second WordPress Website To Bluehost

Verify First You Have a good Filezilla connection to your first Bluehost WordPress Website

stevemasseyphoto

Let me first start off by saying that there is a way for you to run several and even more websites off of one Bluehost account and you can even run up to 100 websites off of one account cpanel. Here is a link to a website that explains how to do this.  expand2web.com.  I will keep this blog entry active for now, though not finished because I believe it has some good valid information on this topic, but for now I am going to create a new Bluehost account for my Realtor website used as a portfolio entry. I will try and finish this Blog entry later, but for now if you go to expand2web.com as noted above they have a very good outline of the steps required for this.

But do read ahead now because this information is most helpful in setting up even your first Bluehost account.

It is a good idea before adding a second website to Bluehost to make sure you have your filezilla FTP connection working and are able to login to your first website without any issues. Launch your local Filezilla FTP application and go to File and then Site Manager.  You should see a properly filled out Site Manger window as shown below with the ip address host of bluehost for FTP and then the Protocol set to FTP – File Transfer Protocol and then the Encryption set to Use plain FTP and the Login Type set to Normal and your Bluehost user id in the User: field and then your Bluehost login password in the Password: field.  On the left pain you should see under My Sites, just one website right now since I am assuming you only have one WordPress Website operational in Bluehost.

Here is a blank generic Site Manager window just for reference.

1

 

 

Our next step will be to click on the Connect button to connect to your first Website on Bluehost. Just to make sure everything is operational. As you can see from the screen print below there is in fact a list of filenames in the right lower pain thus we are all set with our current first Website and FTP options.

 

2

 

Typically your second WordPress website once setup will be in it’s own directory in your already setup public_html directory (see my previously setup hillviewweb directory on my right lower FTP pain below.

3

 

It might be worth while looking up how to setup WordPress multisite, but I will Blog on that later. For now I will assume we are for now only adding the second Website to Bluehost using WordPress only. Once we install a new WordPress for our new website you will then see a new directory under the hillviewweb with our new Website name in the directory name.  We are now ready to install our second WordPress Website in Bluehost.

Install Second WordPress install on Bluehost – Steps

I am rewriting this section on how to install a second WordPress install on Bluehost due to some database challenges I ran into. I will resolve those now also with instructions below. So here we go starting now.

Step 1 – Clean Up Old WordPress Databases in MySQL on Bluehost

I believe it is a good idea to clean up your old unused MySQL databases on Bluehost first before proceeding with our other steps. Here are the instructions now for doing this. First make sure you are logged into your account on Bluehost. First we want to find and verify what database is currently being used for our valid first Bluehost website. We don’t want to touch that database, so it is important to make sure we know the exact database name we are already using for that first site. First go to your Bluehost cpanel.  Click on File Manager in the file manager section of the cpanel shown below.

1

 

We are only interested in the files for our first website which is hillviewweb.com so we will select the Document Root option for hillviewweb.com as shown below. Click on Go.

2

 

Now as shown below on the left side of File Manager locate the public_html directory  . We are looking for the wp-config.php file which is located in the public_html directory again shown below

3

 

 

Now select the Code Editor icon on the top menu bar. Around line 18 or so you will then find your database name and username and password. For security reasons I won’t screen print this right now. So we are ready for the next step now.  We will now delete out all unused and unneeded MySQL databases.

Go to cpanel and then the database tools section and then click on the MySQL Databases icon. In the Current Databases we will now delete out all unwanted and unused databases other then our valid noted database from the wp-config.php file as noted above. To be safe I like to rename the unwanted databases first to old1, old2 and so on and then delete to ensure that nothing wrong happens to our valid database by some mistake I might make. I also backup all the databases to my local Mac as well just to be safe. I also check my first valid hillviewweb website after each database rename to make sure nothing bad happens.

Now we are down to just one valid www.hillviewweb.com database. It is good that we cleaned out all the old unwanted databases from Bluehost cpanel.

 Step 2 – Create our Second Bluehost Website Database

You might remember from above that I have found with Mojo in Bluehost that you have to create your WordPress database first in MySQL Databases located in the database tools section of the cpanel before installing your new WordPress website number 2.  So click on that MySQL Databases icon now.  In the Create a New Database section type in your new database name.  Click on the green Create Database Button. You should get a message – Added to database “xxxx”. (xxxx is your database name).

Now we must add a new User to the database just created, just down that same page a bit.  But first lets Create A User.

You should get a message – You have successfully create a MySQL user named “xxxxx”.  I am not screen printing any of this due to security issues.

Now that we have a new user created for our second Bluehost Website we will Add a User to a Database. Select the new user created above from the User pull down menu and add that to our new database. Now select ALL PRIVILEGES . Click on Make a Change.

You should get a new message that You have successfully granted privileges on the database xxxxx to the MySQL user xxxxx

We are now ready for the next step.

 Step 3 – Create our new Website Now That We Have a New Database and New User Created

Go to the Home menu item and look for the website section and then click on Install WordPress as shown below

5

 

 

Next click on the Install under the Do It Yourself (FREE) section

This instruction set assumes you already have in place a valid and active domain with Bluehost. As you can see my domain name is http://www.hillviewwebportfolio2.com as shown below here.

Click on Check Domain

7

 

Next click on Show advanced options and on I have read the terms…… as shown below

10

 

Important!  Make sure you un-click Automatically create a new database for this installation, because we already did that in the previous steps above.

Next we fill out the upper section as shown below with a new site name, admin userid and admin password.  My screen print below has fictitious data in it just for security reasons.

13

 

The next step is to fill out the bottom portion of this same form right after the red warning message, with database name , database user , database password and database host. Make sure to use the EXACT same info for this section as was created above in the section on creating a new database and new user for the database. It must match perfectly. I use localhost for Database host. Click on Install Now. Note that the admin password in the upper section must have 8 – 16 characters long.

You should then get a Your install in underway with some adds for themes and such. There is also a green status bar in the header. Then you get an orange header that Your Install Is Complete!

Now the fun begins! We are going to install the exact same template that I have on my localhost on my MAMP on Mac and then will start the move of my local realtor website up to Bluehost. So far so good!

I found that I was using the Orbit theme. Let me note that there are WordPress plugins out there that will help you quickly move a WordPress website from localhost up to Bluehost. I am going to show you the slow by hand method now though just for reference.

The first step is to go to your Safari browser or whatever browser you have and type in the url now for your second new Bluehost website as setup above here. In my case it is www.hillviewwebportfolio2.com.  You will then see an Admin Login Green button. Now login with your username and password that was created in the above steps.

You should now be in the WordPress dashboard that looks something like this below

15

 

Go to appearance and then themes and then find the same orbit theme as localhost Mac had. Install it and activate it.  From now on I am going to be using child themes but for now on my local orbit theme on localhost Mac I hacked and made changes directly to the orbit theme files which is never recommended, but for now this is what I did for sake of time. So now I need to use FTP to get the localhost orbit theme files up to my new orbit site as setup from the steps above for my new hillviewwebportfolio2.com website!

 

The following steps might have to be re-done. But for now I am referencing http://www.wpbeginner.com/wp-tutorials/how-to-move-wordpress-from-local-server-to-live-site/ and these are screen prints of my steps so far.

Step 4 – Export Your Localhost WordPress Database

Go into phpMyAdmin on localhost mamp Mac. Find your local database from the list on database tab. Note that mine is mywp , which I found by editing my local wp-config.php file in the root wordpress directory.  I mention above how to do this step of finding the wp-config.php file. So I clicked on mywp database in my local phpMyAdmin and I see the following on my webpage

1

 

 

 

 

Now click on the Export tab which is the fourth tab from the left as shown above. Choose Custom for the Export Method.  Select all the tables and use gripped for the compression method.  For now lets leave all the other setup items as default. Here is the screen print of the save output to file, the Char set and the compression method.

2

 

Scroll down now and click on go and the mywp.sql file will be downloaded to your Mac downloads directory.

 Step 5 – FTP Upload All WordPress Files To Bluehost Server

For now we are just saving off our downloaded mywp.sql file for a step coming up. Now we want to FTP ALL our localhost WordPress files over to our server. I will be using Filezilla. But first we have to setup a valid FTP setup for our second Bluehost website much like we did a few weeks ago for our FTP setup for our first Website.

 

 

 

 

I will provide screen prints later, but for now make sure the new plugin (cost $99) called WP Migrate DB Pro is installed both on localhost and also installed on the Bluehost server hillviewwebport1 .  If you go to tools and then settings and then the Settings tab you can copy the Secret key from the Connection Info on the Bluehost Server version of that plugin and then copy it to the Connection Info Secret key section on the Migrate DB Pro plugin on the localhost. After running the Migrate the database from the localhost will copy up to the database on the server. This is such a time saver and seems so far to work very well indeed.

Step 4 – FTP copy and replace all  Template and related files from localhost to the server

Now that the database update is complete, we need to FTP copy and replace all files from localhost up to the server. I recommend now using a second WordPress plugin called Duplicator which is free. Click on the Create New button to create a new FTP transfer package.  Archive files and Installer files. Make sure in the Duplicator settings for Archive and the Database tab that you make sure all database tables are NOT selected since we did this already with our other plugin above.  I ran the scan and did get warnings that my total size is 152.15 MB but the threshold is 150 MB.  The next step is to click on the Build Button. This creates archive and installer files. This will create files on the desktop.

Then I need to FTP these files up to Bluehost. Also make sure to install the Duplicator WordPress plugin also on the Bluehost server version of our websit

PHP and WordPress Introduction

 

zzzz 5Welcome to www.hillviewweb.com.  My E-book is coming soon on WordPress and PHP. The purpose of this website is to provide detailed information on both WordPress and the PHP server-side scripting language using tech help and tutorial formats. My name is Steve Massey and I have 31 plus years of IT experience. In March 2013 I stopped working for Computer Sciences Corporation and began my new journey with my new company Hillview Websites. I started working with clients doing ColdFusion Website development, then changed over to SquareSpace. I found that what I really wanted to do was work as closely with Web source code as I could. To meet this goal I changed over to WordPress with PHP. I found my technical home here with WordPress and PHP development and love it!  This Website is simply my daily journal of all that I am learning regarding both the WordPress CMS but also the PHP scripting language as well as CSS, HTML and JavasScript and how to create and maintain WordPress websites built with WordPress. I find that I learn best by documenting my learning process thus you will find many Posts here on this website that discuss many aspects of development.e-learning

The WordPress CMS allows for almost unlimited customization possibilities for blogs and websites. Added to the advanced flexible nature of WordPress is the ability to add and modify PHP code adding  functionality to WordPress including data updates to and from the MySQL database. This provides an almost unlimited application development set of tools for creating very useful Websites with advanced application like functionality. As noted earlier I have worked with Squarespace, the ColdFusion language and other Content Management Systems but have found WordPress to be an excellent choice and my go to tool set now for most of my Website development projects.  The PHP language with the ability to extend the Website functionality to include not only e-Commerce but many customizable data input and output features with MySQL DBMS makes it an excellent choice for all kinds of Website development projects.

I wrote the many blog entries you see in this website to capture much of the material I have been learning during the past few years with PHP and WordPress to hopefully help others in their journey of becoming proficient in all aspects of WordPress customization using PHP. Because of this some readers may find this material to be introductory and simple in nature, which is fine. I began my learning process by first studying the core PHP scripting language and then extended that learning to include all aspects of the WordPress CMS.  Most if not all of my learning plan and tools are now included in the following blogs also with PHP language review questions.  I will be adding more blog entries daily to cover more detailed aspects of PHP security and effective use of forms and plugins. Last this year I will be publishing a series of blogs on how to effectively customize your own WordPress Plugin API’s.

One aspect of WordPress that I have found to be very useful is the use of Categories. I have tried to tie each blog entry to a useful category option thus making it easier to locate a desired blog entry. Actually as it turns out I have an almost one to one relation of category title in WordPress to blog titles. I find this to be useful in finding a needed blog entry.cartoon-road-backup

 Daily Tech Notes and Tips

I will make some notes and observations here at the end of this blog daily, things I am learning that might be helpful.

  • I am using Bluehost for my WordPress site. I am seeing that it takes about three minutes for a CSS change to take effect on my web page. This I believe is due to caching on the Bluehost server. I have tried to reset Safari and other options but the bottom line is it just takes about 3 minutes for any CSS changes to take effect.  Since I use blue host I can go to this url to Varnish and then clear cache. See draft Clear Cash.
  • Unfortunately that cache clear in the first billet above did not work with BlueHost. So I am going to try and just make the css change locally to a local .css file and ftp upload it and see if that works right away.
  • Ok finally got this issue resolved today!  I just stopped Varnish on Bluehost server settings and that stopped the delay of css updates. Is instant now. very good.

Tutorial on How To Create Website using WordPress With MySQL Data

 

How to use CSS and HTML in WordPress to create a Real Estate Website using WordPress

(note that this post is currently in progress and the formatting might be a bit off until the final version is completed later today)

If you have read my previous blog entries you have seen my explanations of different aspects of using PHP and HTML and CSS to change a WordPress template to become a Real Estate website with the ability to store data in MySQL and retrieve via selection buttons on the front page. I have been learning more about both WordPress development and design aspects and wanted to share with you a tutorial of how I completed phase 1 of my Skyline Real Estate website. I don’t have the MySQL update and select working just yet but will soon and thus will write a new blog on this soon.

Keep in mind also that I am at times using in line CSS which I realize is not the best solution, I will change that later also. So here goes.

Here below is a screen print of the static front page in WordPress and then below that a scroll down a bit so you can see the PHP Select buttons I will finish later.  I will also below provide screen prints of the other static pages I created. Keep in mind I started with the Radiate theme by ThemeGrill and then made modifications as you will see later on in this blog.

2

 

3

 

5

 

7

 

8

 

9

 

10

 

Ok now that we have had a look at each of the pages I created in WordPress lets look at the php source code files and see what I did to get these results.

Lets take the first page. I created in WordPress again still using that same theme, a static first page. I called the file front-page.php.   Take a look at the code below, I will divide out the code as screen prints for now. Note that I kept the get_header() and used that from the theme. Also I do have just a tiny bit of CSS in the page style block at the top of the file and again I use inline CSS as well. Not the best , but good enough for our discussion right now. At the bottom of the file you will also see that I kept the theme’s get_sidebar() and get_footer() options as well. Basically what I did was create a number of html div tags and I placed the html and inline css inside those tags.  I did put a short javascript script section just for the google map. You might notice also that I did create another level of link buttons for Listings, Land and Rentals. These are simple internal links to other pages that I screen printed above.

So here is the front-page.php file now screen printed in sections.

1

 

2

 

Note that the screen prints have a very small font as you can tell, if you simply double click on those screen prints you can see the PHP and HTML and CSS and javascript code much better. The trick that I learned is to keep the structure in place for the responsive design template and add div tags and Html and css and javascript inside that responsive design structure. That is so important because as soon as you leave that RWD structure things start breaking down quickly.

Basically I just keep creating static pages and storing them in my template directory, again always putting in the css and html and js and all inside the RWD structure that is well in place. Here below is a list of my created static WordPress pages now.

Here below now is that list of static pages. I will write more about the process that is in place to create static pages. You can also refer to some of my previous blog entries on this as well.

 

1

 

 

How to query MySQL data using PHP with WordPress

Below is a screen print of our front-page.php output showing the drop down menus for Location and Price and then the search button.  The intent of these buttons is to allow a user to ask for or query data from the MySQL database by selecting two criteria namely the Location of the home and the price range. Before we get to our discussion on how we might code this using PHP we will first need to create an appropriate MySQL table and populate that table with data for this query. In a real life situation this database table might in fact be a table already in place on another server using SQL SERVER or some other DMBS. But for our example we will now create the table and then populate the data so that we can then code and test our PHP queries.

The first step will be to design our table for the queries.

We will need the following data in our table

  • home address
  • location
  • price of home
  • number of bedrooms
  • number of bathrooms
  • numeric primary key index (starting with 1 to xxx)

1

 

I am working on a local MAMP WordPress install on my Mac. I have a PHPMYADMIN setup already. I will create a new database called realtor which I have circled in red below.

3

 

 

Now I will create the table to store the realtor data. We already established that there are in fact 6 columns required.  Here below is as screen print of our new table now called realtordata

6

 

I will now add our 6 columns (after clicking on go from previous step) Below is a screen print of all 6 columns being added now.

7

 

I will now go to the insert tab and begin adding data to our new realtordata table.  Below is our first row added. Note that the key1 is our primary key and thus is automatically created by MySQL.

8

 

 

I added some fictitious test data to our new realtordata table as shown in the screen print below

9

 

Now that we have data in place in our realtor database and the realtordata table we can start working on the PHP and HTML (and CSS) code that will allow us to query the data directly to our front page as noted above. We will also be careful to have proper security in place too.

In my front-page.php file I currently have a simple HTML form with options hard coded as shown below for the Location button. What I want to do now is change that code to query the location data from the realtordata table with a SQL Select distinct to show only the unique location values in pull down list once the button is clicked. Below here is a screen print of the current simple HTML option list of locations that we will want to change.

11

 

As noted in some of my other blog entries there are two ways to access data from the MySQL database using PHP. One way is using PDO with Object Oriented and the second way is using MySQLi.  One advantage of using PDO is being able to change RDBMS databases quickly. Since I will only be using MySQL with my PHP here I am going to opt for the MySQLi option. Later I will show the PDO way though.

 

Here is the generic mysqli connection code we will start with for discussion purposes.

 

$db = new mysqli(‘localhost’, ‘user’, ‘pass’, ‘database name’);
if($db->connect_errno > 0){
    die(‘Unable to connect to database [‘ . $db->connect_error . ‘]’); }

—————————————————————————

Here below now is a bit more PHP  code to display a message if the database connection is either successful or in error. I am using basic if then else PHP syntax.  Note that I put this code in my front-page.php file right after our first working form mentioned earlier with hard coded option values. Here is a screen print of that code plus our new code circled now in red. Remember to double click on the image screen print to get larger view of it for better resolution.

1

 

Now that we have a successful mysqli database connect to our realtor database it is time to code a simple sql query of a table in that database. As noted earlier the table name is realtordata.  Below is my new PHP code that will query just the unique locations from the realtordata table and display to the screen.  The new query code using PHP is circled below in red.

4

 

And now below is the screen print showing the queried locations to the browser output of the front-page.php as a result  of the new code above.

8

 

 

This is all great so far, but now we need to take the location drop down menu that is currently hard coded with locations using HTML form options and we need to populate that pulldown menu with a full unique query from the realtordata table directly into that drop down menu for location. I will start explaining these steps now below. Note that I am not adding any security PHP options yet. I will be doing that later in this tutorial.

 How to Populate an Html Drop Down Menu with Values Selected From MySQL Using Output of a Mysqli Query With WordPress

I am going to provide all the code now from the starting point of database connection all the way through the select list for the pull down menu. Notice how I used embedded HTML inside the PHP section to create that select list with option values that we need for the pull down menu.

12

 

And now below a screen print of the output showing our new pull down menu with values from our select query for location.

13

 

 

How To Create Html Form from Drop Down Menu with Selected Values from MySQLi Query Using PHP in WordPress

What we have so far above is very useful because it allows us to have a pull down menu populated from a query from our MySQL table. But what we need to do now is put this code into a proper HTML form so that the user can click on the Submit button and initially have the selected item show up on the action page. That is what we will discuss now in this section.

I will start with the basic code that we already have in place and then will add the new form code with the submit button now. I will also be adding a screen print of the action page once the submit button is clicked. Our action page will be titled front-page-action.php.  Also below in the screen print is:

How to Run A Select Query from the result of a drop down selected item using PHP in WordPress with MySQL

The screen prints of the front-page.php and the action page front-page-action are displayed below. These screen prints will show for now only a simple example of the Web visitor selecting the desired location of homes from a drop down menu and then the subsequent query of all records in the realtordata table where the location matches the selected location from the drop down menu.  I am not formatting the output yet , just a simple dump for now. Note that there is an initial $db and mysqli setup on the front-page.php and then also a new $db and mysqli setup for the query on the action page for the results. So in essence this is a two step process where first the user selects the desired location from a queried list of locations in the realtordata table and then again a new query is created in the action page that will show all the data from that same table based on the selected location from the drop down menu. I will also provide a screen print below of the output.

1

 

2

 

2

 

3

 

 

 

 

 

 

4

 

 

How to Run A Second Select Query from the result of a drop down selected item using PHP in WordPress with MySQL

Note that the following example is simple the same code as above but this time using price instead of location as the select criteria. Note that I have not yet linked price and location as combined select option but will later.

The next step is to look at security issues related to mysqli queries.

How to fix PHP SQL Query SQL Injection Security Issues for WordPress, PHP and MySQL

As noted above it is important to deal with the potential security issues related to SQL Injection. I will now make some code changes to cover this important issue and show screen prints of our code above but now with corrected SQL queries to make sure we don’t run into SQL Injection issues.

 

Note that I found it is much easier to just hard code in the drop down list items using ul and li tags with select tag then reading from the database. Then use MySQLi to query the final results only.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

How To Search All Files In a directory like WordPress for a string value in a file – Mac

There are times when you want to find out what functions are assigned to an action hook in WordPress. Use Finder and go to the WordPress directory on your Mac. Then go into that directory. Then type in desired string in the right upper search box, for example add_action.  Then toggle filename to everything. Then all files with that string will show up.  Here is screen print

12

 

 

 

 

 

 

Rather then trying to search all files for the add_action() with hook name I am finding it much faster and easier to simply search using the methods outlined above to find the actual string on the theme page. Let me show you

Below you have a screen print of my theme I am currently hacking (not doing child theme yet but will I promise).  I want to find out simply where the code is for that circled in green Responsive Design so that I can change it. What I will do is find the text below for all of WordPress files using the find Everything as shown above. And that gives me the exact file. Nice.

 

55

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Now I will use the method as noted above to find the string “Design site adjusts to any mobile…”

As you can see I found the file theme-settings.php and then I edited that file!

123

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

And now the edited theme-settings.php file below with the desired function orbit_render_front_boxes(); function defined.

Much easier to find the string then try to find by file name.

444

 

 

 

 

 

 

Lets say that you have some HTML that you see in your website using Inspector on Mac. Lets then say that what you are trying to find is <p class=”flex-caption”>Text Slider 1</p> First and for-most be assured that this code IS somewhere in your template directory , in my case the orbit directory. Again we are now directly hacking our template but very soon I will be doing all this with a child theme only. So anyway I used the search option as noted above with  Any setting to find all text inside all the orbit directory files to find this string of HTML code. BUT it did not find it. It is time to break out the GREP.

Well before I get into GREP I need to say that the Finder method above DOES work great just don’t try it with a long HTML string search. I just used one key word for my search using Finder “caption” and it found it right away in theme-settings.php. The reason I did NOT find it before is that Text Slider 1 is not in the code, it is Text Slider %s for the number.  So here is the real code now below

1

 

 

 

 

Now as you can see below my jquery slides say Featured home 1 and so on. Which is not perfect but better.

2

 

 

 

 

 

 

Later I will show you how we can change the PHP code to reflect more of what we want in the caption. This is fine for now. I do want to use the theme child theme option though.

I am going to start a new Blog now because this one is too long.  Here is a link to the new Blog that will now discuss this sort of thing in more detail

New Blog – Add WP Content To Look Like Belongs.

How to change permalinks in WordPress from default p= value to user friendly value

 

How to change WordPress permalink values

WordPress automatically creates a default permalink which is really the ID number of the row in the MySQL database of your WordPress post. To show you an example I will provide a screen print below now of my Learning PHP – Section 1 blog title.

1

 

 

 

As you can see from this example the default permalink value is set to  http://www.hillviewwebdev.com/?p=83. Note that the ?p=83 in our example here is called the query string. In today’s SEO (Search Engine Optimization) world there is an advantage to changing a default numeric query string like our p=83 example to a friendly and useful text string.

If your .htaccess file is setup correctly you should be able to change your permalink values in your WordPress admin screen. Go to your WordPress dashboard and then click on settings and then on permalinks.  You will see the permalink screen below here. I selected Post Name as you can see from this screen print. This will create a URL for the WordPress post  that will use the Post Name which is a better choice for SEO then the standard ?=83 as shown above.

2

 

 

 

 

 

 

As you can see the Post name has been selected and will now be used in the url for the post name. Below now is a screen print of our WordPress post showing the new post name in the URL rather then the ?=83.  This is better for SEO Google ranking and also for user identification based on the URL name.

3

 

 

 

 

Based on this information above I am now going to change the permalink’s for all 30 of my blog posts on this website to be Post name. I believe this will help with overall SEO Google ranking and will provide easier to understand URL’s for each WordPress blog post.

 

5

 

 

 

 

 

 

 

There is one last step that you may have to complete before you have a good URL name. Go into all posts and do a quick edit and look at the Slug field as shown below here. You may want to re-create your slug titles to be a more meaningful value. For example right now my Slug for my PHP and WordPress Introduction blog is in fact wordpress-and-php-2 which is a name I gave it awhile back. I will change that now to php-and-wordpress-introduction to match exactly my true blog title.  Here now below is a screen print of this corrected blog Slug entry.

6

 

 

 

 

 

 

You can now see the corrected Slug of php-and-wordpress-introduction.  And then below the new URL of this blog showing this correct name.

7

 

 

 

 

 

 

 

There is a quick way to make sure all your Slugs match the blog titles. Just go into quick edit as noted above and copy the blog title right into the Slug field. WordPress with then automatically place the – dash signs between the url elements for you.

Learning PHP – Section 1

The following are a number of questions to help review many aspects of the PHP language. I created this list of questions to help with my daily review of PHP and thus become very familiar with the syntax over time. Some of the questions have quick examples to work with as well. While not by any means a complete list of PHP syntax, or even close I have found this to be a good daily review tool.

Learning PHP – Practice Questions

New Question 0

Code a very simple php file as plugin and put in the wp_contents/plugin directory to print ‘test’ to the header. Make sure to have add_action and the function x() in the plugin file and make sure that plugin file is in a directory with same name.

Use the following:

 

add_action(‘wp_head’,’slm’,10);

function slm()

{

echo ‘test';

}

Question 1

What is the format of a basic PHP program starting with !DOCTYPE?

What is the file name and file extension and what is the location on a Mac using MAMP?

What is the line of code to link to external css stylesheet?

Practice HTML5 with embedded PHP variables – display on browser

What is the PHP code for a simple if then else?

 

Question 2

Code an example of printing “Hello World” to the screen using both echo and then print with PHP.

 

Question 3

Create a simple PHP variable and assign the number 1 to it and print to the screen.

 

Question 4

Code a printf function and show output to screen for “My Age Is: 20″;

 

Question 5

Code a simple PHP variable x as the number 1 and print to screen with the prefix “My Number Is:”

 

Question 6

If x is 1 and y is 2 create two variables and + then – then * then / then % the two variables in that order.

 

Question 7

If x is 50 then solve for x using the concatenation if .= and += and -= and *= and /= (with x then being 500 for example the first one is $x+=500; and the second one is $x+-500; and so on.

 

Question 8

Solve for z. Keep in mind that a {} following a for – gets calculated along with main code. Here is the formula you will solve for for($y=0;$y <= $x; $y++){$z++;} start with $x=10;

 

Question 9

What is the value of $y if the formula is

$x = ‘5’;

$y = &$x;

$y = “2$x”;

 

Question 10

Solve for $y

$x = “abcdefg”;

$y = substr($x,0,4);

 

Question 11

What is ${$y}? if $x = “y” and $y = “x” ?

 

Question 12

What would be printed to the screen with the following –

<?php

echo str_replace(“Massey”,”Jones”,”My name is Steve Massey and I am a PHP programmer”);

?>

 

Question 13

What is the screen output of the following?

<?php

echo strlen(“My Name Is Steve Massey!”);

?>

 

Question 14

What is the screen output of the following?

<?php

echo strpos(“My Job Is programming PHP”,”PHP”);

?>

 

Question 15

What are the two ways you can create an index (or simple) array? Create an array with the first method (index) and dump contents. Use ‘ and not ” though you can use both.

echo to screen – my first array item is – then write first array item

Also print out the contents of an array where $x=array(1,2,3,4,5); Print out the first and second array data element using print.

 

Question 16

What is an Associative array in PHP?

 

Question 17

Create an Associative array with last name as key and age as the data.

Write code to print “The age for Massey is: 60″ using array output

 

Question 18

Define what a PHP Multi dimensional array is and how it is created.

Also create a multi dim array of guitars with Taylor, Martin and Gibson as arrays inside the guitars array with an array of model numbers like Taylor 100,200 and so on.

Also create multi cimm array from a standard Excel type of spreadsheet with first col of name and second col of address and third col of phone and fourth col of city

Here is an example of how to print out all values in a multi dim array
$x=array(‘a’=>1,’b’=>2,’c’=>array(11,12,13,14,15,16,17));

foreach($x as $letters=>$numbers)
{
echo($letters.” “.$numbers);
foreach($numbers as $num)
echo($num);

}

 

Question 19

Create a PHP multidim array for guitars with its own array of Taylor, Martin and Gibson and each guitar model is then listed as an array for each type of guitar.

The best way to create a multidimensional array is to first create a valid associative array and then put into one of the associated array elements another array rather then a value. This is a better way to approach this problem.

Dump the array after it is created.


Practice various types of PHP arrays
//create simple or index array
$x=array(1,2,3,4,5,6,7,8,9,10);

//var_dump output
echo(‘<pre>’);
var_dump($x);
echo(‘</pre>’);

//output using just one data item from the array
echo($x[0]);

 


//create simple or index array using method 2 []
$x[0]=1;

echo($x[0]);

 


//create an associative array
$x=array(‘a’=>100,’b’=>200,’c’=>300,’d’=>400);

//print one data element from the array
echo($x[‘a’]);

 


/create an associative array multi dim with 2 dim
$x=array(‘a’=>100,’b’=>200,’c’=>array(1,2,3,4,5,6,7,8,9),’d’=>400);

//print one data element from the array
echo($x[‘a’]);
echo(‘<br>’);
echo($x[‘c’][2]);

 


In this example the primary key data for this 2 dim array comes from the form
$f1 = $_POST[food1];
$f2 = $_POST[food2];
$f3 = $_POST[food3];
$f4 = $_POST[food4];
$f5 = $_POST[food5];
$f6 = $_POST[food6];
$f7 = $_POST[food7];
$f8 = $_POST[food8];
$f9 = $_POST[food9];
$f10 = $_POST[food10];
$f11 = $_POST[food11];
$f12 = $_POST[food12];
$f13 = $_POST[food13];
$f14 = $_POST[food14];
$f15 = $_POST[food15];
$f16 = $_POST[food16];
$f17 = $_POST[food17];

//best way to create a two dim array
$food = array
(
array($f1,4,0),
array($f2,4,0),
array($f3,4,0),
array($f4,4,0),
array($f5,4,0),
array($f6,4,0),
array($f7,4,0),
array($f8,4,0),
array($f9,4,0),
array($f10,4,0),
array($f11,4,0),
array($f12,4,0),
array($f13,4,0),
array($f14,4,0),
array($f15,4,0),
array($f16,4,0),
array($f17,4,0));

 

Question 20

Display to the screen the contents of all the array elements including sub arrays in Question 19 but don’t use var_dump, use echo and then put a description before the array output like “The Taylor models include: 100 and 200 and so on.

 

Question 21

What is a PHP Super Global Array and how is it used primarily with PHP? Also what are the two primary standard PHP Super Global arrays that we will be using?

Which standard PHP SGA does NOT display the data inside the URL thus providing for a more secure transfer of data?

What is the first thing you would create then for use of $_POST?

 

Question 22

Code a very simple form.html with just one name input on the form and with PHP code required to use $_POST for data transfer to the action web page. Use the file superGlobals.php for the action page.

 

Question 23

List out all the primary PHP operators that you would use for conditional expressions. Include also the and and or.

 

Question 24

Create PHP code that would show a simple if x=100 and y=”NAME” then print “You are correct”.

 

Question 25

Using PHP and HTML create an HTML form that asks for your last name and your phone number. Code a conditional statement that verifies you are in fact Steve Massey and your phone number is 555-163-8394 then print you are verified now as Steve Massey.

 

Question 26

Using PHP and HMTL5 create an HTML form that asks a yes or no question. Are you over the age of 60? This will be a radio button form option with only two choices.

 

Question 27

Code a simple PHP example of the Ternary Operator. This is a simple one line if then logic.

 

Question 28

Code a very simple PHP While Loop statement to display the numbers

12345678910

 

Question 29

TBD

 

Question 30

What is the difference between a PHP While Loop and a PHP Do While Loop?

Code a simple example of a PHP Do While Loop. (Hint: Just create a normal PHP While loop and move while to very end and put Do on top.

 

Question 31

Code a simple PHP For Loop. (This For Loop is the preferred method for many PHP programmers)

 

Question 32

What is the proper PHP syntax for foreach for an index or simple array and what does it do?

Code a simple index array with data. Then code a foreach to print the array values.

What can foreach be used on with PHP and what can it not be used for?

 

Question 33

Code a foreach module for an ASSOCIATIVE ARRAY.

 

Question 34

Code a quick HTML box with in a box using <table>. Note that I recommend actually using <div> tags for table data because I have found that the CSS sometimes in some browsers does not work correctly with table height. For example I used this CSS below here and it does not seem to work at this time.

<style>
table {
width: 80%;
}
th {
height: 200px;
height: 100%;
}
td {
height: 200px;
height: 100%;
}
</style>

Answer:

<table border=”1″>
<tbody>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Info</th>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>Relative NameParent NameInfo2</td>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
</tr>
</tbody>
</table>

 

And then the output below. Again I recommend using Div tags for tables because of that CSS issue in some browsers.

1

 

 

(please go to new blog – How to create HTML table within a table for a continuation of this blog)

Question on Hash

turn into hash

$password = md5($password);
var_dump($password);

output is string(32) “d41d8cd98f00b204e9800998ecf8427e”

Question 35

Use PHP and code a simple function with a switch statement inside that evaluates the input parameter and runs a small command based on parameter. This is how WordPress PHP tags were created.

<?php
function x($name)
{
switch($name)
{
case(‘steve’);
$output = ‘you selected steve';
break;

case(”);
$output = ‘you did not select anything';
break;
}
return $output;
}

echo x();
?>

Learning PHP – Section 2

This blog is a continuation of the first blog post Learning PHP – Section 1.

 Learning PHP – Practice Questions

 

Question 34

Create a simple index array with numbers 1 – 4

Then print out that array data item 1 to screen

ANSWER:

$x=array(1,2,3,4);
print($x[0]);

 

Question 35

Create a simple associative array with lastname as key name and age as data. Then print out the fourth data item and key name with print.

ANSWER:

$x=array(‘massey’=>60,’jones’=>90,’smith’=>50,’wire’=>10);
print($x[‘wire’]);
print(‘<br>’);
print($x[‘smith’]);

 

Question 36

Take the array as defined in question above and add a second dimension to jones with letters a thru d. Thus making this a multi-dim array. And then print out that new data items.

ANSWER:

$x=array(‘massey’=>60,’jones’=>array(‘a’,’b’,’c’,’d’),’smith’=>50,’wire’=>10);
print($x[‘jones’][‘0′]);

 

Question 37

Code a simple SWITCH Case statement with three options

Also review mods

ANSWER:

$number = ‘100’;
switch($number)
{
case ‘100’;
echo(‘your number is 100′);
break;
case ‘200’;
echo(‘your number is 200′);
break;
case ‘300’;
echo(‘your number is 300′);

}

 

Question 38

Review of Combined Operators

  • If $x =10 then solve for x —   $x.= 100;
  • If $x=10 then solve for x —    $x+=100;
  • If $x=10 then solve for x —    $x-=100;
  • If $x=10 then solve for x —    $x*=100;
  • If $x=10 then solve for x —    $x/=100;

Answer

  • 10100
  • 110
  • -90
  • 1000
  • .10

 

Question 39

Code a single line for statement in PHP to print the numbers 1 – 10

Answer

for($x=0; $x<11; $x+=1)

{

echo($x);

}

 

Question 40

Lets set $x=”abcdefgh”

What is the PHP code to print only the letters cde?

Answer

print(substr($x,2,3));

 

Question 41

Code the PHP statement that would change the statement “I want to buy fruit” to

“I want to buy milk”

echo str_replace(“fruit”,”milk”,”I want to buy fruit”);

 

Question 42

What is the PHP code for finding the length of this string “xxxxx”?

Answer

print strlen(“xxxxx”);

 

Question 43

What is the PHP code for finding the position of the letter “a” in the string xxxaxxxx?

echo strpos(“xxxaxxxx”,”a”);

 

Question 44 – 46 TBD

Question 47

PHP function

A PHP function if written properly will only do one thing.  If you pass data into a function it is called an argument.  If your function produces something, which is should, then it is called return.

So basically arguments are passed into a PHP function and then something is done in the function and then the function returns something.

Keep in mind that inside the function the arguments passed into the function turn into function parameters.

A PHP program written well will have as much as 95% functions.  If you “grew up” with Fortran as I did functions are nothing more then sub routines.

Here is the simplest function I can think of to start out with. Keep in mind that in the real PHP world the functions will be in a separate file and then called from your current PHP code.

<?php

//function is created

function x()

{

echo(‘hi’);

}

//function is called

x();

?>

As noted already the PHP function has arguments that are passed into the function and then parameters inside the function that use the arguments.

But first lets create a very simple PHP function that just has arguments passed into the function.

<?php

function x($num)

{

echo($num+1);

}

x(1);

?>

Here are some simple function examples for PHP

<?php
function p($input)
{
echo($input);
}

function pf($input)
{
printf($input.’%d’,60);
}

function b()
{
echo(‘<br>’);
}

function varx($input)
{
$x=$input;
echo($x);
}

function calc($a,$b)
{
echo($a*$b);
}

p(‘this is a test’);
b();
b();
pf(‘wow ‘);
b();
b();
varx(100);
b();
b();
calc(100,10);

?>

</html>

Question 48 TBD

Question 49

  • Code simple ul list with li
  • Code simple form with submit button
  • Code simple table using tr and td

Answers

  1. <ul>

<li>one</li>

<li>two</li>

<li>three</li>

here is how to get rid of bullits. must do inline

<ul id=”A123RQ”>
<li style=”list-style-type: none;”>cow</li>
<li style=”list-style-type: none;”>dog</li>
<li style=”list-style-type: none;”>bat</li>
<li style=”list-style-type: none;”>car</li>
<li style=”list-style-type: none;”>tree</li>
<li style=”list-style-type: none;”>fish</li>
</ul>
2. see form above

3.table with tr td

<table style=”width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

TITLE* Learning PHP – Section 3

Learning PHP – Section 3 is a continuation of Sections 1 and 2 below

 

Question 50

What are the five basic tools you will use for PHP and MySQL development? Describe what each does.

  1. MAMP – locally installed on Mac used to start Apache server and MySQL server and Preferences setup.
  1. MyMAMPwp – Shows up on local browser as localhost:8888  This is the WordPress output page as coded in the WordPress backend number 5 tool below.
  1. Localhost-WP which is the htdocs subdirectory under WordPress directory on the Mac. This will show the list of all php files you are working on and allow you to edit them from here.
  1. PHPMYADMIN – this is the MySQL admin screen that allows for creating a database, tables and data entry and all MySQL DBA admin functions.
  1. MYMAMPWP – As noted above this is the MyMAMPwp that we setup under initial configuration of MySQL and PHP. This is the login entry point for the WordPress backend to do all development and plug in development and Theme work.

Here below is a screen print of the WordPress Dashboard once logged into the WordPress backend development page which again is local on the MAC. Another Hillview Websites BLOG will later show more WordPress and PHP development steps.

 

Question 51

One of the most important aspects of PHP is the ability to CRUD

from PHP to MySQL RDBMS using the mysqli API

What does CRUD stand for and what does CRUD do with PHP and MySQL?

(Create Read Update Delete)

You will use PHPadmin for all MySQL admin tasks

To get to the PHPAdmin screen find  the MAMP Icon

  • Create a new database using utf8_general_ci
  • Create two new tables Employees and department
  • Insert data into the two new tables

What are the three types of API extensions for PHP?   (MySQL API, MySQL PDO, MySQLi )  You will use MySQLi for this tutorial.

What does CRUD stand for?

(Create Retrieve update and delete)

 

Question 52

What Happens With CRUD?

Insert

Select

Update

Delete

 

Question 53

What Two Interfaces Does PHP Have?

1) OOP (object oriented programmiung)

2) Procedural (older)* You will focus on this option for now in this tutorial.

 

Question 54

What is the code you would use to connect with MySQL?

// Create connection
$con=mysqli_connect(“localhost”,”root”,”root”,”temp”);

// Check connection
if (!$con)
{
die(“error”);
}
{

echo “Success”;

echo(“<br>”);echo(“<br>”);

}

mysqli_close($con);

 

Question 55

What is the PHP code  you would use to SQL query the database?

//select
$result = mysqli_query($con,”SELECT * FROM name”);
while($row = mysqli_fetch_array($result))
{
echo $row[‘lastname’];
echo “<br>”;
}

//close the connection
mysql_close($con);

 

Question 56

TBD

Question 57

How would you code a mysqli insert records to our name database in MySQL?

//insert records
mysqli_query($con,”INSERT INTO name (lastname, firstname, middle, phone)
VALUES (‘Johnson4′, ‘Bobby’,’I’,’5411-920-3940′)”);
echo(“One record added”);

 

Question 58

How would you code a mysqli update?

mysqli_query($con,”UPDATE name SET phone=’9999999′);

 

Question 59

How would you code a mysqli database connection close?

mysqli_close($con);

 

Question 60

What code would you write with mysqli API and HTML5 and PHP to create a form and pass the form data directly into the MySQL database?

First you would create a new file called insert.php

Next you would start creating the form in the HTML section (not the PHP section) of that file much like we did awhile back in our question regarding how to create a form.

Here is the code for the form to update our database called temp

<!– Html5 form for insert into MySQL database called temp –>

<form action=”insertaction.php” method=”POST”>
<p>Last Name</p><input name=”lastname”>
<br>
<br>
<p>First Name</p><input name=”firstname”>
<br>
<br>
<p>Middle</p><input name=”middle”>
<br>
<br>
<p>Phone</p><input name=”phone”>
<br>
<br>
<br>
<br>
<input type=”submit” action=”submit”>
</form>

Next we will code our action php file. This is called insertaction.php as noted above under name.

In our insertaction.php file we start with our mysqli connection code as we used before. Then we create variables for each of the form input names so we can turn the $_POST[] into variable data. Then we will code our mysqli_query code to insert into the database.

<?php

// Create connection
$con=mysqli_connect(“localhost”,”root”,”root”,”temp”);

// Check connection
if (mysqli_connect_errno()) {
echo “Failed to connect to MySQL: ” . mysqli_connect_error();
}
echo “Successful MySQL Database Connection!”;
echo(“<br>”);echo(“<br>”);

//insert records
mysqli_query($con,”INSERT INTO name (lastname, firstname, middle, phone)
VALUES (‘$_POST[lastname]’, ‘$_POST[firstname]’,’$_POST[middle]’,’$_POST[phone]’)”);
echo(“One record added”);
echo(“<br>”);echo(“<br>”);

//select  can have where and order by also
$result = mysqli_query($con,”SELECT * FROM name”);
while($row = mysqli_fetch_array($result)) {
echo $row[‘lastname’] . ” ” . $row[‘firstname’]. ” ” . $row[‘middle’]. ” ” . $row[‘phone’];
echo “<br>”;
}

//close connection
mysqli_close($con);

?>

 

Question 61

As a final exam, code a form with inputs that get passed to an action page which in turn then get inserted into the database (that you also create from scratch) table and then a new form that will print out all results from the database on the screen.

Here is example form code and CSS3:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h2>Quiz Practice</h2>
<p>————————————-</p>

<br>
<br>
<br>

<form action=”test.php” method=”POST”>
<p>First Name:</p><input class=”subform” name=”firstname”><br>
<p>Last Name:</p> <input class=”subform” name=”lastname”><br>
<p>Middle Initial:</p> <input class=”subform” name=”middle”><br>
<p>Address:</p><input class=”subform” name=”address”><br>
<p>City:</p><input class=”subform” name=”city”><br>
<p>State:</p><input class=”subform” name=”state”><br>
<p>Zip Code:</p><input class=”subform” name=”zip”><br>
<p>Phone:</p> <input class=”subform” name=”phone”><br>
<br>
<br>
<br>
<p>Would you like additional Information?</p>    <br>
<input type=”radio” name=”choose” value=”Yes”>Yes</input>
<input type=”radio” name=”choose” value=”No”>No</input>

<br>
<br>
<br>

<input type=”submit” value=”Submit”>

</form>

And below is the simple CSS3 for this form

—————————————————————-

p {
margin-bottom:3px;
color:black;
display:-webkit-box;
margin:0;
}

body {
background-color:#FFEFD5;
}

.subform {
color:black;
display:-webkit-box;
width: 160px;
}

Examples of how to code your web page using basic HTML but then embedding your PHP code inside of that HTML.

<?php
$name=”Steven Massey”;
$job=”PHP Programmer”;
$country=”USA”;
?>
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>Quiz Practice</h2>
<p>————————————-</p>

<h1>This is an important reminder:</h1>
<p>This is <?=$name ?>. I am here because I am a <?= $job ?></p>

Notice here above that I created my PHP variables before the DOCTYPE at the top and then I just started creating normal HTML and then when I wanted to embed just the PHP variables I used the <?=  ?> to embed the PHP variable right inside the HTML.

In PHP the trim function would take ‘   test’ and change it to ‘test’ taking out white spaces.

example:  trim(‘  test’);

 

CSS and Responsive Web Design

I am writing this new blog entry today Tuesday March 10,2015 at 10:30 AM PDT. I believe this is one of the more challenging aspects of Web design. This is just a quick introduction to this topic!

I am going to use my ongoing tutorial Website (which I am going to publish live soon using BlueHost). If you have been following my other Blog entries you will know that the title of my website is Skyline Real Estate. What I am going to do today is to actually go backwards just a bit. I had a fully functional front page for this website completed last week as you may recall. See Website link. You can see in that blog entry that I had the front page in pretty good shape with pull down menus, images added and such. While that is very nice I found that this newly created page in fact did not abide by the proper WordPress template RWD (responsive Web Design) functionality and looked terrible on iPhones, iPads and even smaller Mac and PC screens. Time to fix this issue!

Look at Wikipedia for a good definition of RWD.

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

If you Google or read technical books you will find as I did that there are many ways to approach RWD including using HTML5 <table> tags and various methods of using HTML5 <div> tags. I am not going to attempt at this time to outline all the possible options for proper RWD because there is way to much information to wade through. But what I am going to do right now is show you how I used the CSS and <div> option for RWD that was used in the WordPress template called Radiate.  It is in fact a good RWD template BUT keep in mind if you create a brand new static table it will NOT automatically show up with proper RWD.  BUT the good news is there is a way to fix this and that is what I will show you now.

 

Tutorial on Responsive Web Design

As noted I am going to go backwards just a bit and show you the Skyline Real Estate Website as it now stands but only with my navigation buttons for Listings, Land and Rentals. I also am color coding some of the Div sections so that we can see how things work. So here below now is a screen print of what I have so far. Keep in mind this has a pretty good RWD functionality now, not perfect but a good start.

1

Now if I reduce the size of this window to the left you can see that my new navigation buttons of Listings, Land and Rentals all line up nicely now with good RWD functionality Here below is a screen print of that.

2

So how exactly did I do this?

You might recall that I used an action hook with WordPress and created and used a new file called front-page.php. I have greatly reduced the code in that page to only display the header and my new navigation buttons for Listings, Land and Rentals. You might also recall that I am not using a WordPress child theme at this time, though I will later, but for now I am hacking the ThemeGrill Radiate theme directly, which I don’t recommend, but for sake of time I will do this just for now.

The other thing to note is that I have moved all my CSS for this front-page now to a separate file called steve.css. I will be referring to that file many times during this blog writing. Also note that the header.pdf which is called from the get_header() function in the front-page.php file is already full RWD so I did not really do anything at all to the header. All I have to worry about right now and change is the content in the front-page.php file following the header code.

I also should note that while I use steve.css for all my CSS I do in fact use just a bit of inline CSS , just so I can show things quickly and how it works. Hope this is not confusing.

Without further adieu below is my simple and cleaned up front-page.css code now. Keep in mind that the style.css is also used so I now have inline CSS and steve.css and style.css all of which I will be referring to a lot.

3

Not too impressive and not to much going on yet BUT what is happening is a pretty good attempt at RWD with a nice collapsing Listings and Land and Rentals Navigation button set. So how does this all work for RWD now?

I should note that I am using RWD functionality that is both in WordPress standard but also in the ThemeGrill Radiate theme. Thanks to ThemeGrill for providing a very good RWD solution. As you can see from the front-page.php file just above there is an id=”page”. Note that in the style.css there is in fact a media query as noted below. I won’t go into what a media query is right now but refer to the very excellent book titled “Responsive Web Design” by Sams Teach Yourself in 24 Hours by author Jennifer Kyrnin for an excellent explanation of Media queries. Basically Media queries allow for our RWD on various size platforms like iPhones and iPads and such. So here below is that Media Query code

/* =Responsive Structure
———————————————– */
@media screen and (max-width: 1308px) {
#page {
width: 100%;
}
.inner-wrap {
width: 96%;
}
}
@media screen and (max-width: 782px) {
body.admin-bar .header-wrap {
top: 45px;
}
body.admin-bar #parallax-bg {
top: 14px;
}
}
/* All Mobile Portrait size smaller than 768 (devices and browsers) */
@media screen and (max-width: 768px) {
#primary, #secondary {
float: none;
width: 100%;
}
.site-branding {
margin-right: 0;
}
.menu-toggle,
.main-navigation.toggled .nav-menu {
display: block;
}
.main-navigation ul {
display: none;
}
.site-branding {
max-width: 60%;
}
.main-navigation {
margin: 10px 25px 0 0;
margin: 1rem 2.5rem 0 0;
}
.site-header .menu-toggle {
background-color: #FFFFFF;
color: #632E9B;
}
.site-header .menu-toggle:hover {
color: #632E9B;
background-color: #FFFFFF;
}
.main-small-navigation ul {
width: 200px;
margin-left: -134px;
}
.main-small-navigation ul ul {
margin-left: 0;
}
.tg-one-third {
width: 100%;
float: none;
}
}
@media only screen and (max-width: 600px) {
body {
margin-top: 0 !important;
}
.header-wrap {
position: relative;
}
body.admin-bar .header-wrap {
top: 0;
}
.site-title { font-size: 22px; padding-top: 16px; }
}

Note that there is also a class of hfeed site and site-branding all which have proper CSS for RWD as well. I did create a future CSS hook though with <div class=”header-wrap1 clearfix1″; style=”background-color:; “> for future reference.


 

Ok we have a great start now with a pretty good RWD experience with our Listings and Land and Rentals Navigation page buttons. I will now move onto the next set of page elements for images and text that we also want to include in our RWD experience. I will show now how to add the three photos we had previously in the non RWD version. Here is a screen print of what we had before (non RWD). You can see those three photos below that I will now add with RWD. Note that I have permission from istockphoto.com to use these photos.

4

Note that the front-page.php that I am going to be showing you has some more elements that I will be adding, for example a jQuery box with scrolling info. But again I am going to focus on how to get this to work as RWD and collapse and work on various size of platforms.

I added a query slideshow with 2 second interval inside then div’s that are already setup for RWD. Here is the code below for the front-page.php now.

6

As noted earlier in this blog RWD or Responsive Web Design can be a bit tricky, at least for me. I have only showed you one simple example and this subject of RWD is a big one and deserves and requires much more detail and explanation. I will be creating a new blog with more details of RWD in the future. In the meantime what I have learned so far is to always use the existing RWD in your template you are working with and add elements carefully inside the RWD structure that is already in place. If you add something outside the RWD structure things start breaking down quickly.

HTML div and table Tags

If I had to say what my greatest challenge with the entire topic of PHP and WordPress and Blog and Website development it would without a doubt be the topic of HTML Layouts for pages using <div> and <table> and the general layout of pages with columns, images , text, float and so on. Perhaps RWD right behind this topic . So I will spend just a bit of time talking about this area of web design and development today.

I will be starting off with very basic fundamentals of this topic. A book that has helped me a lot with my understanding of HTML Layouts using tags like div and table is “Murach’s HTML5 and CSS3 by Zak Ruvalcaba and Anne Boehm.”  I highly recommend this book for this topic.

 

Tutorial on HTML div and table tags

Here is a basic test.php file layout that I will start with.

1

We will start with the div html tag first. Later we will discuss the table tag.  I will be using in line css style which later will go into an external css file. Below is a div tag with some inline CSS styling added and then a screen print of the div section.

2

Now I will add a div section inside a div. Below you will see a white box inside a large grey box.

3

Now I will make a few changes to the css and add some Lorem ipsum with some CSS padding. Notice that I am using inline CSS for now, just to show you the changes with CSS right away and have the code near by for reference.

5 

We will below try this again but this time with a class=”rect”

7

And below we add two more rectangles so that we have three across horizontally.

9

Now below we are going to have a rectangle inside a rectangle which later will be our navigation to the right of our real estate icon on our web page.

11

And below we expanded things a bit by having two rectangles inside the larger rectangle and one is floated left and the other right.

13

Great, now we are ready to apply this to our WordPress Real Estate website. Below is our current WordPress header.php file and then below that our current green navigation box. Our goal is to now apply what we outlined above so that we have an Icon to the left and the navigation menu to the right both accomplished by float left and right.

14

And now below this the current output we have so far.

15

So now we want to edit our WordPress header.php file (later I will show how to use child themes).  But at this point since we are creating really a new navbar menu section we will have to add an action hook for our new menu. I will write a new blog on this method now.   First it might be  good to review my Blog Post – Action Hooks. 

Another option for table grid of real estate images and photos on our front-page.php is to not use the <table> tabs for everything but make the basic layout using <div> tags within <div> tags and CSS for box sizes and then use perhaps the <table> tags for the more detailed info inside each box.  I have recently seen a trend in web design and development to go more with <div> tags rather then using <table> for html boxes.

Here is my new front-page.php file which now shows this method, at least a start for the boxes of data using HTML <div> rather then HTML <table> tags as noted earlier.

Here is my CSS in the <style> tags on the top of the file

<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other
* ‘pages’ on your WordPress site will use a different template.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>
<div id=”primary” class=”content-area”>
<div id=”content” class=”site-content” role=”main”>
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<header class=”entry-header”>
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class=”entry-thumbnail”>
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<!– slm <h1 class=”entry-title”><?php the_title(); ?></h1> –>
</header><!– .entry-header –>
<div class=”entry-content”>
<!– slm START OF AA MASTER REALTOR THREE HOUSE PAGE.php code –>
<body>
<style>
#header {
background-color:black;
padding: 50px;
}
.ClearFix:after, .ClearFix::after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
ul
{
list-style-type: none;
line-height: 25px;
}
a href {
color: blue;
}
.box {
float:left;
width:200px;
height:100px;
margin:-1px;
border-style:solid;
border-color:blue;
padding:15px;
padding-bottom:5px;
}
.box2 {
float:left;
width:400px;
height:100px;
margin:-1px;
border-style:solid;
border-color:blue;
padding:15px;
padding-bottom:5px;
}
</style>

And now the new section and div tags within each other to create our desired box effect for realtor data. I also included all the required code for this first page (index.php like)

<div id=”page” style=”margin-left: -220px !important;”>
<section>
<section id=”container-content” style=”width: 960px;”>
<section id=”content” class=”ClearFix” role=”article”>
<div style=”padding:0px; id=”searchresults”>
<div class=”box”>
house1.jpg goes here
</div>
<div class=”box2″>
house1.jpg INFO goes here
</div>
<div class=”box”>
house1.jpg final right info and blue links
</div>
</div>
<div style=”padding:0px; id=”searchresults”>
<div class=”box”>
house2.jpg goes here
</div>
<div class=”box2″>
house2.jpg INFO goes here
</div>
<div class=”box”>
house2.jpg final right info and blue links
</div>
</div>
<div style=”padding:0px; id=”searchresults”>
<div class=”box”>
house3.jpg goes here
</div>
<div class=”box2″>
house3.jpg INFO goes here
</div>
<div class=”box”>
house3.jpg final right info and blue links
</div>
</div>
<div style=”padding:0px; id=”searchresults”>
<div class=”box”>
house4.jpg goes here
</div>
<div class=”box2″>
house4.jpg INFO goes here
</div>
<div class=”box”>
house4.jpg final right info and blue links
</div>
</div>
<div style=”padding:0px; id=”searchresults”>
<div class=”box”>
house5.jpg goes here
</div>
<div class=”box2″>
house5.jpg INFO goes here
</div>
<div class=”box”>
house5.jpg final right info and blue links
</div>
</div>
</section>
</section>
</section>
</div>
<!– slm END OF AA MASTER REALTOR THREE HOUSE PAGE.php code –>
<?php the_content(); ?> <!–slm the_content is an action filter –>
<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”><span class=”page-links-title”>’ . __( ‘Pages:’, ‘twentythirteen’ ) . ‘</span>’, ‘after’ => ‘</div>’, ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’ ) ); ?>
</div><!– .entry-content –>
<footer class=”entry-meta”>
<?php edit_post_link( __( ‘Edit’, ‘twentythirteen’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
</footer><!– .entry-meta –>
</article><!– #post –>
<!– slm <?php comments_template(); ?>
<?php endwhile; ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

And now below we see the new output with the grids in place ready for either table or css formatted detailed data (and image too)

By using CSS and HTML and sizing the boxes you can create a nice layout for a realtor site as shown below.

<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other
* ‘pages’ on your WordPress site will use a different template.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>
<div id=”primary” class=”content-area”>
<div id=”content” class=”site-content” role=”main”>
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<header class=”entry-header”>
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class=”entry-thumbnail”>
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<!– slm <h1 class=”entry-title”><?php the_title(); ?></h1> –>
</header><!– .entry-header –>
<div class=”entry-content”>
<!– slm START OF AA MASTER REALTOR THREE HOUSE PAGE.php code –>
<body>
<style>
#header {
background-color:black;
padding: 50px;
}
.ClearFix:after, .ClearFix::after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
ul
{
list-style-type: none;
line-height: 25px;
}
a href {
color: blue;
}
.box {
float:left;
width:150px;
height:155px;
margin:-1px;
border-style: ;
border-color:#f6f6f6; <!– #f6f6f6;–>
border-width:1px;
padding:5px;
padding-bottom:0px;
padding-left:0px;
}
.boximg {
float:left;
width:250px;
height:155px;
margin:-1px;
border-style: ;
border-color:#f6f6f6; <!– #f6f6f6;–>
border-width:1px;
padding-top:0px;
padding-left:0px;
}
.boximg img{
float:left;
width:250px;
height:155px;
margin:-1px;
padding-top:5px;
padding-bottom:0px;
padding-left:0px;
}
.box2 {
float:left;
width:500px;
height:155px;
margin:-3px;
border-style: ;
border-color:#f6f6f6; <!– #f6f6f6;–>
border-width:1px;
padding:0px;
padding-bottom:0px;
}
.box3 {
float:left;
width:180px;
height:140px;
margin-top:5px;
border-style:;
border-color:#f6f6f6; <!– #f6f6f6;–>
border-width:1px;
padding-left:10px;
padding-top;5px;
padding-bottom:0px;
}
.box4 {
float:left;
width:100px;
height:140px;
margin:0;
border-style:;
border-color:#f6f6f6; <!– #f6f6f6;–>
border-width:1px;
padding:0px;
padding-bottom:0px;
}
.box5 {
float:left;
width:120px;
background-color:;
height:50px;
margin:0;
border-style:;
border-color:#f6f6f6; <!– #f6f6f6;–>
border-width:1px;
padding:0px;
padding-bottom:0px;
}
.box6 {
float:left;
background-color:;
width:150px;
height:100px;
margin:0;
border-style:;
border-color:#f6f6f6; <!– #f6f6f6;–>
border-width:1px;
padding-top:10px;
padding-bottom:0px;
}
#bigbox {
float:right;
width:1000px;
height:180px;
margin:0;
border-style:solid;
border-color:#f6f6f6; <!– #f6f6f6;–>
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
p.clear {
clear:both;
}
p4 {
font-family: sans-serif;
font-size: 20px;
color:#437CB8;
line-height: 4px;
}
p5 {
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color:black;
}
p6 {
font-family:Verdana, Geneva, sans-serif;
font-size: 13px;
color:lightgrey;
}
p7 {
font-family:Verdana, Geneva, sans-serif;
font-size: 14px;
color:#004282;
}
p8 {
font-family: sans-serif;
font-size: 22px;
color:black;
}
p9 {
font-family: sans-serif;
font-size: 11px;
color:blue;
line-height:10%;
}
</style>
<!– <p4>2839 Boxer Ave. </p4> –>
<div id=”page” style=”margin-left: -400px !important;”>
<section>
<section id=”container-content” style=”width: 960px;”>
<section id=”content” class=”ClearFix” role=”article”>
<section id=”bigbox”>
<div style=”padding:0px; id=”searchresults”>
<div class=”boximg”>
<img src=”house1.jpg”>
</div>
<div class=”box2″>
<div class=”box3″>
<p4>3674 Fish Ave.</p4><br>
<p5>Burbank, CA 84767</p5>
<br>
<br>
<p6>HOMEServices Inc.</p6>
<br><br>
<img src=”icon2z.jpg”>
</div>
<div class=”box4″>
<p5>FEATURED</p5><br>
<strong><p5>4 Bedrooms</p5></strong>
</div>
<div class=”box5″>
<strong><p7>Single-Family</p7></strong>
</div>
<div class=”box6″>
<p8><strong>$230,900</strong></p8><br>
<p6><strong>Prequalified</strong></p6>
</div>
</div>
<div class=”box”>
<button type=”button” onclick=”alert(‘Hello world!’)”>Details</button>
<br><br>
<p9>Email Bob Smith, Broker at bobrealtor@realty.com</p9><br>
<img src=”heart.png” style=”width:20px;”>
</div>
</section> <!– end of big box–>
</section>
</section>
</section>
</div>
<!– slm END OF AA MASTER REALTOR THREE HOUSE PAGE.php code –>

<?php the_content(); ?> <!–slm the_content is an action filter –>
<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”><span class=”page-links-title”>’ . __( ‘Pages:’, ‘twentythirteen’ ) . ‘</span>’, ‘after’ => ‘</div>’, ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’ ) ); ?>
</div><!– .entry-content –>

<footer class=”entry-meta”>
<?php edit_post_link( __( ‘Edit’, ‘twentythirteen’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
</footer><!– .entry-meta –>
</article><!– #post –>
<!– slm <?php comments_template(); ?>
<?php endwhile; ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

And now the output below:

And adding more sections below”

2

My system for making a good grid of data as shown below in the right Selection box is by using div’s and unique CSS boxes for each section and then color coding the background of each section so that I can see how things line up. I then take out all the background color as a last step. Here is the HTML and CSS code and then a screen print of what I have so far using this method.

<?php
/**
* The template file to show the front page display.
*
* @package ThemeGrill
* @subpackage Radiate
* @since Radiate 1.0
*/
get_header(); ?>
<?php
$page_array = array( get_theme_mod( ‘page-setting-one’ ), get_theme_mod( ‘page-setting-two’ ), get_theme_mod( ‘page-setting-three’ ) );
$get_featured_pages = new WP_Query( array(
‘posts_per_page’ => 3,
‘post_type’ => array( ‘page’ ),
‘post__in’ => $page_array,
‘orderby’ => ‘post__in’,
‘ignore_sticky_posts’ => 1
));
?>
<div id=”featured_pages” class=”clearfix”>
<?php
$j = 1;
while ( $get_featured_pages->have_posts() ) :
$get_featured_pages->the_post();
if( $j % 2 == 1 && $j > 1 ) { $page_class = “tg-one-third tg-one-third-last”; }
else { $page_class = “tg-one-third”; }
?>
<div class=”<?php echo $page_class; ?>”>
<div class=”page_text_container”>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
<h1 class=”entry-title”><a title=”<?php the_title_attribute(); ?>” href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h1>
<?php the_excerpt(); ?><a class=”more-link” title=”<?php the_title_attribute(); ?>” href=”<?php the_permalink(); ?>”><?php _e( ‘Read more’,’radiate’ ); ?></a>
</div>
</div>
<?php $j++;
endwhile;
wp_reset_postdata();
?>
</div>
<style>
.content {
float:right;
width:1000px;
height:900px;
margin:0;
border-style:;
background-color:#f4f4f4;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
.box1 , .box2 , .box3{
float:left;
width:200px;
height:150px;
margin-left:20px;
margin-top:30px;
border-style:solid;
border-color:#D3D3D3;
background-color:#ffffff;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
img{
float:left;
width:180px;
height:140px;
margin-left:0px;
margin-top:0px;
border-style:;
background-color:#;
border-width:1px;
padding-top:4px;
padding-bottom:4px;
padding-left:10px;
}
.boxselector {
float:left;
width:270px;
height:275px;
margin-left:20px;
margin-top:30px;
border-style:solid;
background-color:#8A0D15;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
.microbox1 { /* Location Label–> */
float:left;
width:250px;
height:25px;
margin-left:12px;
margin-top:0px;
padding-top:10px;
padding-bottom:0px;
background-color: ;
}
.microbox2 { /* Salem –> */
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:0px;
padding-top:-10pxpx;
padding-bottom:0px;
background-color: ;
}
.microbox3 { /* Price Label */
float:left;
width:250px;
height:22px;
margin-left:12px;
margin-top:0px;
padding-top:5px;
padding-bottom:0px;
background-color: ;
}
.microbox4 { /* Price –> */
float:left;
width:250px;
height:17px;
margin-left:12px;
margin-top:0px;
padding-top:0px;
padding-bottom:10px;
background-color: ;
}
.microbox5 { /* Beds Label */
float:left;
width:250px;
height:32px;
margin-left:12px;
margin-top:10px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox6 { /* Beds */
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox7 { /* Search Button Space*/
float:left;
width:250px;
height:33px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox8 { /* Search Button*/
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
text-color:white;
text-weight:bold;
}
p2 {
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color:white;
font-weight: bold;
letter-spacing: -1px;
}
</style>
<div id=”primary” class=”content-area”>
<main id=”main” class=”site-main” role=”main”>
<div class=”content”>
<div class=”box1″>
<img src=”house1.jpg”>
</div>
<div class=”box2″>
<img src=”house2.jpg”>
</div>
<div class=”box3″>
<img src=”house3.jpg”>
</div>
<div class=”boxselector”>
<div class=”microbox1″> <!– Location Label–>
<p2>LOCATION</p2>
</div>
<div class=”microbox2″> <!– Salem–>
<form action=”test1.php” method=”POST”>
<select>
<option value=”Salem”>Salem</option>
<option value=”Portland”>Portland</option>
<option value=”Medford”>Medford</option>
<option value=”Aloha”>Aloha</option>
<option value=”Beaverton”>Beaverton</option>
<option value=”Canby”>Canby</option>
<option value=”Cedar Mills”>Cedar Mills</option>
<option value=”Adams”>Adams</option>
<option value=”Bend”>Bend</option>
</select>
<br></br>
</div>
<div class=”microbox3″> <!– Price Label–>
<p2>PRICE</p2>
</div>
<div class=”microbox4″> <!– Price –>
<select>
<option value=”$100,000″>$100,000</option>
<option value=”$200,000″>$200,000</option>
<option value=”$300,000″>$300,000</option>
<option value=”$400,000″>$400,000</option>
<option value=”$500,000″>$500,000</option>
<option value=”$600,000″>$600,000</option>
<option value=”$700,000″>$700,000</option>
<option value=”$800,000″>$800,000</option>
<option value=”$900,000″>$900,000</option>
</select>
<br></br>
</div>
<div class=”microbox5″> <!– Beds Label–>
<p2>BED ROOMS</p2>
</div>
<div class=”microbox6″> <!– Beds –>
<select>
<option value=”0″>0</option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
</select>
<br></br>
</div>
<div class=”microbox7″> <!– Search Button Space–>
</div>
<div class=”microbox8″> <!– Search Button –>
<input type=”submit” Value=”SEARCH” style=”background-color:grey; text-weight:bolder; color:white”>
</div>
</form>
</select>
</label>
</div>
</div>
</main><!– #main –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

And now the output so far below here.

4

Note the Location and Price and Bed Rooms pull down menus. These are the items I used color coding on – background-color and then got them to line up properly using the Pixel ruler and putting in the proper CSS numbers for each micro section. Note that I will be adding PHP and Javascript code soon for those pulldown menus.

Taking a quick break from our Realtor example above I want to show how absolute positioning works inside a relative position larger container or body.

Here is a very simple web page:

<!DOCTYPE html>
<html>
<head>
<style>
.test {
}
p {
margin:0;
}
body {
background-color:;
width:500px;
height: 100px;
margin: 25px 25px 25px;
border: ;
position:relative;
}
.aside {
width:150px;
height: 80px;
background-color:blue;
padding: 8px;
border: 3px solid green;
position:absolute;
right:30px;
top:30px;
}
</style>
</head>
<body>
<div class=”test”>
<h1>This is the title</h1>
<ul>
<li>
This is line one text
</li>
<li>
This is line two text
</li>
<li>
This is line three text
</li>
</ul>
<p>This is must another line of text</p>
</div>
<div class=”aside”>
<p>Aside Text Here </p>
</div>
</body>
</html>
</div>

 

And now below we see the output of this simple example

1

Note that since we defined the <body> with a position of relative we can now set the .aside class as position of absolute and tell it exactly where we want it to appear on the webpage.

I will not go into fixed position but that is basically like a banner or header you want to stick and not scroll down. I will show this later.

I just changed a bit of the css so we can see the output better. The next thing I will show now is how to center horizontally the text inside our aside box which now has absolute positioning.

7

 

One of the easiest ways to horizontal center text is to use the text-align:center option.

<!DOCTYPE html>
<html>
<head>
<style>
.x { text-align:center; width:200px; background-color:yellow; }
</style>
</head>
<body>
<div class=”x”>Text </div>
</body>
</html>

 

 

And now the output

12

 

While using text-align:center can work, it can have issues with IE versions.  Below now is another option for centering text inside a block. I find this method to be very useful.  Here is the CSS and the HTML and following that a screen print of the output

<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color:grey;
width:700px;
}
p.blocktext {
margin-left: auto;
margin-right: auto;
width: 250px;
}
</style>
</head>
<body>
<div class=”container”>
<p class=”blocktext”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>

 

1

Now you can also center align the text inside that grey box by using the text-align: center

p.blocktext {
margin-left: auto;
margin-right: auto;
width: 250px;
text-align: center;}

 

1

Now to apply all we have reviewed to our realtor website.

Here is new CSS and also new div’s added to get three boxes ready for our centered text now.

<?php
/**
* The template file to show the front page display.
*
* @package ThemeGrill
* @subpackage Radiate
* @since Radiate 1.0
*/
get_header(); ?>
<?php
$page_array = array( get_theme_mod( ‘page-setting-one’ ), get_theme_mod( ‘page-setting-two’ ), get_theme_mod( ‘page-setting-three’ ) );
$get_featured_pages = new WP_Query( array(
‘posts_per_page’ => 3,
‘post_type’ => array( ‘page’ ),
‘post__in’ => $page_array,
‘orderby’ => ‘post__in’,
‘ignore_sticky_posts’ => 1
));
?>
<div id=”featured_pages” class=”clearfix”>
<?php
$j = 1;
while ( $get_featured_pages->have_posts() ) :
$get_featured_pages->the_post();
if( $j % 2 == 1 && $j > 1 ) { $page_class = “tg-one-third tg-one-third-last”; }
else { $page_class = “tg-one-third”; }
?>
<div class=”<?php echo $page_class; ?>”>
<div class=”page_text_container”>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
<h1 class=”entry-title”><a title=”<?php the_title_attribute(); ?>” href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h1>
<?php the_excerpt(); ?><a class=”more-link” title=”<?php the_title_attribute(); ?>” href=”<?php the_permalink(); ?>”><?php _e( ‘Read more’,’radiate’ ); ?></a>
</div>
</div>
<?php $j++;
endwhile;
wp_reset_postdata();
?>
</div>
<style>
.content {
float:right;
width:1000px;
height:900px;
margin:0;
border-style:;
background-color:#d3d3d3;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
.topbox {
float:left;
width:1200px;
height:23px;
margin-left:-120px;
border-style:;
background-color:;
margin-top:-40px;
}
.topbox ul li {
display: inline-block;
zoom:1;
*display:inline; /* this fix is needed for IE7- */
font-family:Avantgarde, sans-serif;
font-size: 14px;
font-weight: 900;
color:white;
padding-left:40px;
}
.box1 , .box2 , .box3{
float:left;
width:200px;
height:150px;
margin-left:20px;
margin-top:30px;
border-style:solid;
border-color:#D3D3D3;
background-color:#ffffff;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
img{
float:left;
width:180px;
height:140px;
margin-left:0px;
margin-top:0px;
border-style:;
background-color:#;
border-width:1px;
padding-top:4px;
padding-bottom:4px;
padding-left:10px;
}
.boxselector {
float:left;
width:270px;
height:275px;
margin-left:20px;
margin-top:30px;
border-style:solid;
background-color:#8A0D15;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
.microbox1 { /* Location Label–> */
float:left;
width:250px;
height:25px;
margin-left:12px;
margin-top:0px;
padding-top:10px;
padding-bottom:0px;
background-color: ;
}
.microbox2 { /* Salem –> */
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:0px;
padding-top:-10pxpx;
padding-bottom:0px;
background-color: ;
}
.microbox3 { /* Price Label */
float:left;
width:250px;
height:22px;
margin-left:12px;
margin-top:0px;
padding-top:5px;
padding-bottom:0px;
background-color: ;
}
.microbox4 { /* Price –> */
float:left;
width:250px;
height:17px;
margin-left:12px;
margin-top:0px;
padding-top:0px;
padding-bottom:10px;
background-color: ;
}
.microbox5 { /* Beds Label */
float:left;
width:250px;
height:32px;
margin-left:12px;
margin-top:10px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox6 { /* Beds */
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox7 { /* Search Button Space*/
float:left;
width:250px;
height:33px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox8 { /* Search Button*/
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
text-color:white;
text-weight:bold;
}
p2 {
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color:white;
font-weight: bold;
letter-spacing: -1px;
}
.below {
background-color:red;
width: 648px;
height: 200px;
position: relative;
margin-top: 200px;
margin-left: 20px;
}
.belowbox1 {
background-color:blue;
width: 180px;
height: 150px;
position: absolute;
left:12px;
top:1px;
}
.belowbox2 {
background-color:green;
width: 180px;
height: 150px;
position: absolute;
left:232px;
top:1px;
}
.belowbox3 {
background-color:orange;
width: 180px;
height: 150px;
position: absolute;
left:452px;
top:1px;
}
</style>
<div class=”topbox”>
<ul>
<li>LISTINGS</li>
<li>INFORMATION</li>
<li>RENTALS</li>
</ul>
</div>
<div id=”primary” class=”content-area”>
<main id=”main” class=”site-main” role=”main”>
<div class=”content”>
<div class=”box1″>
<img src=”house1.jpg”>
</div>
<div class=”box2″>
<img src=”house2.jpg”>
</div>
<div class=”box3″>
<img src=”house3.jpg”>
</div>
<div class=”boxselector”>
<div class=”microbox1″> <!– Location Label–>
<p2>LOCATION</p2>
</div>
<div class=”microbox2″> <!– Salem–>
<form action=”test1.php” method=”POST”>
<select>
<option value=”Salem”>Salem</option>
<option value=”Portland”>Portland</option>
<option value=”Medford”>Medford</option>
<option value=”Aloha”>Aloha</option>
<option value=”Beaverton”>Beaverton</option>
<option value=”Canby”>Canby</option>
<option value=”Cedar Mills”>Cedar Mills</option>
<option value=”Adams”>Adams</option>
<option value=”Bend”>Bend</option>
</select>
<br></br>
</div>
<div class=”microbox3″> <!– Price Label–>
<p2>PRICE</p2>
</div>
<div class=”microbox4″> <!– Price –>
<select>
<option value=”$100,000″>$100,000</option>
<option value=”$200,000″>$200,000</option>
<option value=”$300,000″>$300,000</option>
<option value=”$400,000″>$400,000</option>
<option value=”$500,000″>$500,000</option>
<option value=”$600,000″>$600,000</option>
<option value=”$700,000″>$700,000</option>
<option value=”$800,000″>$800,000</option>
<option value=”$900,000″>$900,000</option>
</select>
<br></br>
</div>
<div class=”microbox5″> <!– Beds Label–>
<p2>BED ROOMS</p2>
</div>
<div class=”microbox6″> <!– Beds –>
<select>
<option value=”0″>0</option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
</select>
<br></br>
</div>
<div class=”microbox7″> <!– Search Button Space–>
</div>
<div class=”microbox8″> <!– Search Button –>
<input type=”submit” Value=”SEARCH” style=”background-color:grey; text-weight:bolder; color:white”>
</div>
</form>
</select>
</label>
</div>
<div class=”below”> <!– New text added under house photos–>
<div class=”belowbox1″>
</div>
<div class=”belowbox2″>
</div>
<div class=”belowbox3″>
</div>
</div>
</main><!– #main –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

Notice that I used the relative position for red container box and then absolute position for each of the three boxes inside that red container as shown below here.

2

Although there are some issues with this Realtor Web front page I will provide the finished HTML and CSS now as well as the final screen print. I will begin now another blog that will focus on the JavaScript and jQuery and PHP  for MySQL data.

<?php
/**
* The template file to show the front page display.
*
* @package ThemeGrill
* @subpackage Radiate
* @since Radiate 1.0
*/
get_header(); ?>
<?php
$page_array = array( get_theme_mod( ‘page-setting-one’ ), get_theme_mod( ‘page-setting-two’ ), get_theme_mod( ‘page-setting-three’ ) );
$get_featured_pages = new WP_Query( array(
‘posts_per_page’ => 3,
‘post_type’ => array( ‘page’ ),
‘post__in’ => $page_array,
‘orderby’ => ‘post__in’,
‘ignore_sticky_posts’ => 1
));
?>
<div id=”featured_pages” class=”clearfix”>
<?php
$j = 1;
while ( $get_featured_pages->have_posts() ) :
$get_featured_pages->the_post();
if( $j % 2 == 1 && $j > 1 ) { $page_class = “tg-one-third tg-one-third-last”; }
else { $page_class = “tg-one-third”; }
?>
<div class=”<?php echo $page_class; ?>”>
<div class=”page_text_container”>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
<h1 class=”entry-title”><a title=”<?php the_title_attribute(); ?>” href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h1>
<?php the_excerpt(); ?><a class=”more-link” title=”<?php the_title_attribute(); ?>” href=”<?php the_permalink(); ?>”><?php _e( ‘Read more’,’radiate’ ); ?></a>
</div>
</div>
<?php $j++;
endwhile;
wp_reset_postdata();
?>
</div>
<style>
.content {
float:right;
width:1000px;
height:900px;
margin:0;
border-style:;
background-color:#d3d3d3;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
.topbox {
float:left;
width:1200px;
height:23px;
margin-left:-120px;
border-style:;
background-color:;
margin-top:-40px;
}
.topbox ul li {
display: inline-block;
zoom:1;
*display:inline; /* this fix is needed for IE7- */
font-family:Avantgarde, sans-serif;
font-size: 14px;
font-weight: 900;
color:white;
padding-left:40px;
}
.box1 , .box2 , .box3{
float:left;
width:200px;
height:150px;
margin-left:20px;
margin-top:30px;
border-style:solid;
border-color:#D3D3D3;
background-color:#ffffff;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
img{
float:left;
width:180px;
height:140px;
margin-left:0px;
margin-top:0px;
border-style:;
background-color:#;
border-width:1px;
padding-top:4px;
padding-bottom:4px;
padding-left:10px;
}
.boxselector {
float:left;
width:270px;
height:275px;
margin-left:20px;
margin-top:30px;
border-style:solid;
background-color:#8A0D15;
border-width:1px;
padding-top:4px;
padding-bottom:0px;
}
.microbox1 { /* Location Label–> */
float:left;
width:250px;
height:25px;
margin-left:12px;
margin-top:0px;
padding-top:10px;
padding-bottom:0px;
background-color: ;
}
.microbox2 { /* Salem –> */
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:0px;
padding-top:-10pxpx;
padding-bottom:0px;
background-color: ;
}
.microbox3 { /* Price Label */
float:left;
width:250px;
height:22px;
margin-left:12px;
margin-top:0px;
padding-top:5px;
padding-bottom:0px;
background-color: ;
}
.microbox4 { /* Price –> */
float:left;
width:250px;
height:17px;
margin-left:12px;
margin-top:0px;
padding-top:0px;
padding-bottom:10px;
background-color: ;
}
.microbox5 { /* Beds Label */
float:left;
width:250px;
height:32px;
margin-left:12px;
margin-top:10px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox6 { /* Beds */
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox7 { /* Search Button Space*/
float:left;
width:250px;
height:33px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
}
.microbox8 { /* Search Button*/
float:left;
width:250px;
height:30px;
margin-left:12px;
margin-top:-8px;
padding-top:0px;
padding-bottom:0px;
background-color: ;
text-color:white;
text-weight:bold;
}
p2 {
font-family:Verdana, Geneva, sans-serif;
font-size: 14px;
color:white;
font-weight: bold;
letter-spacing: -1px;
line-height-spacing:1px;
margin-top: 3px;
}
h7 {
font-family:Verdana, Geneva, sans-serif;
font-size: 17px;
color:darkgrey;
font-weight: bold;
letter-spacing: -1px;
padding-left:3px;
}
.below {
background-color:;
width: 648px;
height: 200px;
position: relative;
margin-top: 200px;
margin-left: 20px;
}
.belowbox1 {
background-color:;
width: 180px;
height: 150px;
position: absolute;
left:12px;
top:1px;
padding-left:44px;
}
.belowbox2 {
background-color:;
width: 180px;
height: 150px;
position: absolute;
left:232px;
top:1px;
padding-left:44px;
}
.belowbox3 {
background-color:;
width: 180px;
height: 150px;
position: absolute;
left:452px;
top:1px;
padding-left:44px;
}
.blocktext {
margin-left: auto;
margin-right: auto;
width: 75px; /* the actual width of just text itself */
font-size: 14px;
padding-top:-2px;
}
.x {
width: 800px;
padding: 25px;
margin: 25px;
}
</style>
<div class=”topbox”>
<ul>
<li>LISTINGS</li>
<li>INFORMATION</li>
<li>RENTALS</li>
</ul>
</div>
<div id=”primary” class=”content-area”>
<main id=”main” class=”site-main” role=”main”>
<div class=”content”>
<div class=”box1″>
<img src=”house1.jpg”>
</div>
<div class=”box2″>
<img src=”house2.jpg”>
</div>
<div class=”box3″>
<img src=”house3.jpg”>
</div>
<div class=”boxselector”>
<div class=”microbox1″> <!– Location Label–>
<p2>LOCATION</p2>
</div>
<div class=”microbox2″> <!– Salem–>
<form action=”test1.php” method=”POST”>
<select>
<option value=”Salem”>Salem</option>
<option value=”Portland”>Portland</option>
<option value=”Medford”>Medford</option>
<option value=”Aloha”>Aloha</option>
<option value=”Beaverton”>Beaverton</option>
<option value=”Canby”>Canby</option>
<option value=”Cedar Mills”>Cedar Mills</option>
<option value=”Adams”>Adams</option>
<option value=”Bend”>Bend</option>
</select>
<br></br>
</div>
<div class=”microbox3″> <!– Price Label–>
<p2>PRICE</p2>
</div>
<div class=”microbox4″> <!– Price –>
<select>
<option value=”$100,000″>$100,000</option>
<option value=”$200,000″>$200,000</option>
<option value=”$300,000″>$300,000</option>
<option value=”$400,000″>$400,000</option>
<option value=”$500,000″>$500,000</option>
<option value=”$600,000″>$600,000</option>
<option value=”$700,000″>$700,000</option>
<option value=”$800,000″>$800,000</option>
<option value=”$900,000″>$900,000</option>
</select>
<br></br>
</div>
<div class=”microbox5″> <!– Beds Label–>
<p2>BED ROOMS</p2>
</div>
<div class=”microbox6″> <!– Beds –>
<select>
<option value=”0″>0</option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
</select>
<br></br>
</div>
<div class=”microbox7″> <!– Search Button Space–>
</div>
<div class=”microbox8″> <!– Search Button –>
<input type=”submit” Value=”SEARCH” style=”background-color:grey; text-weight:bolder; color:white”>
</div>
</form>
</select>
</label>
</div>
<div class=”below”> <!– New text added under house photos–>
<div class=”belowbox1″>
<ul>
<li>
$435,900
</li>
<li>
5 Bed, 2 Bath
</li>
<li>
Single Family
</li>
<li>
Burbank, CA
</li><br></br>
<li>
<button type=”button”>More Info></button>
</li>
</ul>
</p>
</div>
<div class=”belowbox2″>
<ul>
<li>
$278,900
</li>
<li>
3 Bed, 2 Bath
</li>
<li>
Single Family
</li>
<li>
Ontario, CA
</li><br></br>
<li>
<button type=”button”>More Info></button>
</li>
</ul>
</p>
</div>
<div class=”belowbox3″>
<ul>
<li>
$234,700
</li>
<li>
2 Bed, 2 Bath
</li>
<li>
Single Family
</li>
<li>
Burbank, CA
</li><br></br>
<li>
<button type=”button”>More Info></button>
</li>
</ul>
</div>
<div>
</div>
</div>
<br></br>
<div class=”x”>
<h7>About Skyline Real Estate</h7><br></br>
<p2>
Skyline Real Estate began operation in the North West in 1972. Starting as a small company it grew over
time to be one of the North West’s premiere Realtor companies. Managed by a small office team Skyline has risen to the top of the
Realtor company list by working hard for each client and meeting exact client needs. The company has also driven to find
the best homes and land for client’s at the best price in the current market condition.
</p2>
</div>
</main><!– #main –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

And now for the final output

5

 

This blog is continued on Custom Page Template – Skyline Real Estate Con’t.

Creating a custom WordPress page template

This blog is a continuation from HTML Div and Table Tags = Realtor Website Tutorial

 

Tutorial on creating a custom WordPress page template

In my previous blog posts I have been showing how to create a front page for the Skyline Real Estate company. The screen print of this front page is below. I am now going to show the steps for creating a custom WordPress Page Template and how to use that to create more static pages for the Skyline Real Estate Website.  Some of these pages will in fact be links from the More Info > buttons as well.

First the finished front page as it now stands at this point in our tutorial:

1

Once a page template is created it can then be used on any page of your WordPress website. Refer to this codex link for details. Here are the steps for creating a custom page template.

First create a new .php file for your page template and type in the following into that page. I am using the template name of Skyline Page Template for our realtor website.

<?php
/*
Template Name: Skyline Page Template
*/
?>

 

You can also just copy your current page.php file and call it your new template name and add the code above. This will ensure you have a good standard page to start out with. I will now copy the page.php file, add the line and save it as skyline-page-template.php. I put the skyline-page-template.php file inside my radiate template directory. I will show the method for child theme later. Make sure you include the comments tags also. 

/*
Template Name: Skyline Page Template
*/

Below here is a screen print of my new skyline-page-template.php file as created above.

12

The next step is to go to our WordPress admin screen and select our new page template and make sure it is there.  Fo to Pages and then edit your new page (I created a new page called More Info awhile ago). Then go to Page Attributes on the right side and click on the Template pull down menu and change it from default menu to Skyline Page Template. Here is a screen print below of this step

13

Just a note that you can in fact just copy the front-page.php also and name the new file skyline-page-template.php and then make sure to add the following comments to PHP part of that file and then you can just make required changes.

/*
Template Name: Skyline Page Template
*/

We now have a pretty good final Skyline Real Estate front page as developed in our WordPress template. At this point this is just a hack version, but later I will show how to do this more correctly with a child theme.

How to create a WordPress static front page with no blog posts

I will take a step backwards just for a bit now with this new blog entry.  WordPress by default shows your blog posts in revers chronological order. In my fictitious Mountain Realtors website I in fact want a static front page as the front page with some house information. I don’t want blog entries at all. Keep in mind that there are in fact four possibilities for blogs – the blog, the static front page , the static front page and blog and the dynamic front page. We will focus on the static front page option here. See http://codex.wordpress.org/Creating a Static Front_Page for more information on these options. Note that we are starting with the twentythirteen template and then making changes to it. I will show how to do child theme changes later.

Per Codex there are two critical steps for creating a static front page. The first is to assign the front page and the second is to assign the posts page is required. Note that you don’t have to use any code to create a static front page.

 

Tutorial on how to create a wordpress static font page with no blog posts

Here are the steps and screen prints per Codex.  Note the description and instructions are then followed by the screen print below.

Go to the dashboard in WordPress and click on Pages

1

Add a new page and title it Home. Add and image and then Publish

2

 

Since we are adding only a static page and not a blog then we will not add a new page for blog now. Go to next step 4

Now to go Dashboard and Settings and Reading panel. Here is default generic screen print of that below

4

In the Reading Settings set a static Page. In the Front Page Displays set Front Page: Home (see below for screen print). Keep the Posts page blank. Here is the screen print of the Reading Settings as it now should appear with these changes. Save Changes

5

Now we go to our Mountain Realtors first page and see the following. We see our changes for our static page now.

6

We now rename in our template the page.php to front-page.php. I added a small PHP echo text as noted below also to show it is working now.

7

Here below we see the screen print of our front-page.php in our template directory and then the PHP echo of TEST FRONT PAGE.

8

So now we are ready to add our HTML code as created in our other blog entry How To Create An HTML Table Within A Table to our newly created front-page.php static page. Note that just adding the HTML code will not format correctly , we will need to tweak a few things before it displays correctly

For now I am going to add our new HTML for our realtor table directly to the front-page.php. Later I will show other options. So now in your editor open the newly created front-page.php file as shown here below

10

We will first comment out the php comments_template .     <!– slm <?php comments_template(); ?>

Next we will start adding our HTML realtor tables, carefully one at a time.

We first open with our editor the AA MASTER REALTOR THREE HOUSE PAGE.PHP with the html that we created earlier in another blog. See again the blog entry How To Create An HTML Table With In A Table.

I have added some html now to the file and here is our output so far

Here below is our new code and some improperly formatted output that we will need to fix

11

I will now show the code that has been fixed to display properly the realtor items. There is much more tweaking required, but this will be a good start. After that I will provide a screen print of what we have so far.

<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other
* ‘pages’ on your WordPress site will use a different template.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>
<div id=”primary” class=”content-area”>
<div id=”content” class=”site-content” role=”main”>
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<header class=”entry-header”>
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class=”entry-thumbnail”>
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<!– slm <h1 class=”entry-title”><?php the_title(); ?></h1> –>
</header><!– .entry-header –>
<div class=”entry-content”>
<!– slm START OF AA MASTER REALTOR THREE HOUSE PAGE.php code –>
<body>
<style>
#header {
background-color:black;
padding: 50px;
}
.ClearFix:after, .ClearFix::after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
ul
{
list-style-type: none;
line-height: 25px;
}
a href {
color: blue;
}
</style>
<div id=”page” style=”margin-left: -220px !important;”>
<section>
<section id=”container-content” style=”width: 960px;”>
<section id=”content” class=”ClearFix” role=”article”>
<div style=”padding:0px; id=”searchresults”>
<tbody>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:#f0f0f0; padding: -20px;”>
<tr>
<td colspan=”4″ align=”center” style=”padding:0px 0px;”>
</td>
</tr>
</tbody>
<td align=”left” style=”vertical-align: top; border-top:0px solid #dddddd; width:40%; padding-left: 4px;background-color:”>
<div style=”position: relative;”>
<img src=”house1.jpg” style=”width:420px; border:1px solid #999999;”>
</div>
</td>
<td>
<div id = “container” style = “width:100%; padding-left: 10px;background-color: “;>
<table style=”border:0px thin; border-collapse: collapse; padding:0px; text-align: left; background-color:;”>
<tr>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Address</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:20px;”>
<b>MLS Number</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Price</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Lot Size</b>
</th>
<tr>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px; padding-right:40px;”>
2783 B Street <br>
Mountain View, CA 83748<br><br><br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top”>
839849958<br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top””>
$349,890
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;vertical-align: text-top””>
2 achres
</td>
</tr>
</table>
</td>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:#f0f0f0; padding: 0px; “>
<tr>
<td colspan=”4″ align=”center” style=”padding:0px 0px;”>
</td>
</tr>
</tbody>
<td align=”left” style=”vertical-align: top; border-top:0px solid #dddddd; width:40%; padding-left: 4px;background-color:”>
<div style=”position: relative;”>
<img src=”house2.jpg” style=”width:420px; border:1px solid #999999;”>
</div>
</td>
<td>
<div id = “container” style = “width:100%; padding-left: 10px;background-color: “;>
<table style=”border:0px thin; border-collapse: collapse; padding:5px; text-align: left; background-color:;”>
<tr>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Address</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:20px;”>
<b>MLS Number</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Price</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Lot Size</b>
</th>
<tr>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px; padding-right:40px;”>
2783 B Street <br>
Medford, OR 83748<br><br><br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top”>
984955958<br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top””>
$249,890
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;vertical-align: text-top””>
2 achres
</td>
</tr>
</tr>
</table>
</td>
</tr>
<tr>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:#f0f0f0; padding: 0px;”>
<tr>
<td colspan=”4″ align=”center” style=”padding:0px 0px;”>
</td>
</tr>
</tbody>
<td align=”left” style=”vertical-align: top; border-top:0px solid #dddddd; width:40%; padding-left: 4px;background-color:”>
<div style=”position: relative;”>
<img src=”house3.jpg” style=”width:420px; border:1px solid #999999;”>
</div>
</td>
<td>
<div id = “container” style = “width:100%; padding-left: 10px;background-color: “;>
<table style=”border:0px thin; border-collapse: collapse; padding:5px; text-align: left; background-color:;”>
<tr>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Address</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:20px;”>
<b>MLS Number</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Price</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Lot Size</b>
</th>
<tr>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px; padding-right:40px;”>
12 Tree Streen <br>
Mountain View, CA 83748<br><br><br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top”>
779849958<br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top””>
$949,890
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;vertical-align: text-top””>
2 achres
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</div>
</section>
</section>
</section>
</div>
<!– slm END OF AA MASTER REALTOR THREE HOUSE PAGE.php code –>
<?php the_content(); ?> <!–slm the_content is an action filter –>
<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”><span class=”page-links-title”>’ . __( ‘Pages:’, ‘twentythirteen’ ) . ‘</span>’, ‘after’ => ‘</div>’, ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’ ) ); ?>
</div><!– .entry-content –>
<footer class=”entry-meta”>
<?php edit_post_link( __( ‘Edit’, ‘twentythirteen’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
</footer><!– .entry-meta –>
</article><!– #post –>
<!– slm <?php comments_template(); ?>
<?php endwhile; ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

21

 

 

Note that I did turn off the header using the admin screen so that now I have that green navigation bar. My next step will be to add my own icon using HTML and CSS so that it appears to the right of the navigation buttons.

How to create an HTML table within a table

 

Tutorial for how to create an HTML table within a HTML table

There are two methods for multiple columns side by side in a single div with html. (might be more but I will discuss two only now). The first is using div inside a div with float left and width percent. The second method we will discuss in more detail right now is starting with a div container and then creating a multiple column table within that div.

Below is our current html with an image and then a space to the right waiting for our 4 column table

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
<body>
<style>
#header {
background-color:black;
padding: 50px;
}
.ClearFix:after, .ClearFix::after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
</style>
<div id=”page”>
<section id=”header”>
</section>
<section id=”container-content” style=”width: 900px;”>
<section id=”content” class=”ClearFix” role=”article”>
<div style=”padding:0px; id=”searchresults”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:lightgrey; padding: 0px;”>
<tbody>
<tr>
<td>
<img src=”green.png” width=”100%” height=”17″ alt=”x”>
</td>
</tr>
<tr>
<td>
<tbody>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:lightgrey; padding: 0px;”>
<tr>
<td colspan=”4″ align=”center” style=”padding:0px 0px;”>
</td>
</tr>
</tbody>
</td>
</tr>
<td align=”left” style=”vertical-align: top; border-top:0px solid #dddddd; width:19%; padding-left: 4px;”>
<div style=”position: relative;”>
<img src=”houseistock1.jpg” style=”width:260px; border:1px solid #999999;”>
</div>
</td>
<td>
<div id = “container” style = “width:100%”>
</div>
</td>
<tr>
</tr>
</tbody>
</table>
</div>
</section>
</section>
</div>
</body>
</html>

 

And now the output we have so far

2

And now lets create a table to the right of our image –  with four columns

Note that I put all the CSS as inline style= at first as seen below because it is easier for me to keep track of things. Then at the end later, I take all that CSS and move it to an external linked file.  Personally I like to sometimes use local inline CSS style and then later change to an external file, just a personal preference for my work flow.

Here below now is my code so far with the table now instead of div’s as shown above

<td>
<div id = “container” style = “width:100%”>
<table style=”border:1px solid black; border-collapse: collapse; padding:5px; text-align: center;”>
<tr>
<th style=”border:1px solid black; border-collapse: collapse; padding:5px;”>
<b>Address</b>
</th>
<th style=”border:1px solid black; border-collapse: collapse; padding:5px;”>
<b>MLS Number</b>
</th>
<th style=”border:1px solid black; border-collapse: collapse; padding:5px;”>
<b>Price</b>
</th>
<th style=”border:1px solid black; border-collapse: collapse; padding:5px;”>
<b>Lot Size</b>
</th>
<tr>
<td style=”border:1px solid black; border-collapse: collapse; padding:5px;”>
2783 B Street
</td>
<td style=”border:1px solid black; border-collapse: collapse; padding:5px;”>
839849958
</td>
<td style=”border:1px solid black; border-collapse: collapse; padding:5px;”>
$349,890
</td>
<td style=”border:1px solid black; border-collapse: collapse; padding:5px;”>
2 acres
</td>

 

And below is the output we have so far (not finished yet, just a start)

4

Below now is my HTML and inline css code that displays three homes for a realtor webpage using tables inside divs> I will add javascript later for the links on the right

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
<body link=”blue”>
<style>
#header {
background-color:black;
padding: 50px;
}
.ClearFix:after, .ClearFix::after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
ul
{
list-style-type: none;
line-height: 25px;
}
a href {
color: blue;
}
</style>
<div id=”page”>
<section id=”header”>
</section>
<section id=”container-content” style=”width: 900px;”>
<section id=”content” class=”ClearFix” role=”article”>
<div style=”padding:0px; id=”searchresults”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:lightgrey; padding: 0px;”>
<tbody>
<tr>
<td>
<img src=”green.png” width=”100%” height=”17″ alt=”x”>
</td>
</tr>
<tr>
<td>
<tbody>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:lightgrey; padding: 0px;”>
<tr>
<td colspan=”4″ align=”center” style=”padding:0px 0px;”>
</td>
</tr>
</tbody>
</td>
</tr>
<td align=”left” style=”vertical-align: top; border-top:0px solid #dddddd; width:19%; padding-left: 4px;”>
<div style=”position: relative;”>
<img src=”houseistock1.jpg” style=”width:380px; border:1px solid #999999;”>
</div>
</td>
<td>
<div id = “container” style = “width:100%; padding-left: 10px;”>
<table style=”border:0px thin; border-collapse: collapse; padding:5px; text-align: left; background-color:;”>
<tr>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Address</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:20px;”>
<b>MLS Number</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Price</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Lot Size</b>
</th>
<tr>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px; padding-right:40px;”>
2783 B Street <br>
Mountain View, CA 83748<br><br><br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top”>
839849958<br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top””>
$349,890
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;vertical-align: text-top””>
2 achres
</td>
</tr>
</tr>
</table>
<table style=”border:0px thin; border-collapse: collapse; padding:5px; width:90%; text-align: left; background-color:;”>
<tr>
<td style=”padding-left: 200px; text-align: right;”>
<ul>
<li><a href=”moreinfo.php”>Request Appointment</a></li>
<li><a href=”moreinfo.php”>Save As Favorite</a></li>
<li><a href=”moreinfo.php”>Request More Information</a></li>
<li><a href=”moreinfo.php”>Similar Homes</a></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
<tr>
</tr>
<tr>
<td>
<tbody>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:#f8f8f8; padding: 0px;”>
<tr>
<td colspan=”4″ align=”center” style=”padding:0px 0px;”>
</td>
</tr>
</tbody>
</td>
</tr>
<td align=”left” style=”vertical-align: top; border-top:0px solid #dddddd; width:19%; padding-left: 4px;”>
<div style=”position: relative;”>
<img src=”house2.jpg” style=”width:380px; border:1px solid #999999;”>
</div>
</td>
<td>
<div id = “container” style = “width:100%; padding-left: 10px;”>
<table style=”border:0px thin; border-collapse: collapse; padding:5px; text-align: left; background-color:;”>
<tr>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Address</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:20px;”>
<b>MLS Number</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Price</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Lot Size</b>
</th>
<tr>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px; padding-right:40px;”>
28 Lady Lane <br>
Medford, OR 84777<br><br><br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top”>
738475869<br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top””>
$256,890
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;vertical-align: text-top””>
.2 acres
</td>
</tr>
</tr>
</table>
<table style=”border:0px thin; border-collapse: collapse; padding:5px; width:90%; text-align: left; background-color:;”>
<tr>
<td style=”padding-left: 200px; text-align: right;”>
<ul>
<li><a href=”moreinfo.php”>Request Appointment</a></li>
<li><a href=”moreinfo.php”>Save As Favorite</a></li>
<li><a href=”moreinfo.php”>Request More Information</a></li>
<li><a href=”moreinfo.php”>Similar Homes</a></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
<tr>
</tr>
<tr>
<td>
<tbody>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=”position: relative;width:100%;background-color:lightgrey; padding: 0px;”>
<tr>
<td colspan=”4″ align=”center” style=”padding:0px 0px;”>
</td>
</tr>
</tbody>
</td>
</tr>
<td align=”left” style=”vertical-align: top; border-top:0px solid #dddddd; width:19%; padding-left: 4px;”>
<div style=”position: relative;”>
<img src=”house3.jpg” style=”width:380px; border:1px solid #999999;”>
</div>
</td>
<td>
<div id = “container” style = “width:100%; padding-left: 10px;”>
<table style=”border:0px thin; border-collapse: collapse; padding:5px; text-align: left; background-color:;”>
<tr>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Address</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:20px;”>
<b>MLS Number</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Price</b>
</th>
<th style=”border:0px solid black; border-collapse: collapse; padding:5px;”>
<b>Lot Size</b>
</th>
<tr>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px; padding-right:40px;”>
67 A Street <br>
Medford, OR 87777<br><br><br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top”>
738884859<br>
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;padding-right:30px;vertical-align: text-top””>
$149,890
</td>
<td style=”border:0px solid black; border-collapse: collapse; padding:5px;vertical-align: text-top””>
.2 acres
</td>
</tr>
</tr>
</table>
<table style=”border:0px thin; border-collapse: collapse; padding:5px; width:90%; text-align: left; background-color:;”>
<tr>
<td style=”padding-left: 200px; text-align: right;”>
<ul>
<li><a href=”moreinfo.php”>Request Appointment</a></li>
<li><a href=”moreinfo.php”>Save As Favorite</a></li>
<li><a href=”moreinfo.php”>Request More Information</a></li>
<li><a href=”moreinfo.php”>Similar Homes</a></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
<tr>
</tr>
</tbody>
</table>
</div>
</section>
</section>
</div>
</body>
</html>

 

And below now is the output of this new code. By using div within a div and then using tables within tables you can do almost anything you need for layout. Note that this is totally fictitious data and the photos I purchased from istockphoto.com.  I really recommend http://www.istockphoto.com, I get all my photos from that website , they are a great company.

7

 

Other blog entries will discuss various options for this type of layout requirement.

How WordPress uses PHP functions focusing on Index.php

 

Tutorial on how WordPress uses PHP functions focusing on Index.php

I am using the WordPress twentyten template locally on my MAMP with MAC.  This blog will discuss all aspects of how WordPress uses PHP functions (theme tags) to display all WordPress blogs and pages. I will try to focus my attention also on loops in a second blog soon.

In the twentyten template the first file to be executed in WordPress is the index.php file. The first line of this file that gets executed is get_header();    This function is located in the general-template.php file located in the wp-includes directory.

What files might you see as the very first file with .php suffix that will be processed in WordPress first?

  • index.php
  • home.php
  • single.php
  • others

Below is the get_header() function in green.  I will make some comments in blue.  But first I will show a screen print of the index.php file. Note the call of the function get_header();

7

function get_header( $name = null ) {

/**
* Fires before the header template file is loaded.
*
* The hook allows a specific header template file to be used in place of the
* default header template file. If your file is called header-new.php,
* you would specify the filename in the hook as get_header( ‘new’ ).
*
* @since 2.1.0
* @since 2.8.0 $name parameter added.
*
* @param string $name Name of the specific header file to use.
*/
do_action( ‘get_header’, $name ); if there is an action hook then $name will be used, otherwise not used. 

$templates = array();
$name = (string) $name;
if ( ” “!== $name ) if there is a $name for the action hook it will be used else the $templates array will be loaded with default header.php as shown below
$templates[] = “header-{$name}.php”;

$templates[] = ‘header.php'; again if no action hook found ($name) then default of header.php is run since in the $templates array.
// Backward compat code will be removed in a future release
if (” == locate_template($templates, true))
load_template( ABSPATH . WPINC . ‘/theme-compat/header.php’);
}

 

Below is the header.php file which gets called from the previous function above since we did not have an action hook. The function below is in green with blue comments. Note that all code between <title> tags are in fact just the top title on the web page. Don’t ever get rid of the wp_head() at end of <head> tag because it is needed for hooks. Header.php is found in the template directory and then the twentyten directory.

<body <?php body_class(); ?>> this defines a class for the body tag based on a function that uses if logic to find what page you are located on. 
<div id=”wrapper” class=”hfeed”> this is the larger wrapper the other divs fall into. See screen print below – wrapper is in orange. 
<div id=”header”>
<div id=”masthead”>
<div id=”branding” role=”banner”>
<?php $heading_tag = ( is_home() || is_front_page() ) ? ‘h1′ : ‘div'; ?> This ternary if then looks for current location then prints h1 if home or front else div

<<?php echo $heading_tag; ?> id=”site-title”>
<span>
<a href=”<?php echo home_url( ‘/’ ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a> Notice the use of esc_attr for security. Good to use this always. this is a – a href thus if clicked on it will take you to the home url. Since we are on home page it will be h1 title. 
</span>

</<?php echo $heading_tag; ?>>
<div id=”site-description”><?php bloginfo( ‘description’ ); ?></div> site desc goes to the right in the header area. 

 

I then added an image for the header.  So now we have completed our header display in WordPress using the get_header() function in the index.php file. We now see the div with id of container used and then div with id of content and role of main. See below in blue

<div id=”container”>

<div id=”content” role=”main”> this is the classic div inside a div we see a lot in WordPress and other website CMS’s.

<?php
/*
* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead. if we were using an action hook we would use the loop-index.php file for our unique loop code, but in our case we are going to default to the loop.php file. This loop.php for the twentyten theme is located in the twentyten directory. The loop.php is a very important file and as you might guess the loop is in that file. We will focus a lot of attention in this blog on this file. 
*/

get_template_part( ‘loop’, ‘index’ ); I will write on this more later. Basically this is getting a template part and will get loop.php as a default, but again I will discuss later. 
?>
</div><!– #content –>
</div><!– #container –>

 

Below here is a screen print of our simple WordPress blog now showing the color coded areas.

  • #wrapper – orange #FFE2C6 in header.php
  • #header – light grey #CCCCCC header.php at top of page
  • masthead and branding not used at this point header.php but there if needed 
  • #site-title – area around the Stimdrill Realtors title and is h1 due to if then
  • #site-description – the area around the We Specialize in … – the desc
  • img is the large image of new york
  • #main (this is found in index.php for id=content and role=main) – green see below
  • #primary and class of widget-area is the small green widget area below third screen print 
  • back to index.php #container – yellow – see second screen print below for yellow area for #container
  • also in index.php #content is – darker orange below and role is main
  • post-79 is last screen print below which is the post area. There are a lot more items inside that also we can look at later. 

The screen print below shows the green area for #main id.

1

The screen print below shows the yellow #container area

3

The screen print below is a small green area for the widget area which is #primary and class of widget.area

5

The screen print below is the smaller darker orange almost brown that is the #content and #role= main

6

The screen print below is the post-79. again darker orange area below

7

Now lets study the loop.php file located in the twentyten directory. refer to blog on  loop.php now

 

How WordPress uses PHP functions focusing on loop.php

 

Tutorial on how WordPress uses PHP functions focusing on loop.php

This blog is a continuation of PHP and Index.php. I recommend reading that blog first before this blog entry about the loop.php in WordPress.

Below is our index.php (part of the file that is). I am going to discuss the line of PHP code – get_template_part( ‘loop’, ‘index’ ); in blue.

get_header(); ?>
<div id=”container”>
<div id=”content” role=”main”>
<?php
/*
* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( ‘loop’, ‘index’ );
?>
</div><!– #content –>
</div><!– #container –>

 

The get_template_part(‘loop’,’index’); is a PHP function with two parameters and is also a WordPress Theme or Template tag. But first and for most it is a PHP function in every way.  This function is located in the general-template.php file located in the wp-includes directory of WordPress.  Below is the function get_template_part.

function get_template_part( $slug, $name = null ) {
/**
* Fires before the specified template part file is loaded.
*
* The dynamic portion of the hook name, $slug, refers to the slug name
* for the generic template part.
*
* @since 3.0.0
*
* @param string $slug The slug name for the generic template.
* @param string $name The name of the specialized template.
*/
do_action( “get_template_part_{$slug}”, $slug, $name );
$templates = array();
$name = (string) $name;
if ( ” !== $name )
$templates[] = “{$slug}-{$name}.php”;
$templates[] = “{$slug}.php”;
locate_template($templates, true, false);
}

 

 

As we can see from the PHP code the first parameter is in fact a $slug which in our case is loop and then the second parameter is index which is the $name. Thus we get get_template_part(‘loop’,’index’);   As we would expect we do see the action hook which we will discuss later in another blog. We then see a new $templates array created and a string variable $name.  Then we have some logic saying basically if $name has something in it other then null then update that $templates array with loop-index.php and loop.php.

If I do a var_dump now right before the last locate line I would expect to see two entries then in $templates, one would be loop-index.php and the other loop.php. I did this and that is in fact the case.  I put var_dump($templates); right before locate_xxxx as last line. Below is a screen print showing both the loop-index and the loop.php files inside the array $templates.

8

So now we have our $templates array populated just fine. Lets look at the next line of PHP code in our get_template_part() function. The next line of code is:

locate_template($templates, true, false);

This again is a template tag but first and foremost a PHP function. Per Codex – locate_template() is located in wp-includes/template.php. So lets look at our local MAMP wp-includes/template.php and show that function here.

function locate_template($template_names, $load = false, $require_once = true ) {
$located = ”;
foreach ( (array) $template_names as $template_name ) {
if ( !$template_name )
continue;
if ( file_exists(STYLESHEETPATH . ‘/’ . $template_name)) {
$located = STYLESHEETPATH . ‘/’ . $template_name;
 var_dump($located);
break;
} else if ( file_exists(TEMPLATEPATH . ‘/’ . $template_name) ) {
$located = TEMPLATEPATH . ‘/’ . $template_name;
break;
}
}
if ( $load && ” != $located )
load_template( $located, $require_once );
return $located;
}

 

We notice that $load is set to false and $require_once is set to true. Then the variable $located is set to blank or null.  Then we see a classic PHP foreach to set our $located var. it starts with a statement that basically says if our as var of $template_name does not exist then continue.  The end result is a return of $located which in our case is

“/Applications/MAMP/htdocs/wordpress/wp-content/themes/twentyten/index.php”

 

In loop.php the first if and endif checks if pages are greater then 1 and if so span class for twenty is displayed.  If there are no posts then a not found is displayed.

Now we start the loop. The loop is broken into gallery category and then asides category and finally all other posts. For now we are going to jump right to the all other posts in the loop

Note the while have posts. This is much like our example of PHP while but instead of <10 we are seeing just if a post exists.

Below is the full while loop. I won’t go into details because that would be another very long blog but for now just be aware that the loop will continue until all blog entries are output to the page.

The loop looks complicated but it is not really , it just has a lot of details to it and parts. Note that for a new template or child template I can add things or take things out as required.

<?php while ( have_posts() ) : the_post(); ?>
<?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?>
<?php if ( ( function_exists( ‘get_post_format’ ) && ‘gallery’ == get_post_format( $post->ID ) ) || in_category( _x( ‘gallery’, ‘gallery category slug’, ‘twentyten’ ) ) ) : ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2 class=”entry-title”><a href=”<?php the_permalink(); ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
<div class=”entry-meta”>
<?php twentyten_posted_on(); ?>
</div><!– .entry-meta –>
<div class=”entry-content”>
<?php if ( post_password_required() ) : ?>
<?php the_content(); ?>
<?php else : ?>
<?php
$images = twentyten_get_gallery_images();
if ( $images ) :
$total_images = count( $images );
$image = array_shift( $images );
?>
<div class=”gallery-thumb”>
<a class=”size-thumbnail” href=”<?php the_permalink(); ?>”><?php echo wp_get_attachment_image( $image, ‘thumbnail’ ); ?></a>
</div><!– .gallery-thumb –>
<p><em><?php printf( _n( ‘This gallery contains <a %1$s>%2$s photo</a>.’, ‘This gallery contains <a %1$s>%2$s photos</a>.’, $total_images, ‘twentyten’ ),
‘href=”‘ . get_permalink() . ‘” title=”‘ . esc_attr( sprintf( __( ‘Permalink to %s’, ‘twentyten’ ), the_title_attribute( ‘echo=0′ ) ) ) . ‘” rel=”bookmark”‘,
number_format_i18n( $total_images )
); ?></em></p>
<?php endif; // end twentyten_get_gallery_images() check ?>
<?php the_excerpt(); ?>
<?php endif; ?>
</div><!– .entry-content –>
<div class=”entry-utility”>
<?php if ( function_exists( ‘get_post_format’ ) && ‘gallery’ == get_post_format( $post->ID ) ) : ?>
<a href=”<?php echo get_post_format_link( ‘gallery’ ); ?>” title=”<?php esc_attr_e( ‘View Galleries’, ‘twentyten’ ); ?>”><?php _e( ‘More Galleries’, ‘twentyten’ ); ?></a>
<span class=”meta-sep”>|</span>
<?php elseif ( $gallery = get_term_by( ‘slug’, _x( ‘gallery’, ‘gallery category slug’, ‘twentyten’ ), ‘category’ ) && in_category( $gallery->term_id ) ) : ?>
<a href=”<?php echo get_category_link( $gallery ); ?>” title=”<?php esc_attr_e( ‘View posts in the Gallery category’, ‘twentyten’ ); ?>”><?php _e( ‘More Galleries’, ‘twentyten’ ); ?></a>
<span class=”meta-sep”>|</span>
<?php endif; ?>
<span class=”comments-link”><?php comments_popup_link( __( ‘Leave a comment’, ‘twentyten’ ), __( ‘1 Comment’, ‘twentyten’ ), __( ‘% Comments’, ‘twentyten’ ) ); ?></span>
<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”meta-sep”>|</span> <span class=”edit-link”>’, ‘</span>’ ); ?>
</div><!– .entry-utility –>
</div><!– #post-## –>
<?php /* How to display posts of the Aside format. The asides category is the old way. */ ?>
<?php elseif ( ( function_exists( ‘get_post_format’ ) && ‘aside’ == get_post_format( $post->ID ) ) || in_category( _x( ‘asides’, ‘asides category slug’, ‘twentyten’ ) ) ) : ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
<div class=”entry-summary”>
<?php the_excerpt(); ?>
</div><!– .entry-summary –>
<?php else : ?>
<div class=”entry-content”>
<?php the_content( __( ‘Continue reading <span class=”meta-nav”>&rarr;</span>’, ‘twentyten’ ) ); ?>
</div><!– .entry-content –>
<?php endif; ?>
<div class=”entry-utility”>
<?php twentyten_posted_on(); ?>
<span class=”meta-sep”>|</span>
<span class=”comments-link”><?php comments_popup_link( __( ‘Leave a comment’, ‘twentyten’ ), __( ‘1 Comment’, ‘twentyten’ ), __( ‘% Comments’, ‘twentyten’ ) ); ?></span>
<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”meta-sep”>|</span> <span class=”edit-link”>’, ‘</span>’ ); ?>
</div><!– .entry-utility –>
</div><!– #post-## –>
<?php /* How to display all other posts. */ ?>
<?php else : ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h2 class=”entry-title”><a href=”<?php the_permalink(); ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
<div class=”entry-meta”>
<?php twentyten_posted_on(); ?>
</div><!– .entry-meta –>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<div class=”entry-summary”>
<?php the_excerpt(); ?>
</div><!– .entry-summary –>
<?php else : ?>
<div class=”entry-content”>
<?php the_content( __( ‘Continue reading <span class=”meta-nav”>&rarr;</span>’, ‘twentyten’ ) ); ?>
<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-link”>’ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ => ‘</div>’ ) ); ?>
</div><!– .entry-content –>
<?php endif; ?>
<div class=”entry-utility”>
<?php if ( count( get_the_category() ) ) : ?>
<span class=”cat-links”>
<?php printf( __( ‘<span class=”%1$s”>Posted in</span> %2$s’, ‘twentyten’ ), ‘entry-utility-prep entry-utility-prep-cat-links’, get_the_category_list( ‘, ‘ ) ); ?>
</span>
<span class=”meta-sep”>|</span>
<?php endif; ?>
<?php
$tags_list = get_the_tag_list( ”, ‘, ‘ );
if ( $tags_list ):
?>
<span class=”tag-links”>
<?php printf( __( ‘<span class=”%1$s”>Tagged</span> %2$s’, ‘twentyten’ ), ‘entry-utility-prep entry-utility-prep-tag-links’, $tags_list ); ?>
</span>
<span class=”meta-sep”>|</span>
<?php endif; ?>
<span class=”comments-link”><?php comments_popup_link( __( ‘Leave a comment’, ‘twentyten’ ), __( ‘1 Comment’, ‘twentyten’ ), __( ‘% Comments’, ‘twentyten’ ) ); ?></span>
<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”meta-sep”>|</span> <span class=”edit-link”>’, ‘</span>’ ); ?>
</div><!– .entry-utility –>
</div><!– #post-## –>
<?php comments_template( ”, true ); ?>
<?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>
<?php endwhile; // End the loop. Whew. ?>

WordPress and PHP – two types of modifications

 

Tutorial on WordPress and PHP – two types of modifications

A note on this blog entry. This is an older blog entry but I did leave this in for reference only. I find that some of the information is valuable with respect to PHP and WordPress. You might find though that my newer blog entries deal with this information in a clearer way.

There are two major groups of WordPress modifications I believe and reflected in all my blog entries. There is the group that customers want that requires WordPress website edits, adding new sections to the website, adding new content and images, installing and working with new themes and configuration of plugins and custom code. The custom code might include CSS and HTML and JavaScript and jQuery and PHP.

The goal of this particular blog entry is to apply all that I have learned with PHP and WordPress as outlined in all my blog entries and use this to meet the noted requirements below. This is kind of a real world example of what can be done with WordPress modifications but with fictitious data.

The second major group of client requests for WordPress modifications include adding a new shopping cart, adding forms and a new API that would update MySQL data and query that data back to the webpage, developing new WordPress plugins and widgets and more advanced PHP coding.  This second section will deal also with security issues like Escape sequence, PDO Prep, Prep multi form , XSS and others.

This blog entry will focus exclusively now on the first major group of WordPress modifications as outlined above.  I will then write a new Blog entry soon for the second group.

The goal of this blog entry is to outline in detail all the steps required to meet the following Odesk request for WordPress help. I will keep this request generic for security sake, since this is just an example I will use. I will use screen prints and provide as much detail as I can.

  • Edit a current WordPress website to add a new section
  • Add new content to this WordPress website which will include images.
  • This website will be created for our example using a new WP theme.
  • Add a new plugin and configure per requirements and add custom code as required.

Requirement Number 1 – 

  • Edit a current WordPress website to add a new section

Before I can add a new section to a website to meet this requirement I must first have a website in place. I will create now a temporary website. I am creating this temporary example website now using my MAMP on localhost. Again I will provide lots of screen prints so you can follow along carefully. I am using WordPress locally with MAMP and will be using PhpMyAdmin as well as MySQL.  I have not yet updated my WordPress to 4.1 from 4.0 but will be doing that later and will write a blog on how I did that as well.

Below you will see my localhost WordPress Dashboard as it now stands before we get started.

 

 

I will now create a generic website to have in place so we can meet our first client requirement of adding a new section. I first go to Appearance and then Themes. I then click on add a new theme to find a good looking website template to work with.  I found a WordPress theme called Accelerate. Below now is a screen print of this generic Theme as it now stands.

4

Note that I have a number of jpg photos that I purchased from istockphoto.com last year and will be using those photos now for my temporary website locally on localhost. In our theme the suggested photo image size is 1100 by 300. We will take one of our purchased istockphoto.com jpg files and resize to this recommended size now using Photo Shop CC.

Below is our starting point for this website, simple and requires some client changes right away.

Right away the client sees that this is in fact a blog post but wants this to be more of a website page. The first modification then is to get rid of the Post meta data and only have the text starting with Welcome….. showing. Here is how front page looks now before changes are made:  I deleted the first post so all we see right now is “Ready to publish your first…..”.  The client wants to get rid of that statement all together and just have three more photos of real-estate in New York.

There are two ways to accomplish this goal. The first is to just create a static first page which will be defined as a page and not a blog. The second is to make PHP changes to the template using the process I outlined in another blog. We will take a look first at just creating a static page that is not a blog.

 

1

I found the name of Stimdrill Realtors and was glad to see it was not used anywhere on the internet. This will be our fictitious company used for an example.  Our fictitious client now for our example here does not want to have a sidebar showing up at all on this home page. There are many ways to accomplish this , one way is to simply assign a text widget and then make sure there is nothing in that widget. Now we don’t see any sidebar data.  You can also just use the template setup one column no sidebar and then we will add data soon to the body.

1

 

I made changes simply by just using the Theme WordPress edit options. I got rid of the right sidebar now, I also turned off comments (using quick edit and unclicking comments). Here below is what we have now after these changes.

1

Now below I have the website page now with no title at all. The trick to doing this on the Mac is Option Space at the same time. That puts an invisible character in for the title.

1

 

Now we have our page pretty well cleaned out and did all this without any custom code at all so far. Now we will add four photos below the primary photo. Thanks to picjumbo.com for use of these example photos.

Now below we have all four photos below the primary header photo. We have not used any custom CSS or HTML or made any template changes yet. We will now review our new client’s requirements and see what our next step is.

2

 

Below we see the same webpage but with a vertical listing of photos. We will now add fictitious listing info and links to the right of each photo.

We have seen so far that with WordPress there are a number of tricks to get where we want without having to change the code in the theme. But now lets look at our client requirements and see if there are in fact some modifications that will require some more sophisticated code changes.  In reality we only have a very rough framework to work with right now. We will have to dig into our WordPress and PHP tool belt now for more advanced options.  Not sure if I noted this, but the primary New York photo was purchased for use from istockphoto.com.

The template does not allow for site title color changes, so a quick CSS color change did the trick

66

Next below we use custom CSS to make the description a larger font.

77

 

Below now is what our realtors web page looks like so far. Again so far we have only used custom CSS.

88

 

So far our customization to our theme and website has been easy with just a few CSS changes. Now things get a bit more interesting and perhaps a bit more challenging. Next our client wants us to add information about each listing in a colored box to the right of each image. Also included in this box text will be some url links for more information.

It can be a challenge at times to use text alignment and try to get the image text to be a column perfectly to the right of each image. I think it can be done but again a challenge. SquareSpace has a great advantage here because you can just simply add a text box to the right and you are off and running.

But with WordPress we might have to look at a coding option to get to our desired end game here. There are a few ways to get there with coding .  The first is using CSS3 and HTML5 to create a text box to the right of each image.  The second method while more involved, gives us complete control and that is coding our own plugin API to accomplish this.

When looking at creating a plugin API we can focus on doing this with either a Page or a Post. By the way it is a much better idea to create a child theme then edit the original theme. We will be looking at this in anther post soon.

I was going to start a brand new blog right now because we are going to kind of turn a technical corner just a bit, but I decided to in fact to just keep writing in this blog and then return this point later. So here goes!

The basics of WordPress Templates – for alter API

I learned an important lesson. Don’t try and just use text tab and use html and css only to create multiple columns, always use an existing or code a new plugin for multiple columns. Really important lesson.

Before you do anything go out and purchase the book by Thord Daniel Hedengren called Smashing WordPress – Beyond The Blog by Wiley Fourth Edition.  My concepts in this blog section will come from that ground breaking book.

Look at most any WordPress template file and you will find template tags. I believe at this point these template tags to be really PHP functions. For example lets look at a template tag here from index.php

get_template_part( ‘loop’, ‘index’ );

I see this as a PHP function with two parameters. It is also a template tag.  Here is another one

<?php  bloginfo(‘name’);  ?>

I see this also as a PHP function with one parameter and it is also a template tag.

Here is a basic PHP function

<?php
function bloginfo($firstName){
echo “My name is “. $firstName;
}
bloginfo(“Steve”);

?>

Here is our output

My name is Steve

 

So when we see this template tag of <?php     bloginfo(‘name’)   ?>

We are saying go and run that bloginfo function but only process it with the parameter of name.  There might be in fact 10 parameter possibilities for that function. Fine, but just give me the name.

For fun lets look at the real function for bloginfo in wordpress. just to help us get this down well. There are at least 22 possible parameters for this template tag or function!! See Codex.  But that is fine just give me the name only for now.

WordPress Template Tags are nothing more then PHP functions!!

Watch out for tags with multiple parameters too. They can be very useful.

Keep in mind there are query string style arguments too like

<?php    wp_tag_cloud(‘unit=’px”);    ?>

Conditional tags are handy too.  if(is_front_page )

{

 

 

What we have above here is the bloginfo template tag which is really a PHP function. Note that there is only one parameter of a variable called $show.  The default is ‘name’ by the way .There are in fact about 22 possible parameter values  you can use for bloginfo.

Here below now is the actual PHP source code for the function bloginfo()

2

Note that what is really called is the get_bloginfo function with two parameters, $show and ‘display’

Notice below the PHP case statement now for the parameters passed in

3

Below now is a function I wrote that is over simplified but shows how PHP Switch is used to run the proper selected parameter inside the function

<?php
function bloginfo($show)
{

switch($show)
{
case(“name”);
echo(“You selected name parameter”);
break;

case(“age”);
echo(“You selected age parameter”);
break;

case(“home”);
echo(“You selected home parameter”);
break;
}
}
bloginfo(‘home’);
?>

 

In the real bloginfo function in WordPress it actually calls another function which calls another function.  I will write about this aspect soon in another blog entry.  But for now we know that the PHP switch with case options is the engine if you will for the function.

 

You can find a complete listing of all WordPress templar tags at http://codex.wordpress.org/Template_tags

Keep in mind there are include tags also which are basically template files that include other template tags.  Just another step in the staircase.  Also keep in mind a template tag can have multiple parameters.  I have already mentioned query string style also like wp_tag_cloud(‘unit=px’);  It is kind of like having a switch statement right inside your parameter.

Also keep in mind query string parameters can be stored in an array. And don’t forget conditional tags like if(is_front_page() {};

Loops

Loops are a critical concept with WordPress and allow for display of data and many other things. It will be hard to get very far with WordPress customization without loops.

Loops are found in your themes template files.  I mentioned this before but you must purchase the book by Thord Daniel Hedengren called Smashing WordPress – Beyond The Blog by Wiley Fourth Edition.  I did not understand WordPress customization until I studied this book carefully

In Hedengren’s book he uses the example as follows for loops. It is critical that you understand this fully. Take your time, it is really an important concept to get.

Here is a simple but real WordPress loop that Hedengren mentions in his book: I formatted the code a bit different thence did but same thing.

Here below is the Codex example of using the PHP structure which I personally always do.

4

Here below is how I like to code this loop with PHP structure that is easy to read for me.

5

I will add an endwhile error message later.

Basically what this code is saying is if you have some posts as long as you continue to have posts write out the post.

There are cases where you can put this loop inuits own PHP file. I will write on that later

Most of the time we will be using wp_query standard internal loop code with WordPress.

We will stop for today but keep in mind that in the book Smashing WordPress as noted the fun really begins in chapter 4 where we create our own plugin template page to meet our clients Reality page needs. Stay tuned!!

Ok it’s another day and we are back.  BUT before we get too far we need to review how to create an action hook.  Here is why!  At this point we want to be able to test the output of some of our very simple functions and loops.  To do this we don’t want to change source code in the PHP template files , which we could, but highly not recommended to do so – ever.  So here is a link to my post on how to create an action hook.

Action Hooks

Follow my instructions in the above link and create an action hook and test it. Then lets return and code that working hook so that it outputs a loop for us, and even before that make it output the output of a function

Ok I followed my own directions and created an action hook with a function and then ran the page and you can see that it worked great.

 

You can see the output of my function as testxxxxxxxxx.

Just for reference I will show the action hook code i added to the templates.php file.

2

So now we have a working action hook with a function assigned to it. We can now try to get an output from a well known WordPress function (before we attempt a loop).


3

Here above is my new function attached to an action hook.  The function runs a standard WordPress function showing all pages – output to header as shown below.  This is an important step now because we can test output via action hooks our test functions and loops.

 

5

 

See the link created by hook function – Real Estate Listing.

Now that we have in place the code structure for adding a function to an action hook and can see the output on the page and also have a better understanding of tags which are really just PHP functions lets dig a bit deeper into Loops again

 

Loops

The Smashing WordPress book by Hedengren worlds with a function called have_posts. Thus I added a new page to our realtor site and put posts on that page.  Because of our Action hook work we now below  see two pages listed

6

 

So before we get too far in our Loops discussion lets add the PHP function for have_posts() to our action hook and see what our output is.

 I just learned an important WordPress and PHP Lesson –

This was not an easy lesson to learn but an important one.  What I tried to do was simply use HTML and CSS only in the Text tab of a page edit to try and get multiple columns for our realtor page. This is very difficult to do with just css and html, I thought it would be easier. What I found with a Google search is most people are using plugins to accomplish this.

So we are back to square one creating or using a Plugin to accomplish our task.


 

Before we continue now is a good time to review how to create our own plugin using the action hook.


If we look at the index.php we see a function being called titled  get_header();

get_header(); runs the header.php file

wp_title is an action hook.We are not using this yet.

 


 

Next day!

below here is an image that I apologize for because it is very messy. I will clean up later. It is  header.php and shows where JUST <title>  …. </title> at very top page data comes from for our 2010 template.  We are going to focus just on template changes for now.  You can put in other parameters like version for WordPress and lots other great info just by changing the $show parameter.

header

Now below is a bit farther down this same header.php file with some more SLM comments. I will provide more soon!

Basically I am adding temp PHP and sometimes Html quick code to see the output location of each line.  People learn differently , I really “get it” when I reverse engineer something after reading about the concepts

2

OLDER FOR REFERENCE ONLY Moving a WordPress blog From LocalHost to a server

 

Tutorial on moving a WordPress blog From LocalHost to a server

This blog entry will discuss how to move a WordPress blog from your localhost to a server. I will also discuss how to move a blog from the server back to your local host. Refer also to the Moving WordPress article on WordPress.Org for more details.

The first step is to backup your WordPress directory, images, plugins and all related files. You will also need to backup your database in MySQL.

Start your localhost machine Filezilla.app. Then on the top menu go to file and then site Manager. At some point you must setup a new site name and then save it for future use. I use FTP – File Transfer Protocol and Use plain FTP and Login Type of Normal. The Host and Port and User and password you can all get from your server admin. To open your FTP site you go to File and then site manager and then My Sites and then click on your saved FTP site and click on Connect. On the left side of your Filezilla screen you should see your localhost desktop saved directory and then on the right side you should see all the files in your remote server directory.

Once you have files on your localhost that you want to move to your server via your new Filezilla setup you simple drag and drop from the local directory to the server directory.

Below is a screen print of the FileZilla screen showing the local directory on the left called FileZilla On Desktop and then the server files on the left (no files yet)

 

Now to backup all your WordPress directories and MySQL database items. I find that using a WordPress plugin like Updraft Plus to backup all your WordPress files and MySQL data is the best way to go. Once you run the backup with Updraft Plus you go to the settings and then saved backups and click on each of the following items and save those to your desktop. You now have a complete backup and can FTP this backup using FileZilla or use it as needed. It is important to save all database and plugins and themes and uploads as well as Others data to your desktop.

 

 

Once you have all the data backed up and located in a directory on your desktop you can use FileZilla to copy it to your server for safe keeping. The FTP might take a bit of time, in my case the backup was 162 MB.

Once you have all the MySQL and WordPress directories and files backed up and copied to a secure server you can work on the next step of moving the files to a new server. Refer to Moving WordPress in Codex for directions on this.

Before we can move a localhost MAMP WordPress website to a hosting site like Bluehost, we first need to install WordPress on a new domain on Bluehost. See the instructions for this below

 

How to Install WordPress On a new Bluehost Domain

The first step is to login to your bluehost and go to the home page. Then locate the Install WordPress icon as shown below circled.

 

 

 

This tutorial assumes that you have a domain already purchased and setup in Bluehost. See Bluehost for instructions on this step if this is not already completed.  Click on the green install button under Do it Yourself  (FREE) section.

The next step is to select the domain that you have already setup with Bluehost as shown below. Click on Check Domain

 

 

 

Fill out the Show advanced options and click on the I have read the terms and conditions of GPLv2 and click on Install Now.

You might get the following error and if so I will provide instructions on what to do next.

 

 

 

 

Bluehost what to do if you get the error We tried to create a database … When trying WordPress install

Make sure you are logged into your Bluehost cpanel.  Scroll down the page until you locate the database tools section as shown below. Click on MySQL Databases icon.

 

 

In the Create a New Database section create a new database name that is unique to your website. In my case I called it hillviewport1.  Note that I blacked out my user name for Bluehost.

 

 

Bluehost allows you to manage multiple websites with just one cpanel. This is very helpful. I will show you how to set this up now

How to setup Bluehost ManageWP

First make sure you are at your cpanel of your bluehost account. Then find the website section as shown below and then click on ManageWP Add Sites

 

 

Create a new email address and password for your ManageWP Account for Bluehost. Make sure you remember this info.

 

 

In the ManageWP screen enter your email address and password.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I am going to write a new blog post now for starting a new WordPress Website on BlueHost when You have a website already operational there.

How WordPress works with it’s core & wp-content files

 

Discussion of how WordPress works with it’s core & wp-content files

This blog entry will discuss the WordPress CMS and the basics of how WordPress works with its various files (and MySQL database tables as well).  The WordPress core files are located in the WordPress directory and include all files in that directory with the exception of the wp-content directory which holds the index.php, plugins, theme and upgrade directories which call can be modified. It is highly recommended that only files in the wp-content be modified by the WP developer and no other files touched at all due to being core files. The only exception I have run into is the wp-config.php file which can be modified and is so upon configuration of WordPress.

Below here is a screen print of a typical WordPress directory with all core files and then the wp-content directory which can be modified with additions and such to the index.php, Plugins dir, themes dir and upgrade.  I have highlighted the wp-content files which again are the only files that can be modified with WordPress.

 

The information from this blog is a summary from the book “Smashing WordPress Fourth Edition by Thord Daniel Hedengren” and information from the book “Professional WordPress Plugin Development by Brad Williams and Ozh Richard and Justin Tadlock.”  No direct quotes are used from either book, just a summary of concepts learned. Both book are superb books for the new WordPress developer and I highly recommend that both are purchased as soon as you can. I cannot overemphasize how important both books are for any new developer with PHP and WordPress.

When you startup a WordPress blog then index.php will load as well as the header.php, footer.php and sidebar.php. There are other files that might load also depending on the theme you are using. These might include single.php or category.php and others.

I will be looking in detail at the Twenty Eleven WordPress theme now. Our index.php for our very simple blog website is located in the twentyeleven directory. Here is a screen print of that file. We will discuss in detail.

2

As you can see this is a very simple index.php file and a good one to start with in our discussion for the WordPress basics.

Another superb WordPress resource is the theme.fm blog. This very important blog discusses how WordPress boots up and thus helps us understand the entire WordPress startup process better as we look at the WordPress core files.

Your .htaccess defines your index as index.php. Index.php will be our jumping off point now for all page requests. We will be using the Twenty Eleven theme for this discussion. Note that if you are not using permalinks in your current blog then you might not even have a .htaccess yet. Permalinks are more user friendly URLs for your WordPress posts.

Here is a screen print of the Twenty Eleven WordPress directory again with  wp-content as the only changeable directory.

4

Here is a screen print of our index.php file inside our Twenty Eleven theme directory in wp-content.

5

Before we start our study on this important index.php file it is good to mention that this is a good example of PHP code working along side HMTL code. You will see <?php …. ?> code and then <div> and such HTML code and then PHP code again. This works very well to have both working together so well.

The first PHP code we see is <?php get_header(); ?>  Note that there are comments also embedded in this code but we will ignore that for now. From our blog entry on PHP code we will remember that x(); is calling a PHP function. In this case we are calling the gets_header() PHP function. Note that this function get_header is defined in the core PHP code in the general-template.php file

Here below is a screen print of the defined function get_header in the general-template.php file (again core PHP file). As noted above we are only looking at this file and since it is a core PHP file we should never make changes to it under any circumstance.

6

 

Lets study the defined get_header function now. This function can pass in a parameter and as we can see we are passing in $name (name of the header) as NULL. Note that in the parameter section of your function define you can set a variable to anything you require. In this case $name was set to null but could have been set to anything needed.

The first line of code we now see inside our function get_header is do_action(‘get_header’, $name);  Remember from our blog on hooks that you can have a do_action(x,y); which is an action hook and the x is the name of the action hook and the y is the parameter to be passed in. Once our PHP code sees the do_action it will look for any and all properly registered functions for that hook and will fire them right away based on priority. The question that comes to mind right away for me is – how do I know if there are any registered functions assigned to this action hook of get_header.  So the question really is – where did get_header action hook get defined and are there any assigned registered functions for get_header?  A very good website that lists most of the WordPress Action Hooks is – Adam Brown website.  WordPress has many defined Action Hooks and it is good there is a full list out there to refer to. Another good resource for get_header action hook is http://codex.wordpress.org/Plugin_API/Action_Reference/get_header

To find out what functions are registered to an action hook put the following debug code in the <?php   ?> code somewhere near the top of perhaps the index.php and you will see all registered action functions to that action hook.

There is a quick way to see if there are any functions registered to an action hook in WordPress. First go to your file you keep all your functions in (in my case it is in the templates directories and then in the functions.php file) Then find the function in question and run this function to check if registered to any action hooks. 
<?php has_action( $tag, $function_to_check ) ?>

echo (“<pre>”);
var_dump( $wp_filter[‘wp_head’] );
echo (“</pre>”);

 

If you run this code to see what action functions are registered to wp_head you will get a lot of data output that is very useful. If you run the code as follows for the action hook get_header you will get a null return. Thus for now I am just going to ignore the do_action(‘get_header, $name); since it appears there are not action functions registered at this time to this. It should be noted that this is in fact an action hook and that I CAN at any time write my own API – add_action for get_header. A light bulb went on in my head where I realized that these do_action hooks in the code are sitting there for one purpose only and that is to act as a hook for the developer any time they need to write a function to register to that hook. Just because it is currently NULL does NOT mean much of anything. The bottom line is it is only just a hook for THE DEVELOPER to add_action or add an action function of their own to that hook.

echo (“<pre>”);
var_dump( $wp_filter[‘wp_head’] );
echo (“</pre>”);

 

Now what we will do is create a very simple action function and register it to the do_action(‘get_header’, $name) action hook just to see it working. Also we will use that debug code to see the newly registered action function inside that action hook.

Here is now an example of a very simple working API now with action hook.

  • On my Mac localhost WordPress install I edited the line 72 of the localhost functions.php (using the internal WP admin editor) and I added a new simple action function.

//slm test function 12/12/14
             function slm_test1()
             {
                echo “testaaa”;
             }

 

I then registered this new action function to the get_header action hook. I added this on line 15 of the localhost Mac WordPress index.php again using the internal admin Templates list on right side of page.

add_action(‘get_header’,’slm_test1′,10);

 

Here is the screen print of the home page showing the added echo data testaaa in the header area

6

 

Example Odesk request for PHP and WordPress development and one approach

 

Tutorial – example Odesk request for PHP and WordPress development and one approach

While I will continue to write blogs on all aspects relating to development with PHP and WordPress I believe it is important from time to time to stop and try out a real life WordPress modification applying what we have learned so far. That is the purpose of this blog post now.

Here is an example Odesk request for PHP and WordPress development as an example of what we might do for our first 1.0 trial. Note that details have been changed some, for our example

  • Intermediate to advanced WordPress front end and backend
  • Create a simple web app on top of WordPress
  • Integrate payment API
  • Frontend HTML , JS and jQuery and CSS3
  • Backend PHP

So based on this example ODESK modified entry we will now outline the requirements doc for our 1.0 real life WordPress development.

Phase 1

  1. Create a new WordPress page on my PHP and WordPress website and call it Example
  2. Add a contact form with no security on example page. Then install WordPress Plugin with security contact form.
  3. Code the contact form so had adequate PDO and security. (completed with new Plugin)
  4. Create new MySQL table and update with contact form again using proper PDO and security.
  • When adding a new page use the Add Contact form button to create contact but then might use new Plugin for PDO added security or other method . perhaps even hard code a contact form with PDO proper security.
  • We have talked in many of my blogs about many options for WordPress modifications including Action and Filter hooks, PHP code, functions and so on. The first question we have to ask ourselves now for this 1.0 example contacts form is – is there a way to use current WordPress template functionality to at least start this effort. We don’t want to always code from scratch every time we get a need. We want to look at what is out there already and then how we might use it. This might include even adding an existing plugin but only making modifications to that plugin.

Here is a screen print of a contact form created simply by using the Add Contact Form button on the Edit Page (Example). This option also allows for input of an email address so that when someone fills out the contact the email is sent to that setup email account.  This contact form, standard with many WordPress templates, does not filter any input data and is not secure. We now have two options. First we can code from scratch using PHP and functions and perhaps even an action hook, our own contact form. The other option is to import a WordPress plugin that is both secure and has data verification already in place.  The second option is the best approach and would allow for making our own customizations on the imported plugin.

Here first is the screen print of the standard non secure contact form.

a1

We will now create a form in our example page from a plugin that has a very secure and data validated contact form.

We will be using the PROPER Contact Form free plugin for WordPress.

Here below is a screen print of the PROPER Contact Form free plugin for WordPress.

23

 

Phase 2

Phase 2 will be created to meet the requirements of the following line items from above.

  • Create a simple web app on top of WordPress

We will create a new simple web app for our Hillviewweb.com website now. In a future blog post I will discuss the option to create our simple Web app on WordPress using Sessions. Sessions allow for login and other data to be shared across webpages. For now we are going to create a simple web app with MySQL backend NOT using Sessions thus we will be using page to page to page method.

Here is an excellent link for information on loading an Application with a Session.  WordPress and Application Sessions.

Create a simple web app on top of WordPress

 Here is an Odesk job asking for coding for WordPress Login/Register Redirect

We need our website to allow those who register/login to be sent back to the last page they were on before registering or logging in.
We have a job board website that allows people to find job listings they want to apply for. When they click “apply” they are asked to login or register before applying. If they login, we need them to be taken back to that job listing they wanted to apply for and if they register, we need to take them back to the listing they were applying for.
We need this done as quickly as possible.

Here is the approach that I would take to complete this job

We are going to now create a new registration form that will be activated automatically when a person clicks on “Apply” on the sample jobs listing we created and can be seen in the List directory of this website. This registration form will be a new WordPress plugin that we will code from scratch. It will have the proper security as well.

Step 1 – This instruction set assumes you have your WordPress blog hosted on a server (for example bluehost.com). Find the cpanel on bluehost after logging in. While in the cPanel of Bluehost find the File Management section and click on File Manager (folder). Now find the public_html folder and then the wp-content folder and then the plugins folder. Use the tool bar on the top of the page to create a new folder for your new plugin and then create a new x.php file in that folder for the plugin. Make sure you have a valid plugin header so the new plugin will show up in the plugins list.

 

I am going to take a break for a few weeks from writing this blog and I am going to start a new blog entry now that will go into more detail into how to create your own very simple sign in form using WordPress API. I will be focusing on the book Professional WordPress Plugin Development by Brad Williams and Ozh Richard and Justin Tablock. I think it is very important to have a very strong understanding of the inner working of API’s and Plugins with WordPress before attempting to complete this current blog and example.

coding your own WordPress API plugin – an introduction

 

Discussion of coding your own WordPress API plugin – an introduction

This blog entry will focus on coding your own WordPress API plugin. This is only an introduction and we will cover the fundamentals and basics first before attempting to dive into more depth on the subject. Many good coaches in various sports say that it all goes back to fundamentals. Thus we will focus on the fundamentals of the WordPress API plugin now.
I am going to write this blog and keep the status as published, so you will see this blog entry being created live. I did this on past Blog entries and find it helpful at times for readers to see things developing over time.

Before we get started it is a good idea to review and practice the material in my blog entry at http://www.hillviewwebdev.com/?p=352.  This blog gives us a very good review of how Plugins and hooks work with WordPress.  Once we have reviewed that material we will return to this post.

Ok it is assumed now that you completed the review of WP Core files as noted above. You should be able to create an action function that is simple and writes something to the screen and then registration of that function to a valid WordPress action hook. Ok we are ready to continue!

Refer to Tuts Form Plugin website for instructions on Creating a Custom WordPress Registration Form Plugin. I am going to apply those instructions now here in this blog to show how we can proceed with this effort. Thanks to Tuts website for such critically important information on creating WordPress custom registration forms. As noted in the Tuts blog we will now be coding a registration form that asks for the following:

  • username
  • password
  • email
  • website URL
  • first name
  • last name
  • nickname
  • biography

Step 1

The first step is to create the plugin php file and add the correct header to that file. As noted in other blog posts as well we want all our new code to go into the wp-content directory so as not to change any core WordPress code. So find your WordPress files and locate your wp-content directory and the the plugins directory and then create a new folder with the name of our registration form plugin. We will call our folder slm_registration. Then create a new php file inside of that directory called slm_registration and edit that file with the new header info as follows:

<?php
/**
* Plugin Name: slm-registration
* Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
* Description: A plugin registration form that updates MySQL and provides security for data inputs.
* Version: 1.0
* Author: Steve Massey
* Author URI: http://www.hillviewweb.com
* Text Domain: Optional. Plugin’s text domain for localization. Example: mytextdomain
* Domain Path: Optional. Plugin’s relative directory path to .mo files. Example: /locale/
* Network: Optional. Whether the plugin can only be activated network wide. Example: true
* License: slm002a65cu73
*/
?>

The following is a screen print of my localhost mac wp-content and then plugins and then slm-registration directory and then the slm-registration.php with the above header inside that file.

a

The following now is a screen print of my localhost WordPress Plugins showing now our new slm-registration plugin. We can activate this plugin now, but it won’t really do anything to active yet in that we have not added any PHP code yet. But it is sitting there and ready for our next step.

b

Per our Tuts instructions we are now ready to create a new PHP function with all the HTML code for our new registration form. But we are going to start very simple and just have one field on our form to start with , to show the flow of everything from the very start of function thru all active hook setup and then final test. Then our Step 3 we will start in with more detail. I like to start easy and very simple to get total flow clear in mind and then flesh out the more detailed code. Kind of like sketching a painting with a pencil first before you start in with real paint.

Step 2

Let’s add the following code now to our slm-registration.php form.  Again we are starting off with just one field and keeping it very simple. See the notes above on where the slm-registration.php file is located.  We will add functionality to the form as we go alone.

 

1

As you can see this is as simple as a form as we can get.  The user inputs their name and it simple is printed out on a new page. Here is the screen print of the test.php file for the action page of the form.

2

 

Now below are some screen prints of how I got the new plugin slm-registration registered with the action hook.

As noted above I created a new file called slm-registration.php and put it in its own plugin directory called slm-registration which is located in wp-content then plugins and then the directory slm-registration. This file as you can see above has the new function registration_form defined and then the add_action all in the same file.  For now we have the add_action registering our new function to the get_header WordPress action hook.

Then we run our WordPress blog and get the following right away in the header because of the action_hook we registered it to.

44

Now when we type in Steve Massey we get the output of the form action page which is test.php as shown below

111

Ok this is about as simple as it gets for a plugin that I can create. We are now going to start filling in more detail now that we have the plugin structure working correctly.

 

 

How to create your first WordPress Action Hook and PHP custom function

 

Tutorial on How to create your first WordPress Action Hook and PHP custom function

Note Nov 23 2015  from Steve Massey at Hillviewweb.com   This section on Action hooks is so important and should be understood before any attempt at a WordPress plug-in.

Thus I am going to add some more detail to this important blog post today.  Here goes!  I realize that I am repeating myself from below, but want to add more details.

Use your theme’s function.php file to both add a custom function and action (both!).  We will discuss child themes later but for now just find your functions.php file in your theme’s directory.

add this

 

add_action(‘wp_head’, slm1, 10);

function slm1()

{

echo ‘test';

}

So basically all we are doing is creating a new function called slm1() which is super simple just an echo and then making sure we register that new function to the ‘wp_head’ as priority 10 so that now with wp_head runs it will run our function. this is the essence of a plugin, at least how I understand it right now.

So why even bother with plugins? Well the plugin I just created will print test on the first line of the page and then all the remaining page. If I had just said echo ‘test'; it would have crashed the entire page other then test. This is why we have plugins to add functionality carefully to a page WITHOUT hurting other page elements. This Plug-in not replace.

So basically instead of putting the add_action and the function in the function.php file as I noted earlier, just put it in the plugins file which is stored in plugins directory in your theme and then it will run! just like before. Here is what my plugin file looks like. Make sure that you register your plugin before it will work though!!  MAKE SURE YOUR plugin php file is in a folder in the plugins directory with the plugin name! or won’t work.

One way to look at this is you are creating a plugin that will work always with any theme because it is outside the theme directory and independent of the theme. This can be very handy. Also you are simply creating a plug directory and file both with proper names and putting them inside the plugins directory and then making sure the header info on the plugin file is correct and then you can add_action(‘init’,’slm1′); to add a new function you will write called slm1 to run with the init hook in WordPress. then you just write your simple function like this below and you are done!   Here is a link to ALL possible action hooks for WordPress https://codex.wordpress.org/Plugin_API/Action_Reference

function slm1()

{

echo ‘test';

}

———————————————————————————————————————————————————

This above info is very helpful because it allows us to create a new plugin and then have it write something to the screen upon hook of init.

Let’s take things farther now though. Please refer to http://corpocrat.com/2009/12/27/tutorial-how-to-write-a-wordpress-plugin/ for more details on this, this is an excellent tutorial on how to make your first admin new entity in WordPress. I will just be pointing to just a few of those items here. But see that website for full details.

How to add admin new item in WordPress with new Plugin and make it do something.(very easy example)

  1. Create these four functions and add them to your new plugin file located in your plugin directory as we learned to create above
    • /* Runs when plugin is activated */
      register_activation_hook(__FILE__,’comments’);/* Runs on plugin deactivation*/
      register_deactivation_hook( __FILE__, ‘comments_remove’ );function slmcomments_install() {
      /* Creates new database field */
      add_option(“comments”, ‘Default’, ”, ‘yes’);
      }function slmcomments_remove() {
      /* Deletes the database field */
      delete_option(‘comments’);
      }
    • Add this function also to your plugin file just to show if you are on an admin page or not. this is just temporary only.
      • //slm shows if a page you are on is in fact admin or not
        if(is_admin())
        {
        echo ‘ ————————————————— yes you are in admin area now';
        }
        else
        {
        echo ‘ ————————————————— no you are not in admin area';
        }
    • Now in our plugin file also we will add a conditional add_action and new function as follows
      • //adds menu item to settings in wordpress admin
        if ( is_admin() ){/* Call the html code */
        add_action(‘admin_menu’, ‘comments_admin_menu’);function comments_admin_menu() {
        add_options_page(‘Comments’, ‘Comments’, ‘administrator’,
        ‘Comments’, ‘comments_html_page’);
        }
        }
    • Great now we have a Comments menu item created and showing up under settings. Good. Now lets create a new function which will have both PHP and HTML for the forms and will fill in our new admin page with stuff! Lets start off easy and simple. We will add this code to our master plugin file as we have been working on above here. Note that I am only doing one thing at a time right now. So here is our new function ONLY with Comments Options H2 Header.

ok I am going to leave this example for now and add to this later≥

In the meantime I will start a new example that is totally working from concept to screen with screen prints too. I think this will be easier to follow. I am not going to use numbers for the steps this time but a bold title for each step. Hope this is easy to follow for you.

 

 

Ok now let’s code a very very simple plugin and register it to our theme and see if it all works with what we now know.

—————————————————————————————————————————————————————————————————————-

Hooks are critically important for developing in WordPress with PHP. Hooks allow the developer to change how WordPress works without ever touching the WordPress core code. This is important because you never want to change the WordPress core code, one reason being if there is an update to WordPress and you had made code changes to the core code all those changes would be gone.

There are two types of hooks in WordPress. There are action hooks and filter hooks.  Action hooks allow for the developer to add code to WordPress and filter hooks allows the developer to make changes to WordPress data.  By the way the WordPress code code itself uses action and filter hooks so this is a widely used functionality with WordPress.

Action hooks allow you to run a custom function at a certain event or point in WordPress.   It is important to know about the do_action function as well. Here is a real life example of a do_action function.

       <?php

         do_action(‘wp_head’);

       ?>

 

For a complete list of all WordPress action hooks go to adambrown.info website. This is a very helpful list of all action hooks and registered custom functions assigned to each action hook.

When this code runs above it looks for any registered actions for the wp_head action hook. Note too that there are not parameters.   A good way to look at this is noting that the wp_head is a standard WordPress action hook that is always out there if you need it. Then if you want to code a new custom function action you use add_action(); to add your new custom function to the standard WordPress action hook (in our example it is wp_head).

Here is an example of adding a custom action function to the wp_head standard WordPress action hook

     <?php

          add_action(‘wp_head’, ‘slm_test’,100);

     ?>

 

The wp_head is the name of the action hook already in WordPress. The slm_test is the name of my new custom action function I want to add and the 100 is the priority number. Now lets create a very simple slm_test action custom function.

     <?php

         function slm_test()

     {

         echo(‘test’);

     }

?> 

 

Note that you can add mutliple custom action functions to just this one action hook – wp_head.

I am now going to use some screen prints to show how to add all this code for our new action custom function to WordPress.

Many but not all of the action and filter hooks for your WordPress website reside in the default-filters.php file located in the wp-includes folder located in the WordPress directory. While this is great for reference to see how many of the action hooks are created this is NOT the place for you to code your new action function and add it to wp_head action hook becasue it is a WordPress core file.

It is a good idea to add your new code for your new custom action function to your functions.php file which can be found inside your WordPress itself under Apperance and then Edit.

 

I like to edit the functions.php file directly inside of the folder for your theme and then add my new action code to the very top. Here is a space I am making now:

2

Below is a screen print showing how I have added my new custom function to the wp_head action hook:

3

 

Here is a screen print now below of our website in WordPress showing the new output in the header area.   slm test 1

4

 

Here is a list of some commonly used Action Hooks for WordPress.

  • plugins_loaded
  • init
  • admin_menu
  • template_redirect
  • wp_head (we have already used this one above)

I will be writting a blog on how to go into more depth on using action hooks and adding custom action functions in a few days. For now this is a good introduction to the concepts of action hooks.

 

Additional Info Added Feb 2015 for action hooks – example

I highly recommend the book titled “WordPress Plugin Development Cookbook” by Yannick Lefebvre and PACKT Publishing. I found the information to be very helpful in understanding how to create a brand new plugin.

Here are my own steps for creating a new WordPress plugin, based on lessons learned from the above mentioned book. I am not using any material directly from this book, just concepts.

  1. Go to your wordpress directory and then the wp-content directory and then the plugins directory
  2. Create a new PHP file. For example realtorheadadd.php
  3. Type the following. This information must be provided before your new plugin will show up in the plugins admin window.

    <?php
    /*
    Plugin Name: realtorheadadd
    Plugin URI:
    Description: Add header text or img to theme header
    WordPress admin interface
    Version: 1.1
    Author: Steve Massey
    Author URI: http:\\hillviewweb.com
    License: GPL1.2312gft
    */

    ?>

     

     

  1. Go to your theme’s Dashboard in WordPress and then find the Plugin tab and locate your new plugin and activate it
  2. Add your new action hook to the end of the file created above just before final ?> PHP close.
  3. Next add the function called from the action hook code. See below
    <?php
    /*
    Plugin Name: realtorheadadd
    Plugin URI:
    Description: Add header text or img to theme header
    WordPress admin interface
    Version: 1.1
    Author: Steve Massey
    Author URI: http:\\hillviewweb.com
    License: GPL1.2312gft
    */
    add_action(‘wp_head’, ‘realtorheadaddaction’);
    function realtorheadaddaction()
    {
    echo(“This is the text added to the header”);
    }
    ?>

Below is the output of our new plugin now (not very fancy but shows the basics of how to create and install a plugin  (The photo was used by permission from istockphoto.com)

1

 

Next I will add a favicon using a plugin I created.

In the plugins directory create a file called favicon.php with the following code

<?php
/*
Plugin Name: favicon
Plugin URI:
Description: Add header text or img to theme header
WordPress admin interface
Version: 1.1
Author: Steve Massey
Author URI: http:\\hillviewweb.com
License: GPL1.2312gft
*/
add_action(‘wp_head’,’header_output’);
function header_output()
{
$x = plugins_url(‘favicon.ico’, _FILE_);
?>
<link rel=”shortcut icon” href=”<?php echo $x; ?>”/>
<?php }

 

Make sure you have a favicon.ico file also in that plugins directory.

Activate your new plugin.

Run the webpage and now we see the favicon

12

Example HTML5 Form with PHP & MySQL

 

Example HTML5 Form with PHP & MySQL

Here is a simple HTML5 Form I created.

 

Here below now is the external stylesheet – style.css for our new form.

 

 

Create A CheckBox using a PHP Array

 
Here is PHP code for checkbox with multi values input into an array and then print out selected values

3

 

 

An introduction to PHP Security – Form Input Filtering

 

Discussion an introduction to PHP Security – Form Input Filtering

There is much more to write about on this topic and I will be adding more details soon.

It is always as good idea to filter your PHP input form to make sure there are no potential security issues.

Refer to the book Programming PHP from OReilly by Kevin Tatroe, Peter MacIntre and Rasmus Lerdorf 3rd Edition page 289 for a more detailed explanation of Security and PHP. I will start with a very simple input form example

 

This code while compact and efficient lacks proper security.  Security filtering for select options TBD soon.

How to Query MySQL and display without an API Plugin

 

An introduction on how to Query MySQL and display without an API Plugin

There is so much more to write on this topic and I will be adding more information soon.

This blog entry though helpful was written before I went started using PDO exclusively for all PHP querys from MySQL. Thus this is for reference only. Before we start working with the details of how to add MySQL table data directly to our WordPress page, it is important to mention that there are other methods for accomplishing this task. We can, for example, use the WordPress method of Post Types to add a new post type for database connection and data display. We can also create a unique WordPress API Plugin to accomplish the same task of data display. Last but not least is the option to install an already developed WordPress Plugin to allow us to work with MySQL data and show the data on our page.  I will be creating new Blog entries in the near future for all of these noted options and discussing the advantage and disadvantage of each.  But for now I want us to  focus on a method of MySQL database integration that displays database data in our WordPress Web page without use of an API. To accomplish this we will use our custom WordPress template created in another blog post and then create a unique PHP page which will have display all our data.

In our template directory we need to find a .php file and copy that and name it something like – templagephp.php or another unique unused name.  Here is our localhost Mac example:

/applications/wordpress/wp-content/themes/wpex-blogger-slm/templatephp.php

We will then look for an entry point for our new PHP code so as to display it on the screen embedded with text using HTML5.  Note that we are in fact adding our new code to a new page we have created and setup in our WordPress template now called PHP. I have added that PHP page to the top menu of this Website.

Here is the PHP code to connect to MySQL and then query the temp database and the contact table. This is also discussed in a previous Blog under the MySQL category on this Blog Website. Note that I have commented out the connect userid and password with xxx below.  Also note that SQL injection can be an issue thus in a later Blog I will show you how to do a MySQLi connection so as to not run into SQL Injection issues.

 

 

When you open the PHP page we will right away see the list of first names.

Keep in mind that we will not edit the page for PHP now as you normally would with WordPress but we would now edit the template file directly using your editor ( I use Komodo Edit 8). So for now we would go directly to the template file and add our PHP code.   /applications/wordpress/wp-content/themes/wpex-blogger-slm/templatephp.php

As noted earlier I will write a blog soon on how to create a WordPress Plugin API to have a fully working Form with an action page and update and delete and query and insert to the MySQL database. This first step is a simple example of a query from the database again using a template page only.

While building the API for WordPress Page integration with MySQL is by far the best approach, I found that putting the test.php action page for the form in our PHP trial area above directly in the wordpress folder does in fact works fine. This allows us then to create a database query, update and delete and insert application right from the test page again without a full API at this point.

 

A simple introduction to Object-Oriented PHP – OOP

 

What is  Object-Oriented PHP – OOP and how might it help me

It is difficult to ignore the Object-Oriented PHP option with PHP and WordPress. I will take a very quick look at OOP in this blog entry. For example we will look at $wpdb class as part of the OOP construction. This blog entry will outline the essence of OOP (Object Oriented programming ) with PHP , at least enough to be able to meet our security requirement needs.

In PHP OOP there are classes, objects, properties and methods as well as some other features.  A class is much like a blue print for building a house. It is not the house itself and not even the parts of the house, like wood and windows and so on, but it is only the plan of how to build the house. The class does in fact have properties and methods.  An object is created then from a class and is the physical house in our example. The data stored inside of that object would be the physical wood and windows and floors and so on, but without our class telling us how to put those parts together to make the physical house all we would have in our object are large piles of wood and flooring and so on. Keep in mind that many objects can be created from one class. For example 5 houses could be built from one set of plans.

 

 

 

 

9

 

 

 

 

 

 

A simple introduction to PHP MySQL Database Connection with PDO

 

Discussion on PHP MySQL Database Connection with PDO – a very simple start

The purpose of this blog entry is to introduce the concepts for PDO with PHP.  Subsequent blog entries will be created to provide more detailed information on PDO. Please refer to http://wiki.hashphp.org/PDO_Tutorial_for_MySQL_Developers for more detailed information on PDO.  As noted in the linked wiki article many mysql_ functions are getting old and are prone to more errors now.  The fact that these functions are open to more security issues from now being properly maintained also is a big issue for PHP developers.

The good news is PDO has a better interface and has drivers for other DMBS’s. PDO uses the method of binding parameters for more secure code. PDO has better performance and error handling. PDO does require a driver for PDO and a driver for MySQL (our choice for database).  As noted prepared statements are an important part of PDO. A prepared statement is really a template  for an SQL query with user input values. A prepared statement prevents SQL injection. We will be discussing PDO Prepared Statements in a new blog entry soon.

         $sql = ‘SELECT userid, first_name, last_name

          FROM users

         WHERE username = ? AND password = ?';

The code above is a prepared statement with question marks as anonymous placeholders. Later we will discuss how to use these.  Placeholders can also be used :xxxx.    Placeholders are more secure.

Here are the steps

  • Prepare and validate the SQL with a placeholder
  • Bind values to placeholders
  • Execute
  • Bind output to variables
  • Fetch results

For Hillview Websites we will always use a prepared statement with user input 100% of the time.

A transaction is a set of multiple SQL queries run together. For MySQL data must always use InnoDB engine.

For now I will focus this blog entry on how to connect to MySQL database using PDO. I have found that you can’t just copy and paste the connect and then sql code into your code editor but must be hand typed. If copied and pasted in there are issues. Hand typing works just fine.  Rather then hand type in the PDO database connection you can download the setup test.php file from this link here (it is best to copy and paste all this code directly into your own test.php file since we cannot store x.php files on WordPress directly –

Steps for PDO – Connect to MySql

13

Steps for PDO – SELECT Query with looping data

First I copy the try and catch code from the previous section and then I will add a $sql to the try…

Our new code we are adding here is in red so as to follow along. Note that we are also adding some PHP code now to the after !DOCTYPE section as well – a new foreach.

14

 

 

 

 

Now we get the following output

Quiz Practice

————————————-

White
Wise
Smith
Davis
Johns
Johnson

 

A simple introduction to PHP PDO Prepared Statements Security – single row

 

A simple introduction and discussion on PHP PDO Prepared Statements Security – single row

Before I start with the  PHP PDO Prepared statement discussion I will review the database connection using the PHP PDO Class as outlined in a previous blog entry.  Here is my normal local host database connection setup with PDO with my localhost.

$dsn=’mysql:host=localhost;dbname=temp';
$db= new PDO($dsn,’root’,’root’);

Note that I first creating a new $dsn variable and then I create a new $db object from the PDO class. The new object has a parameter asking for the dsn variable as well as user name and password.

PDO uses placeholders for prepared statements. Then I would bind values to those placeholders. I can use bindParam() or bindValue().  I can also pass an array directly to execute() method. The output values for prepared statements and go to a bindColumn() method.

Hillview websites will be always using bindValue() method because you can use variables and data passed in. The only time we will use bindParam() is when it is just one true variable only. Keep in mind also you can use anonymous or named parameters in prepared statements.  I will start with named parameters first.

All named parameters begin with a : colon

So I am going to now create a new input form that will have a number of data inserts into my contacts MySQL table.. All of these will be coded now using the PDO Prepared Statement option. First I will start with my already created $db object created from our PDO class in a previous blog. The only difference is I expanded the select * to a full list of columns in our contact table.

My form will have a drop down list of job and state.

Example working PHP PDO with Prepared Statements Single row select

 

  <!DOCTYPE html>

  
<html>


  <head>


  </head>


  <body>


<h2>Request Information</h2>


<p>————————————————</p>

  <form action=”test.php” method=”POST”>


  <label for=”job”>Job:</label>


  <input type=”text” name=”job” id=”job”>


  <input type=”Submit” value=”Submit”>


  </body>


  </html>

 

 

Here is our test.php code again just for discussion.

 

<?php

//code for connection to mysql and PDO prepared statement setup

if(isset($_POST[job]))
{

}
try

{
echo “you input $_POST[job]”;
echo(“<br>”); echo(“<br>”);
$dsn=”mysql:host=localhost;dbname=temp”;
$db = new PDO($dsn,’root’,’root’);
$sql=’SELECT job from contact where job= :job';
$stmt=$db->prepare($sql);
$values = array(‘:job’=>$_POST[job]);
$stmt->execute($values);
echo “Successful Connection”;
}
catch(Exception $e)
{
$error=$e->getMessage();
echo “there was a problem with your connection”;
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>This Is The Action Page test.php</h2>
</form>

<?php $row = $stmt->fetch(); ?>

<table border=’2′>
<tr>
<th>Job</th>
<th>Dummy1</th>
<th>Dummy2</th>
</tr>
<?php do { ?>
<tr>
<td><?php echo $row[job]; ?></td>
<td>dumm1 stuff</td>
<td>dumm2 stuff</td>
</tr>
<?php } while ($row=$stmt->fetch()); ?>

</table>

</body>
</html>

 

 

Note that my PDO try and catch PHP code is on the top of my test.php file before the !DOCTYPE. Note also that to save lines of code I am using $values = array(‘:job’=>$_POST[job]);  this is a faster way of getting the :xxx variable in place

Then you can see we did a $stmt->execute($values); with the array parameters set before.

Note also the embedding of the PHP code inside of the <table> html code. This I find is the easier way to get table output from PHP.

PHP PDO Prepared Statements Security – SQL Insert Mutliple Values

 

Quick discussion on PHP PDO Prepared Statements Security – SQL Insert Mutliple Values

TITLE* PHP PDO Prepared Statements Security – SQL Insert into MySQL Table – Mutliple Values hard coded

For right now we will keep this Blog entry very simple and hard code a row’s values for insert. In a later blog we will show how to insert the values from a form.

This blog will show how to insert multiple hard coded values from an array.

This is a very simple example with insert hard coded. We will expand with form :xxxx in a later blog.

Refer to the book Programming PHP from OReilly by Kevin Tatroe, Peter MacIntre and Rasmus Lerdorf 3rd Edition page 207 half way down the page in the Relational Database and SQL chapter for more details on how to use PDO and prepared statements with placeholders – Insert into the MySQL table.

 

Here is the form code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Request Information</h2>

<p>————————————————</p>

<form action=”test.php” method=”POST”>

<label for=”job”>Job:</label>

<input type=”text” name=”job” id=”job”>

<input type=”Submit” value=”Submit”>

</body>

</html>

 

 

Here is the test.php code

<?php
//code for connection to mysql and PDO prepared statement setup

if(isset($_POST[job]))
{}
try{
//echo “you input $_POST[job]”;
echo(“<br>”); echo(“<br>”);
$dsn=”mysql:host=localhost;dbname=temp”;
$db = new PDO($dsn,’root’,’root’);
$sql=(“INSERT INTO contact(firstname,lastname,address,city,state,country,phone,job) values(‘Dan’,’Smathers’, ‘1029 Spring St’, ‘Atlanta’, ‘GA’, ‘US’, ‘555-847-9494′,’Doctor’)”);
$stmt=$db->prepare($sql);
$values = array(‘:job’=>$_POST[job]);
$stmt->execute($values);
echo “Successful Connection”;
}
catch(Exception $e)
{
$error=$e->getMessage();
echo “there was a problem with your connection”;
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>This Is The Action Page test.php</h2>
</form>

<?php $row = $stmt->fetch();
if($row)
{

?>

<table border=’1′>
<tr>
<th>Job</th>
<th>First Name</th>
<th>Lastname</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Country</th>
<th>Phone</th>
</tr>
<?php do { ?>
<tr>
<td><?php echo $row[job]; ?></td>
<td><?php echo $row[firstname]; ?></td>
<td><?php echo $row[lastname]; ?></td>
<td><?php echo $row[address]; ?></td>
<td><?php echo $row[city]; ?></td>
<td><?php echo $row[state]; ?></td>
<td><?php echo $row[country]; ?></td>
<td><?php echo $row[phone]; ?></td>
</tr>
<?php } while ($row=$stmt->fetch());
}
?>

</table>

</body>
</html>

 

What is Cross-Site Scripting Attacks (XSS)

 

What is Cross-Site Scripting Attacks (XSS)  a quick discussion

Cross-Site scripting attacks account for over 20% of all security attacks on the internet daily. In this Blog I will use XSS from now on referring to Cross-Site Scripting attacks.  Let’s look at our current simple form created on another Hillview Website blog.

Refer to the book Programming PHP from OReilly by Kevin Tatroe, Peter MacIntre and Rasmus Lerdorf 3rd Edition page 289 in the Security Chapter for more information on Filter input and Cross-Site Scripting.

Cross-Site Scripting is basically a situation where the PHP code is vulnerable when your output data is not properly escaped.

<form action=”test.php” method=”POST”>

<label for=”job”>Job:</label>
<input type=”text” name=”job” id=”job”>
<input type=”Submit” value=”Submit”>

 

And here below is the action page, for now just displaying the entered value for job.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>This Is The Action Page test.php</h2>

</form>

<?php

echo($_POST[job]);

?>

</body>

</html>

 

echo($_POST[job]);

 

Here below is a good fix for this Cross Site Scripting issue

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>This Is The Action Page test.php</h2>

<?php

//Cross Site Scripting fix

$html = array(‘job’=> htmlentities($_POST[‘job’], ENT_QUOTES, ‘UTF-8′) );
echo $html[‘job’];
?>

</body>
</html>

PHP PDO Prepared Statements Security how to use SQL Insert for multiple values in a Form

 

Discussion on PHP PDO Prepared Statements Security how to use SQL Insert for multiple values in a  Form

I will start with the code from our previous blog which showed how to insert using PDO with Prepared Statements but only with hard coded array values. This blog will take that code but add to it the functionality of bringing into that array the values from the input form.

Here is a very simple form

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Request Information</h2>

<p>————————————————</p>

<form action=”test.php” method=”POST”>
<label for=”firstname”>Firstname:</label>
<input type=”text” name=”firstname” id=”firstname”><br>

<label for=”lastname”>Lastname:</label>
<input type=”text” name=”lastname” id=”lastname”> <br>

<label for=”address”>Address:</label>
<input type=”text” name=”address” id=”address”><br>

<label for=”city”>City:</label>
<input type=”text” name=”city” id=”city”><br>

<label for=”state”>State:</label>
<input type=”text” name=”state” id=”state”><br>

<label for=”country”>Country:</label>
<input type=”text” name=”country” id=”country”><br>

<label for=”phone”>Phone:</label>
<input type=”text” name=”phone” id=”phone”><br>

<label for=”job”>Job:</label>
<input type=”text” name=”job” id=”job”><br>
<br><br>
<input type=”Submit” value=”Submit”>
</body>
</html>

 

Here is the test.php action page taking the form data and using as placeholders in our insert now

<?php
//code for connection to mysql and PDO prepared statement setup
if(isset($_POST[job]))
{

}
try{
//echo “you input $_POST[job]”;
echo(“<br>”); echo(“<br>”);
$dsn=”mysql:host=localhost;dbname=temp”;
$db = new PDO($dsn,’root’,’root’);

$statement=$db->prepare(“INSERT INTO contact (firstname, lastname, address, city, state, country, phone, job) VALUES(:firstname, :lastname, :address, :city, :state, :country, :phone, :job )”);
$statement->execute(array(
’firstname’ => $_POST[firstname],
’lastname’ => $_POST[lastname],
’address’ => $_POST[address],
’city’ => $_POST[city],
’state’ => $_POST[state],
’country’ => $_POST[country],
’phone’ => $_POST[phone],
’job’ => $_POST[job])
);

echo “Successful Connection”;
}
catch(Exception $e)
{
$error=$e->getMessage();
echo “there was a problem with your connection”;
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>This Is The Action Page test.php</h2>

</body>
</html>

How to use a PHP PDO Prepared Statement for SQL Update of MySQL

 

Discussions on how to use a PHP PDO Prepared Statement for SQL Update of MySQL

Attached is the file for update of MySQL data using PHP PDO.  Note that I am using PHP OOP again but some different objects and variables for insert. We can easily change $phone also to be a variable passed from the form page with $_POST[xxxx];

<?php

//code for connection to mysql and PDO prepared statement setup

if(isset($_POST[job]))
{

}
try{
//echo “you input $_POST[job]”;
echo(“<br>”); echo(“<br>”);
$dsn=”mysql:host=localhost;dbname=temp”;
$db = new PDO($dsn,’root’,’root’);
$phone = ‘9999’;
//query
$sql = “UPDATE contact SET phone =?”;
$q = $db->prepare($sql);
$q->execute(array($phone));

echo “Successful Connection”;
}
catch(Exception $e)
{
$error=$e->getMessage();
echo “there was a problem with your connection”;
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>This Is The Action Page test.php</h2>

</body>
</html>

 

 

 

 

A discussion of MySQL and PHP security issues with WordPress and legacy solutions

 

A discussion of MySQL and PHP security issues with WordPress and legacy solutions

This blog entry, though informative, was written before Hillview Websites decision to move all security for PHP to PDO. Please refer to the newer blog entries on PDO for more details. This blog will be retained for reference needs only. 

Having worked with SquareSpace 6 for a year or so I was a bit spoiled because I did not have to worry about security issues with SQL updates. Well, the primary reason for not having to worry about such issues is the fact that I could not use PHP and MySQL at all with SquareSpace. Having recently moved over to WordPress now and having the full benefits of being able to work with PHP and MySQL with WordPress things do get interesting on the security front with more to do.  Now we have to be aware of possible security issues with SQL updates including Cross Site Scripting, Cross Site Forgery, SQL Injection, Privilege Escalation and other security holes.

If we refer back to our PHP Lesson 3 blog entry we have detailed instructions on how to use the mysqli API to create PHP code that will insert, update, select and delete from our MySQL database tables. These instructions are very basic and do not account for possible security issues enherent with using SQL and PHP with WordPress. This blog will attempt to take us to the next level of PHP development to patch some of our undesired SQL security holes.

In a future blog we will outline details about how to work with mysqli and not get into any issues with Cross Site Scripting and other bad security issues. For now we will focus in this blog entry on validating our data on a form entry and data sanitization.

There is a big trade off with PHP and MySQL and WordPress. We get almost unending flexibility to do almost anything we want with the PHP code but it comes with a trade off price. We have to be very careful to ensure all $_POST and form inputs are well secured from outside hackers and that there are no SQL Injection potentials.

There are three basic groups of PHP security  – Data validation, data sanitize and SQL Injection fix with ESC. We will show an example of each now. In a later blog entry we will be discussing how JavaScript can be used to validate data for an import form also.

Here is our HTML form code for input of the Last Name:

Last Name:<form action=”test.php” method=”POST”>
<input name=”x21″>
<input type=”submit” value=”Submit”>
</form>

DATA VALIDATE AND SANITIZE Example 1

Here is our action page PHP code using the type_alpha function which checks to make sure the input is in fact all alpha with no numbers or special characters. This is an example of data validation. 

$i = $_POST[x21];

if(ctype_alpha($i))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered the last name of: ‘.$_POST[x21];
}
else
{
echo(“You must re-enter your last name with letters only and not spaces or numbers. Re-enter again”);
}

In this example we have validated the last name input field , checking to make sure not special characters or numbers were entered. Using the ctype_alpha function for PHP is a good way to validate our contacts form in our PHP page.  Firstname, last name, city and state as well as country can all use the type_alpha function. The only tricky thing to look out for are valid spaces.  Since ctype_alpha does not allow spaces we need to first take out any space in our entries before running the final ctype_alpha.  Here is the full PHP code now for $firstname

//get rid of spaces first
$firstnamex = str_replace(‘ ‘,”,$firstname);
echo ‘************’.$firstnamex;

//run the ctype function
if(ctype_alpha($firstnamex))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered: ‘.$firstnamex;
}
else
{
echo(“Not all alpha entered – not allowed”);
}

We now repeat this code for all of our alpha only input items.

 

DATA VALIDATE AND SANITIZE Example 2

The data sanitize is a good option to use for example when you have a large memo field the user can input data into. This would be a good candidate for data sanitization that would strip out any HTML tags and such.

We will add this example 2 to the PHP later. For now the code is outlined here below.

Here  is our action page PHP code to check our input fields to make sure all alpha or all numeric depending on the requirement of that field. Note that using an array would be a better solution, this is the longer way of coding this, but a good start for sanitization.
$firstname = $_POST[firstname];
$lastname = $_POST[lastname];
$address = $_POST[address];
$city = $_POST[city];
$state = $_POST[state];
$country = $_POST[country];
$phone = $_POST[phone];

//get rid of spaces first
$firstnamex = str_replace(‘ ‘,”,$firstname);
echo ‘************’.$firstnamex;

//run the ctype function
if(ctype_alpha($firstnamex))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered: ‘.$firstnamex;
}
else
{
echo(“Not all alpha entered – not allowed”);
}

echo(“<br>”);
echo(“<br>”);

//get rid of spaces first
$lastnamex = str_replace(‘ ‘,”,$lastname);
echo ‘************’.$lastnamex;

//run the ctype function
if(ctype_alpha($lastnamex))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered: ‘.$lastnamex;
}
else
{
echo(“Not all alpha entered – not allowed”);
}

echo(“<br>”);
echo(“<br>”);
//get rid of spaces first
$addressx = str_replace(‘ ‘,”,$address);
echo ‘************’.$addressx;

//run the ctype function
if(ctype_alnum($addressx))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered: ‘.$addressx;
}
else
{
echo(“Not all alpha and numeric entered – not allowed”);
}

echo(“<br>”);
echo(“<br>”);

//get rid of spaces first
$cityx = str_replace(‘ ‘,”,$city);
echo ‘************’.$cityx;

//run the ctype function
if(ctype_alpha($cityx))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered: ‘.$cityx;
}
else
{
echo(“Not all alpha entered – not allowed”);
}

echo(“<br>”);
echo(“<br>”);

//get rid of spaces first
$statex = str_replace(‘ ‘,”,$state);
echo ‘************’.$statex;

//run the ctype function
if(ctype_alpha($statex))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered: ‘.$statex;
}
else
{
echo(“Not all alpha entered – not allowed”);
}

echo(“<br>”);
echo(“<br>”);

//get rid of spaces first
$countryx = str_replace(‘ ‘,”,$country);
echo ‘************’.$statex;

//run the ctype function
if(ctype_alpha($countryx))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered: ‘.$countryx;
}
else
{
echo(“Not all alpha entered – not allowed”);
}

echo(“<br>”);
echo(“<br>”);

//get rid of spaces first
$phonex = str_replace(‘ ‘,”,$phone);
echo ‘************’.$phonex;

//run the ctype function
if(intval($phonex))
{
echo(“All Alpha – Accepted”);
echo(“<br>”);
echo ‘You have entered: ‘.$phonex;
}
else
{
echo(“Not all alpha entered – not allowed”);
}

echo(“<br>”);
echo(“<br>”);

 

SQL INJECTION FIX OPTION 1 – Bind Parameters

Our first step is to create a mysqli prepared statement. This uses the PHP if statement.

We will add this example to the PHP page on a later date.

$temp =”test”;

if ($stmt = mysqli_prepare($con,’Select lastname from contact’))

{

//bind parameters for markers

mysqli_stmt_bind_param($stmt, “s”,$temp);

//execute query

mysqli_stmt_execute($stmt);

//bind result variables

mysqli_stmt_bind_result($stmt, $temp);

 //fetch values

mysqli_stmt_fetch($stmt);

//print to web page

echo($temp.$lastname);

//close statement

mysqli_close($stmt);

}

SQL INJECTION FIX OPTION 2 – mysqli_real_escape_string($x); 

It should be noted that the bind parameters method for SQL Injection fix works well as does using escape string noted here below. For our purpose in this tutorial we are going to use this escape option for our PHP page above.

So basically what we are going to do for the esc option is to re-write our $result variable as created above with a new esc method that is object oriented. We will comment out our old $result above now. We will use the sprintf() function also for added security.

 

SQL INJECTION FIX OPTION 3 – esc_sql() method

As you can see already there are many methods for fixing SQL Injection issues. Thanks to an outstanding book by Brad Williams, Ozh Richard, Justin Tadlock titled Professional WordPress Plugin Development by the publisher Wrox (programmer to programmer series) there is a method for security fix called esc_sql(). We will describe this method in detail now.  We are reading from page 147 to 149 in the Wrox book.

Before we discuss the SQL Injection security fix I think it is important to first look at the problem and fully understand why this is such a big deal with PHP. It can be a critical problem if not dealt with properly.

We will first in our MySQL phpMyAdmin screen create a new table called users with a column titled user_login and a column titled user_pass for password input and storage. Lets see what this looks like in our phpMyAdmin screen now.

Again we will add this example to our PHP example page on a later date.

Here would be the sql with no sql injection fixes. This would be dangerous to leave as is.

$sql = “SELECT * from users where ‘user_login’ = ‘$login’  and ‘user_pass’= ‘$password’   “;       (see noted Wrox book above page 147)

At this point we are going to re-write this book example to match our current $con database connection already established with MySQL and tested.

Here below now is our syntax showing an unguarded query open to sql injection attacks.

echo(“Example of using esc_sql for sql injection potential issues”); echo(“<br>”);
echo(“———————————————————————————————————-“);echo(“<br>”);

$login = ‘anything';
$result=mysqli_query($con,”select * from users where user_login = ‘$login’ “);
while($row=mysqli_fetch_array($result))
{
echo $row[user_login];
}

————————————————————————————————————————–

As noted in the Wrox book outlined above this sql really opens us up to the potential for sql injection security issues.  All the user has to do is add OR 1= “1” to the $result query string and they would have a successful sql injection attack.

 

————————————————————————————————————————————

THE $wpdb Object Security Method

The $wpdb object is a good way to query and update using PHP and MySQL with WordPress.  The $wpdb is actually a class. Before we dive into how this class works though it is important to do a review of how object, classes and methods work with PHP.  The only reason we are looking a bit into Object oriented is that our $wpdb is in fact a class as noted.

In PHP object oriented there is a class which is somewhat like a wrapper that defines the object along with its methods and properties.  This class can be reused in your code also. Each class can have methods and properties. A method is really a function inside of a class but keep in mind that a class might not have any methods, or might have many of them. Properties are again in the class for the object and we would use methods to modify and set properties for that object. It has been said that the class is the blueprint or idea and the object is the thing. The class contains both the data and the code and in PHP we call the data the property and the method the code or action.

We will now code a very simple object.

  1. We are calling our object user and defining the class as user.

<?php

class user

?>

 

  1. We now define the name of the user as a property. We are giving public access to be used by any place in the program.

<?php

{

class user

public $name;

}

?>

  1. We now define the _construct method inside of our class. $name is also passed into the constructor as an argument (much like any function in PHP as we have seen before.)

<?php

{

class user

public $name;

public function _construct($name=NULL)

}

?>

  1.  We now write our function with the passes name variable 

<?php

{

class user

public $name;

public function _construct($name=NULL)

{

If(empty($name))

   $this->name=’somename';

  else $this->name=$name;

}

}

?>

 

Next we create the object

$user = new user();

$user_name = $user->name;

Now back to our $wpdb object that will help us with our PHP secuirty with updates and selects from and to MySQL.

wpdb is a class. Because of security issues we should not just rely on PHP mysql_query() and mysql_fetch_array functions.  The good news is that we can use the $wpdb object to access data from any of our MySQL tables. Here is an example then of an update to MySQL using the $wpdb and esc_sql. This will ensure good security and keep sql injection from being an issue.

 

 

 

A discussion on PHP and MySQLi Escape Method options for security using the legacy Option non PDO

 

A discussion on PHP and MySQLi Escape Method options for security using the legacy Option non PDO

This blog entry, though informative, was written before Hillview Websites decision to move all security for PHP to PDO. Please refer to the newer blog entries on PDO for more details. This blog will be retained for reference needs only. 

There are two ways to ensure there are no SQL Injection security issues when users input data into your html form.  We will be discussing the first method of PHP and MySQLi Escape Method in this blog entry and then the prepared statement in our next blog entry.

Here is our $sql variable now without any Escape methods. This is a dangerous sql statement because it is wide open to SQL Injection issues. I highlighted the dangerous part of the SQL statement in bold below.  Someone might be able to use SQL Injection to add to that where last name = and thus create security issues.

FORM.PHP  (form page)

<form action=”test.php” method=”POST”>
<input name=”x”>
<input type=”Submit” value=”Submit”>
</form>

TEST.PHP (action page)

$db=new mysqli(‘localhost’,’root’,’root’,’temp’);
if($db->connect_error)
{
echo ‘bad';
}
else
{
}

$_GET = $_POST[x];

$sql = “SELECT lastname from contact where lastname = ‘$_GET’ “;
$result = $db->query($sql);
while($row=$result->fetch_assoc())
{
echo $row[lastname];
}

Note that this form and action page do work just fine BUT there might be SQL injection issues!

 

Now I will use the same code as above but will add ESC code for SQL Injection 

We have added a new variable called $searchterm and then assigned it the real_escape_strings to that.

Our changes are below in RED.
$db=new mysqli(‘localhost’,’root’,’root’,’temp’);
if($db->connect_error)
{
echo ‘bad';
}
else
{

}

$_GET = $_POST[x];
$searchterm = $db->real_escape_string($_GET);

$sql = “SELECT lastname from contact where lastname = ‘$searchterm’ “;
$result = $db->query($sql);
while($row=$result->fetch_assoc())
{
echo $row[lastname];
}

A discussion of PHP MySQL Database Connection with mysqli and PHP OOP – Legacy Option – Not PDO

 

A discussion of PHP MySQL Database Connection with mysqli and PHP OOP – ( Legacy Option – Not PDO)

This blog entry, though informative, was written before Hillview Websites decision to move all security for PHP to PDO. Please refer to the newer blog entries on PDO for more details. This blog will be retained for reference needs only. 

If you have completed the reading of the previous blog post “Introduction to Object-Oriented PHP” then you can continue on now with using what we have learned with PHP OOP and apply that to creating new database connections with MySQL using mysqli and OOP.

We will now create PHP code using OOP and create our database connection. This can be at the top of the PHP page or in the includes directory.

 <?php
//we will be using the OOP method of database connection. we are using the already created mysqli class as you can see
$db = new mysqli(‘localhost’,’root’,’root’,’temp’);

//now we check for connection errors
if ($db->connect_error)
{
$error=$db->connect_error;
}
else
{
echo(“Connection Successful”);
}

?>

We get a message when we run this saying Connection Successful. Good news lets continue. later we will add the try code also and catch for any errors.

We will now try our first query of our contact mysql table in the temp database

 Fetching Results

There are a number of ways to fetch the data results, but for now we will only show the mysqli_fetch_assoc.

Here is all the code required for query of lastname

<p><strong>Connecting to MySQL with mysqli and OOP</strong></p>

<?php
//we will be using the OOP method of database connection. we are using the already created mysqli class as you can see
$db = new mysqli(‘localhost’,’root’,’root’,’temp’);

//now we check for connection errors
if ($db->connect_error)
{
echo “Connection Error”;
}
else
{
echo(“Connection Successful”);
}

//query code
$sql = “SELECT lastname from contact”;
$result = $db->query($sql);

while($row = $result->fetch_assoc())
{
echo $row[lastname];
}
$db->close();

?>

PHP and MySQLi Escape Method for Security