Custom menus to WordPress themes. -Pittsburgh web development.

Using php to add a custom menu navigation to your WordPress theme. ENAC, Pittsburgh’s rising web powerhouse.

Lets get started with making the new navigation. Go into your functions.php file and get some space to add some code. We want to use the WordPress function“register_nav_menu()”  what this does is it tells WordPress that we are going to add a new menu, we are going to put it in a function so we can add as many menus as you we would like, we could also add this to the BlankSlate register_nav_menus() function, but for now we are showing you it this way because this will help us understand the WordPress function. So we created a function called “register_animated_menu()” and added the “register_nav_menu()” built in function inside it, you can name the function whatever you like, then we use the WordPress “add_action()” function to call our menu.  Our final line looks like this:

 

[php]

add_action(‘init’,’register_animated_menu’);

[/php]

What this last sentence is saying is “please register the function register_animated_menu on after WordPress is loaded but before the headers are sent” that is the ‘init’ tag.

Our final code looks like this now.

register_nav_menu() WordPress image

The first ‘animated-menu’ is the name for the WordPress back-end to use for menus and the “__()” function is for language purposes, the ‘Animated Menu’ inside the function is the name that will show up on your WordPress dashboard.

AWESOME!!!

Now we have that set up, we have to go into the file that we want to add the menu and add it now. I made a secondary header file and named it, well, “header-secondary.php” we will show you how to use this at a later date, but for now we just copied the header.php code into it. We are going to use the “wp_nav_menu()” function that is built into WordPress to make this menu “appear” in your code. We wrapped this code in the normal “<nav>” so the first line looks like this:

 

[html]

&lt;nav id="menu" role="navigation"&gt;
[/html]

We give it an id, and we add the role=”navigation” for screen readers and such. (Always remember ARIA) then we start the php. *although you can add an id to this nav in order to style it this way I personally do not recommend that as then that will be static, maybe you want to put two different style menus in that location, they will both be stuck with the same style if you know what we mean….

Anyways, so we use the built in “wp_nav_menu()” we wrote ours like this:

 

[php]
&lt;?php wp_nav_menu( array( ‘theme_location’ =&gt; ‘animated-menu’,
‘container_id’ =&gt; ‘animated-menu’,
) );
?&gt;
[/php]

Ok, so line 1 is our opening php tag, line 2 we call the function, now here is the tricky thing, line 3 we are  giving the theme location, we did not know where we are putting this menu yet so we gave it a generic name of “animated-menu” THIS NAME MUST MATCH THE NAME OF THE MENU IN THE FUNCTIONS.PHP FILE. Remember this function:

register_nav_menu() WordPress image

Then the ‘container_id’ is the id you want to give this navigation, we just made it the same as the menu name for WordPress, this makes no difference in functionality of it working. You can name it sparkleKittenSurprise for all we care. close it up and close the nave and there you go you are all finished with it. Our final outcome looks like this:

wp_nav_menu() WordPress image

Awesome, all done. We am going to go over why it is a bad idea to style stuff based on static id’s now. Say you wanted two different menus but in the same area, like so:

wp_nav_menu() WordPress image

If you styled them off the <nav> id, then both of these menus will have the same style, when using the ‘container-id’ these menus would have a different id to style off of.

Ok, let us go into our dashboard and look under menus and see what we have.
Manage Locations WordPress dashboard image

BADABING-BADABOOM IT IS THERE.

Awesome now just to make sure lets get that menu set up and inspect it, I threw in some pages and added the items to the menu, and:

Google inspect WordPress Navigation Image

Looks like the id is all there,awesome!

If you are looking to hire ENAC for you next Pittsburgh web project, contact us here.

Databases with GoDaddy

ENAC Instructional Series

Today we are going to walk you through setting up a database with GoDaddy and getting wordpress up and running and hopefully you will think of using ENAC for your next Pittsburgh Business website.

