Dec 15 17

Using the Functions.php file in WordPress

julie

I have been trying so hard to make my new custom WordPress theme the RIGHT way. And I am hitting a wall.

Below is the code, which I am quite confident is correct. But it is not registering with my local site.

<?php

// adding my stylesheet filef

unction digitaldewtour_style() {

wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘style.css’ );
}

// calling the function i just defined above

add_action( ‘wp_enqueue_scripts’, ‘digitaldewtour_style’ );

// adding my 2 javascript files

function digitaldewtour_js() {

wp_enqueue_script( ‘slider_js’, get_template_directory_uri(). ‘/js/slider.js’, array(‘jquery’), ”, false );

wp_enqueue_script( ‘script_js’, get_template_directory_uri(). ‘/js/script.js’, array(‘jquery’), ”, false );

}

 

// calling my new function
add_action( ‘wp_enqueue_scripts’, ‘digitaldewtour_js’ );

?>

I added a few notes in the actually code, but I just want to point out of few things for posterity.

First of all the process for using your functions.php file to call for your stylesheets or your javascript files works like this. First you create a function which “enqueues” the thing you want to link to. THEN you call that function. That call says “Hey, website. Add digitaldewtour_js to this page.” Your website/computer then looks for the function you are calling and then that functions defines exactly what it is looking for and going to call. NEAT. I just need to figure out why it doesn’t work for me.

  1. The function name is not necessarily important (ex. “digitaldewtour_style”). It just needs to unique enough that you don’t already have a function with the same name. WordPress has a lot of its own functions (so do random plug ins), so make it unique enough for you. Other than that the function name can be whatever you want.
  2. get_template_directory_uri() is a WordPress function that dynamically finds your sites theme directory. This is powerful because you don’t have to look up the url each time and for every website/theme. It will find it itself. Also the period is important it uses the path that the WordPress functions pulls up and ADDS it to whatever you put in quotations (‘style.css’).
  3. Creating a function for a javascript file is a little more complex than a style sheet. It starts the same: name the function, find the url where the page is, and then you have more options. The next field is where you can include another part, like another javascript library. I typically use jQuery (because I haven’t branched out yet… ) and WordPress already has jquery included. So I just include array(‘jquery’) and my javascript file is run with jQuery. I forget what the next field is. But the last one is asking “Do you want to call this file in your footer?” so I put false.
  4. ONE MORE IMPORTANT THING I FORGOT AND WAS TRYING TO REMEMBER… WordPress does not like “$” in jQuery. It uses other libraries that use “$”s so it’s TOO CONFUSING. If you are including some javascript with jQuery just make sure to either add a function that converts all of those “$”s or use “jQuery” in place of said “$”s.
Dec 12 17

Coding a Webcam Feed

julie

I’ve been spending an hour or 2 trying to think of a method of streaming some security cameras on a local website. I want to be able to use this as a part of a digital bulletin board used at a church and school. I’m definitely hitting a wall. But I’ve now built a local environment on my husbands computer, so that’s a positive! I love working in a local environment. It’s so fun to see changes happen so quickly.

I’ve read a lot of tutorials and no one is doing exactly what I am doing so that’s a struggle. This last tutorial I’m working through allowed me to hack in to my computer’s webcam to post it online. So hopefully there’s a way to use that same exact method, but make it access the IP address of a security camera. I just wanted to quickly type up some of my thoughts and what I’ve done so far. I really hope I can find a solution! I would be very impressed with myself!

Nov 8 17

Develop(her): Development Wish List

julie

According to Codepen.io, it’s CODEVEMBER! I’m not sure exactly what that means for their website and community, but it reminded me to post more on this Develop(her) series. I think there’s a good chance I will spin this off and make it a blog attached to my portfolio, but we shall see.

I use codepen.io when I’m at work and I want to put something together or experiment in my free time. It’s a work environment where you can work on front-end development (HTML, CSS, and Javascript).

Writing about what I’m doing is so helpful because I can look back and see exactly what worked for me. Right now I’m trying to remember how I got Javascript and Jquery working on a WordPress website… And I am running into some issues. I know that I’ve done it once before, but I cannot recall how. I am kicking myself for not writing it down!

My current development goal list:

Oct 28 17

Develop(her): Let’s Chat

julie

Recently someone spoke with me about learning to code. She said she was wanting to learn a new skill and that web design sounded like a good idea and someone told her she should talk to me. Great! Any interest in coding is awesome. It’s an amazing field which apparently is booming and there should be plenty of market for new web developers ( I say apparently because I haven’t gone out and tried to get anything yet).