Sometimes getting a database set up and functioning is hard work, so we are going to give a quick run down on how to get one set up through GoDaddy. Assuming you have a GoDaddy hosting plan and know a bit around, first go into the root public_html folder and create a new folder. Then go into the cPanel or whatever hosting you have and go ahead and click on the MySQL databases and choose add a new database.

Adding a GoDaddy Database, ENAC, Pittsburgh's rising web development.

After you have named and added your database, you have to add a user to the database (or create one). So click on Add User to database and then select what user and what database.

Adding a user to a godaddy database, ENAC

After that, a user privilege checklist will come up. Since this “user” is going to be WordPress® you will want to check all. That way you ensure that the WordPress® CMS will function correctly.

GoDaddy user Privledge. ENAC

Now, use an FTP or any other means to upload your WordPress files into the folder you created in the file manager. To make sure it is pointing in the right area, go under “Domains” and click add on domain, it will ask for the domain name, (URL) that you have purchased for this, and it will also have a select for a folder, choose the folder you created and added the WordPress® files to and click ok.

Pointing a domin to the correct folder.

After all this is said and done, go to your browser and navigate to your URL and you should get the WordPress® setup page, set up the wordpress as normal, BUT for the user and password, use the USER that you created for the database, and the password that was created for you. Leave the localhost as is as that is how GoDaddy labels their host as well.

And there you go. This is how you set up a database in GoDaddy to run WordPress®

Questions and comments are welcomed below.

AND ONCE AGAIN, PLEASE CONSIDER USING ENAC FOR YOUR NEXT WEB PROJECT IN THE PITTSBURGH AREA! CONTACT US HERE.

Build Environments. Pittsburgh Web Design

ENAC Instructional Series

We see a lot of different ideas here at ENAC, but there is never a share on how these ideas come about. Today, we are going to walk you through how to set up a website / application build environment using WordPress®, Github, Gulp, and VSCODE. And hopefully you will want to use ENAC for all your Greensboro web design needs.

(THIS TUTORIAL IS FOR INTERMEDIATE DEVELOPERS)

As a developer sometimes it is hard to get things working together nicely, in this quick tutorial, we are going to show you how to get WordPress®, Github, Gulp and VSCODE to work seamlessly together to speed up the development process.

This is the process that we use to design and develop all of our sites.

First, set up the database you are going to be using in your /localhost/ XAMPP or WAMP folder. Install WordPress® into the folder and get everything up and running on your browser. After you get your test site running on your local folder, navigate to the folder with the IDE you are using, VSCODE looks like so:

ENAC's VSCODE file structure. Pittsburgh Web Design

 

Next we are going to use the normal “npm init” to initialize NPM. It will make our package.json file and set up your information. We have slimmed down the build for tutorial purposes so our gulpfile will look like so:

ENAC's Gulpfile Example. Pittsburgh Web Development

 

You will notice a couple things, we have commented out the SASS because we are not using it, and there are some changes in the structure of browsersync. Install all the npm packets from our gulpfile, or, if you have your own set of packets you like to work with, install them. I am going to quickly point out some differences. In the gulp task browser-sync, there is usually an IP address in the proxy area for this value. Since we are using WordPress®, we have changed that to the WordPress® file location. Also at the bottom of the screen, all we have to do is point to the theme location for the browser reload, not the whole app, this makes the packet run faster. You can include all your image and JS files we have just simplified it. Now you have a site, up and running, on your localhost that you can develop with Gulp build tools. Now it is time to add versioning. We use Github, so we are going to use that as an example. We initialized our Github and are about to make our first commit but we need to add some things so we do not overwrite config files. In your .gitignore file go ahead and place node_modules and wp-config.php in there. We are all finished now! We can work on a site in one area, use WordPress® exporter and save the file to the root structure, check it into Github, then check it out at another machine without overwriting the config file and causing issues. Yes, it may be somewhat of an inconvenience to reload the WordPress® site when you check it out, but after the initial setup it is very simple to work form machine to machine!