I told her how I think she should get started and told her to just do a google search and she will find so many amazing resources. Just get started and see if you even enjoy it! Telling someone how to code or how to learn to code isn’t an easy task. You really need to know the reason why you want to code. Do you want to create your own website? Great, you need HTML, CSS, and maybe some JavaScript. You just want a generic page for your company or blog? Ok, just learn WordPress and how to buy a domain name and hosting. You want to create your own database app system. Girl, start putting in the time now!

It’s really important to know the why on this journey. For me, I want to be able to customize any website that is thrown my way. That’s why I am making such a push to learn how to customize in WordPress because it’s a great system for a client to use, while you take care of the backstage magic.

I also would love to be able to create any app I want. If there is a problem that technology can solve, I want to be the one solving it!

The why is important, yes. But this woman asking me about coding, also got me thinking about myself. I’ve heard it time and time again how great a field web development is. But at what point will I feel confident enough to break into this amazing field? I have so many skills and so much desire. I should be there by now, right? Well, I am a work in progress. I’m about to move to a different/get married/quit my job/start a new, so I haven’t had the time I’ve wanted to really hone in on my skills and get started trying to make a living out of this. But I really just need to keep reminding myself that I can do it, I will do it, and I will do it a little bit every chance I get.

Sorry for the rambling. That was just a pep talk that I think I needed today.

 

Oct 26 17

Create a WordPress theme from scratch

julie

Okay. So tonight I have finally done something I have always wanted to do, but have been too scared/overwhelmed to do.  Tonight I made a WordPress theme from scratch. And it wasn’t even that scary! I have created child versions of other themes before, but I really need to learn how to do it from the ground up to actually see what is happening.

Before I get too far, I want to link to this article from ElegantThemes.com, about converting your HTML site to WordPress. It was just the kick in the pants I needed to finally make a WordPress theme.

Step ONE: Make folder for new WordPress theme

Make a folder inside of your WordPress sites’ theme folder (wp-content/themes/yournewfilename).

Create these files and save them inside of your new folder: index.php, style.css, header.php, footer.php, sidebar.php, and functions.php

*sidenote* At this point I had a javascript file that I wanted to include in my design… but using the typical javascript link doesn’t work with WordPress. I am still trying to finagle a solution for this.

Step TWO: Use WordPress headers

Add this WordPress header to your style.css file and your functions.php file. Don’t forget to change the information out for your own!

/*
Theme Name: Digital Dew Tour
Description: this is something new
Author: Julie
Version: 1.0.0
*/

At this point if you saved all those files and uploaded them to your site, you would have a theme that you could activate for you site! Really the bare minimum you need for a WordPress theme is a style.css, functions.php and index.php files.

Of course I am assuming that you want to make this a more complete theme, so…

Step THREE: Fill out the code for your WordPress theme

If you haven’t already done so, fill out your new files appropriately. Your CSS into your style.css. The header of your website into header.php. Any footer info into footer.php, and if you have a sidebar put it into sidebar.php.

When filling out your header, you will have to use a slightly different link to your stylesheet as shown below.

<link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_directory_uri(). ‘/style.css’ ?>”>

Step FOUR: Fix your index.php

Let’s not forget to fix up your index.php page. Begin by linking to each of your new php pages.

<?php get_header(); ?> This will go at the top

<?php get_sidebar(); ?>

<?php get_footer(); ?> These two at the very bottom.

In the middle of this mess you’ll add the loop, which is what the core of a WordPress blog really is. Below is how my skeleton index.php started.

 

<?php get_header(); ?>

<!– BEGIN LOOP
–>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”post-header”>
<div class=”date”><?php the_time( ‘M j y’ ); ?></div>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”author”><?php the_author(); ?></div>
</div><!–end post header–>
<div class=”entry clear”>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!–end entry–>
<div class=”post-footer”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</div><!–end post footer–>
</div><!–end post–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class=”navigation index”>
<div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
</div><!–end navigation–>
<?php else : ?>
<?php endif; ?>
<!– END LOOP
–>

 

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

You’re really done here. For me this is now my “theme development” stage. I translated the basics of my html concept and now I need to go into the category pages and single blog posts and decide how to customize them. That’s the exciting and overwhelming thing about WordPress. You can modify everything. But also, dear god, you could modify EVERYTHING.

If you enjoy the Develop(her) series, check out this post on my web developer portfolio.