We hope you found this tutorial helpful. Programs we used can be found here:

XAMPP

VSCODE

NODEJS

WORDPRESS®

If you would like hire ENAC for your next Pittsburgh Business Website, or would like WordPress® training, contact us here!

Using a simple CSS “Stitch” effect to enhance your website!

ENAC Instructional Series

Today we will be doing a very simple stitch CSS only effect. What we fist want to do is get your favorite IDE fired up and make a simple html page.  A bare bones page should look like this:

 

[html]
<!DOCTYPE html>
<!–[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]–>
<!–[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]–>
<!–[if IE 8]> <html class="no-js lt-ie9"> <![endif]–>
<!–[if gt IE 8]><!–> <html class="no-js"> <!–<![endif]–>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!–[if lt IE 7]>

You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.

<![endif]–>
</body>
</html>

[/html]

What we want do do now is add a style tag right in the head so that we can do the work as simple as possible. Also add one plain div tag in the body, and
you should have something that looks like this now:

[html]
<!DOCTYPE html>
<!–[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]–>
<!–[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]–>
<!–[if IE 8]> <html class="no-js lt-ie9"> <![endif]–>
<!–[if gt IE 8]><!–> <html class="no-js"> <!–<![endif]–>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>
<!–[if lt IE 7]>

You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.

<![endif]–>

<div></div>

</body>
</html>
[/html]

Ok, awesome, now, lets ad some CSS markup, and then we will explain what is going on.

[css]
div {
width:400px;
height:400px;
border: dashed 1px #d9d9d9;
background: #0d0d0d;
box-shadow:0 0 0 5px #0d0d0d;
border-radius: 10px;
}
[/css]

Ok so what is going on here is we are making the div 400 x 400 pixels. That is pretty straight forward, then we are making a dashed border, that is 1 pixel wide with a very dark grey background.
Next we are using the CSS box-shadow property, and adding a non blurred effect to it. The CSS numbers mean this (in my code) the first “0” is the horizontal value, positive to move the shadow right, negative to move left, there is no value so the shadow is going to stay right behind he div. The second “0” is the vertical value, that works the same way, positive for down, negative for up. The third value is the blur effect, I have no blur effect, the fifth value, (my 5px) is the spread, meaning how far the “shadow” will protrude from the div. All these are in pixels, so try experimenting. The final value is the color, we make it match in this case to the background of the div because we are looking to make a stitched effect. And there we have it, the final product should look something like this:

[html]
<!DOCTYPE html>
<!–[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]–>
<!–[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]–>
<!–[if IE 8]> <html class="no-js lt-ie9"> <![endif]–>
<!–[if gt IE 8]><!–> <html class="no-js"> <!–<![endif]–>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20div%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A400px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A400px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20dashed%201px%20%23d9d9d9%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%230d0d0d%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A0%200%200%205px%20%230d0d0d%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%2010px%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin%3A50px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>
<!–[if lt IE 7]>

You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.

<![endif]–>

<div></div>

</body>
</html>
[/html]

Stitched CSS Effect

There are many tools out there for experimenting with the Box Shadow feature, my favorite is here.

Please feel free to contact us with any questions, or, if you would like some custom work done!

Upcoming Tech Events in the Pittsburgh Area

Here at ENAC we strive to keep the local public up to date with events and technology.

Below you will find a list of some of the cool technology events in the upcoming month in Pittsburgh Pennsylvania.

Pittsburgh Big Data Analytics & Hadoop Training – Omni212 – OCT 02

DESCRIPTION

Next class starting

October 2, 2017

Video Conference link for the Training

Will be sent upon Registration and Payment

Why Big Data Training from Omni212?

  1. Omni212 is a Hortonworks Hadoop Consulting Partner.
  2. Certifed Hadoop instructors teach this class.
  3. Cloud account on Microsoft Azure with Hands-on lab exercises under the guidance of two experienced big data, hadoop instructors.
  4. Post class support
  5. Career advancement and Job placement assistance

Class Schedule

October 2 – 26, 2017

Every week, Mon, Thu 7:00 – 9:00 PM (Pacific Standard Time)

Training Dates

October 2,5,9,12,16,19,23,26, 2017

Pre-requisite

Desired but not required – exposure to, working proficiency of BI, sql, scripting, how to handle and manage data and databases, using Excel.

Training Session Details

There will be 8 online sessions, each session being 2 hours. Every session will have presentation about theory, concepts and technology, followed by Hands-on Lab practice exercises.

Each student will have access to a login account on the cloud, Microsoft Azure, where they can install Hadoop on a cloud virtual machine and perform hands-on lab exercises with instructor guidance. There will be two experienced big data, hadoop instructors supporting the students throughout the class.

Each session will be recorded and the recordings will be shared after each session with students.

TICKETS AND MORE INFORMATION HERE

DATE AND TIME

Mon, Oct 2, 2017, 10:00 PM –

Fri, Oct 27, 2017, 12:00 AM EDT

Add to Calendar

LOCATION

Instructor led Online | Video Conference

Pittsburgh, PA

View Map

MAAM Annual Meeting 2017 – OCT 19

Making Museums Matter: From Advocacy to Action

Museums connect people with artifacts and ideas that present diverse perspectives. Whatever challenges our country and communities may face, museums will continue to play a vital role through the interpretation of different cultures, the facilitation of difficult conversations, and the presentation of fact-based information. The 2017 MAAM conference in Pittsburgh, PA will examine how museums respond to those challenges and opportunities of today, along with addressing best practices in technology, interpretation, and collection-related issues.

For more information and to download the conference program visit: http://midatlanticmuseums.org/annual-meeting/

Please note all registrations include the cost of breakfasts and reception attendance. Conference tours, workshops, and non-conference guests at receptions are an additional fee.

GET TICKETS FOR THIS EVENT!

DATE AND TIME

Thu, Oct 19, 2017, 7:00 AM –

Sat, Oct 21, 2017, 6:00 PM EDT

Add to Calendar

LOCATION

Renaissance Pittsburgh Hotel

107 6th Street

Pittsburgh, PA 15222

View Map

REFUND POLICY

Refunds up to 7 days before event

2017 TransTech Energy Business Development Conference – OCT 24

TransTech Energy (TTE) refers to transitional technologies, strategies, products and processes that move us along the pathway to a lower carbon, industrially vibrant, and sustainable economy of the future. The TTE Business Development Conference is being held to promote investment and growth strategies for new companies that will create tomorrow’s good jobs and prosperous communities. Register by October 3, 2017 to receive the Early Bird Rate! This is $100 off the price of a general or academic/non-profit ticket! Use the Promotional Code “EarlyBird” to receive the discount. Click the words PROMOTIONAL DISCOUNT on the main registration page.

TICKETS HERE

DATE AND TIME

Tue, Oct 24, 2017, 8:00 AM –

Wed, Oct 25, 2017, 5:00 PM EDT

Add to Calendar

LOCATION

Hilton Garden Inn Pittsburgh/Southpointe

1000 Corporate Drive

Canonsburg, PA 15317

View Map

3rd Integrative Conference on Technology, Social Media and Behavioral Health – NOV 03

This cross-disciplinary event will bring together individuals from across the University of Pittsburgh’s Schools of the Health Sciences, the Joseph M. Katz Graduate School of Business, the School of Computing and Information, UPMC, Carnegie Mellon University, area foundations, and the local health care start-up community to share information and stimulate new ideas and new collaborations.

GET TICKETS HERE

DATE AND TIME

Fri, November 3, 2017

8:00 AM – 6:30 PM EDT

Add to Calendar

LOCATION

The University Club

123 University Place

Pittsburgh, PA 15260

View Map

Pittsburgh Big Data Analytics