Author Archives: Jaclyn Glover

Continuing My Web Development Journey

Now that the semester has come to an end and I’ve had a chance to reflect on my web development journey over the last thirteen weeks, I’m looking forward to what’s next. I definitely plan on continuing to hone my web development skills over the next few months. My goals and timeline for the next six months of my coding journey are as follows:

September and October 2017:

  • I want to (finally) figure out how to get my custom metabox fields to show up nicely within my custom post page. This is something I spent the last week-and-a-half of the semester working on, but the format in which the data is echoing out to my page is still not to my liking. Getting this to work and look good is my first goal in this post-class web development journey.
  • Alter the colors in my child theme, specifically the main menu/navigation bar.
  • Reduce the size of my post container to make it a bit more narrow.
  • Determine how my web development skills can be worked into my communications plan for my capstone client. My client is a relatively young nonprofit, and I’m hoping this will be a good opportunity to demonstrate firsthand all that I’ve learned throughout this summer.
  • Revisit the JavaScript and jQuery courses on Codecademy to see if I can actually complete the lessons without the hints and answers. I relied on the hints the first time I did these lessons, and I want to take these courses again to see if my understanding of the concepts has improved at all since first completing them back in June.

November and December 2017:

  • I really want and need to develop some basic skills in the Adobe Creative Suite. I will use my basic Illustrator skills to create a custom logo for my site header.
  • Complete the Lynda.com tutorial on programming foundations. (Tip: Lynda is free for Georgetown students!).
  • Register and begin training for the 2018 Rock ‘n’ Roll DC Marathon, which is scheduled for March 10, 2018. I’ll document my training leading up to this race on my blog.
  • Use my week off during Christmas to explore the Bootstrap framework and see how I might apply it to my site.
  • I plan to meet up with my cousin to talk about web development. She will by that time have completed an intensive 16-week program at the DigitalCrafts coding school in Atlanta. I want to get her thoughts on what programming language I should learn next and how I can continue to develop my coding skills.

January and February 2018:

  • I hear a lot of people talking about Python, so I plan to dig into the Codecademy lessons for that language. I will (fingers crossed) be done with school by then, which means I’ll have a lot more free time on my hands. I’m considering registering for a Python-based data analysis course through SCS.
  • Listen to some coding-related podcasts while I’m doing 15+ mile runs. This will be a good way to zone out while learning something useful and interesting to me.
  • I’d love to tackle the development of a WordPress plugin that uses the Strava API and that is actually mobile friendly and responsive. The lack of such a plugin was frustrating to me as I worked on my final project, and I’m eager to see if I can figure out a solution and maybe even register my first plugin on WordPress.

I’m excited about pursuing these goals and look forward to growing my skills in web development. This is a field in which I am truly interested, and I want to learn all that I can in the coming months.

Custom Post Metaboxes and Styling My Site

I spent most of this week working on creating a custom metabox and custom fields for my site. As I mentioned in last week’s post, I created a custom post type plugin to log all of my runs. I was able to create a custom metabox called “run details” with three fields — neighborhood, date, and time. However, I’ve been unable to get the data that I enter into the custom fields to save and echo out to my post type. I even rewrote my custom post type plugin according to the reading list example Greg showed us, but haven’t been able to get the data to save. So I now have two versions of the same plugin written in different code, but both have the same issue. I spent more than five hours troubleshooting this on Friday night, but to no avail. For now, I’ve moved onto styling my child theme in CSS. I did figure out how to get my custom posts to show up on my homepage, which was one of the questions I had last week.

I played around with adding this Strava plugin to my site, but the reviews for this plugin mentioned that it is not mobile-friendly. I confirmed this fact when I downloaded and installed the plugin, created a test post using the suggested shortcode, transferred the files to my live site using FileZilla, and then pulled up that specific post on my phone. The reviews were (sadly) correct — the table showing the data about my run bled out of the area of my post, and looked really bad. Because there are very few Strava plugins out there, and because this flawed plugin was the highest-rated and most often downloaded one, I decided to instead use the shortcode provided by Strava to insert a text widget into the main sidebar of my site. I did this on my local site to see how it would look, and then went ahead and added the text widget to my live site. I know this doesn’t count as a code modification, but having my Strava account linked in some way to my site was a very important part of my project. Perhaps the addition of this widget can count under the “content” grading criteria instead.

I’m likely going to have to abandon my plans to create a lightbox photo gallery due to the fact that I’m running out of time to work on this project, but I’m still hoping to build a featured post carousel onto the homepage of my site. I’ll also be writing some content so that I can have at least five posts on my live site.

I’ve been loading my plugin and theme files onto my live site via FileZilla. It’s so exciting to see my changes show up on my live site. I did have a minor snafu when using the FTP server the other night. Something happened when I was replacing my CSS file, and when I refreshed my live site, all of my styles had disappeared and my site was showing up in Times New Roman with bulleted lists. I may or may not have cried for a few minutes. I had to delete my child theme files from the remote server and then re-upload them using FileZilla, and that fixed the issue. Crisis averted. I’m hoping not to have any more scares like this before the August 6 project due date!

Finding My Way: Final Project Reflections and Overall Class Thoughts

Finishing my final project site was the best feeling. When I loaded the final versions of my Sublime files via FileZilla and clicked over to my live site and they actually (mostly) worked, I was shocked and relieved. I was — and am still — a little bit in awe of myself.

I am pleased with what I was able to create for my final project site. As I mentioned in my last post, my modifications included creating a custom post type plugin, rendering a custom metabox, and creating four fields within the metabox that I was eventually able to get to save. I also did a fair amount of CSS styling, including changing the fonts and colors on my site title, subtitle, widget headings, post headings, and body content. I also changed the color of my site’s main navigation bar and put it in a fixed position at the top of the page so that it stays there when you scroll down the page. Lastly, I changed the static and hover colors of the various buttons on my site and added Strava and social media button plugins. Although I wasn’t able to create the lightbox slideshow and featured post carousel that I had initially pitched, I am proud of what I was able to accomplish. If you had asked me 10 weeks ago what a custom post type was and what the steps were to build a plugin, I would have responded with a blank stare. I now know how to create one, or at least what to search for on Google in order to do so!

I’m planning to continue working on my site after the semester is over. I’m hoping to acquire some Adobe Illustrator skills in the coming months so that I can create a custom logo to feature in my site header. In the meantime, I’ll probably make my site title font a little smaller and also reduce the size of the header as a whole. I might also go with a more minimalist color scheme for my site by making my navigation bar the same color as my background.

Looking back on this class as a whole, it has truly been a lesson in problem-solving and troubleshooting. I was already a big user of Google before enrolling in this class, but I can honestly say that I have never Googled so many things in such a short period of time. As the semester went on and my knowledge and understanding of the different coding concepts and programming languages increased, I found myself having an easier time finding the answers to questions simply because I knew what to Google. Not knowing what to search for or where to look as I struggled to build my jQuery slideshow back in June as well as during the early stages of my final project work was frustrating. I quickly learned however, that there are so many resources and forums online that have people asking the same or similar questions. At times, it was reassuring to know that I wasn’t the only one struggling with trying to figure out how to do something.

Thinking back to the very first Codecademy lessons on HTML and CSS, I can see just how much I’ve learned in a short period of time. I went from only knowing how to make a font bold in HTML to creating divs, styling classes in CSS, and using WordPress hooks to create different functionality within my site. The WordPress platform as a whole is something that intrigues me a lot, and I plan to continue exploring all that it has to offer. I learned that there is a WordPress meet-up group in D.C., and I may attend one of their meetings in the future to see what I can learn from more experienced developers.

One suggestion for future iterations of this course would be to start focusing on WordPress earlier in the semester. While I was able to eventually figure out most things on my own, I think it would have been helpful to have a better idea of how WordPress works before I jumped into creating my final project site. I had to do a lot of reading and researching to figure out what hooks and actions were and how they worked within WordPress, and I think that teaching those things and other WordPress-specific concepts earlier in the semester might help future students.

Overall, while I was certainly frustrated at many points throughout the summer and often felt like I was reaching a dead end no matter how hard I searched for an answer, I am grateful for this experience and for being encouraged to dig for answers and find solutions on my own.

APIs and Building My First Plugin

I had heard of APIs before taking this class, but this week’s readings and videos did a good job of breaking down this complex topic. The kitchen analogy used in the “What is an API?” video was helpful in terms of understanding how an API works as a messenger that communicates user requests and delivers responses back to the user. I recently booked a flight using the online travel service Kayak, and did not think about the fact that Kayak was using airline APIs to find me flights based on the parameters I defined. Kayak accesses the airline APIs and aggregates information from them based on user requests.

I also tried out one of the examples provided in the video about REST APIs. I typed the sample URL into my search bar and tweaked it for my hometown of Mendon, Massachusetts, which resulted in a page written in JSON that allowed me to access the GPS coordinates for my hometown (latitude: 42.1056525, longitude: -71.5522859). I then went to the main Google Maps site and entered these coordinates, and was taken directly to the center of my hometown on the map. I will have to do a bit more research on the topic of APIs in order to more fully understand how the concepts can be applied to WordPress. I imagine that APIs are probably used in a lot of plugins that access data from outside websites, such as those that pull in data from Twitter or Instagram feeds.

I spent this weekend working on the modifications for my WordPress site. As I mentioned in last week’s blog post, I was able to create my child theme and activate it on my local site, but I still have to play around with the fonts and colors of the site. I plan to do that towards the end of my project, once all of my other modifications are complete. One specific question I had regarding editing the styles.css file for my child theme is, how do you edit the fonts if your parent theme uses the Font Awesome toolkit? For example, I tried changing the font for my site header, but it is not working, and I’m thinking it’s due to the fact that my parent theme uses Font Awesome and thus has multiple CSS files. How do I change the fonts in this case? 

I also decided to tackle the custom post type modification by building a custom post type plugin. I was able to write the code for this plugin using these instructions, but ran into a lot of issues on the way to getting it to work. For example, when I tried to activate the plugin from my wp-admin panel on my local site, I kept getting the following error:

Parse error: syntax error, unexpected ” => array(‘ (T_CONSTANT_ENCAPSED_STRING), expecting ‘)’ in /Applications/MAMP/htdocs/finalproject/wp-content/plugins/therunningglover-run-post-plugin/therunningglover-run-post-plugin.php on line 18

I could not for the life of me figure out what the issue on line 18 was, and so back to Google I went. Luckily, the Stack Overflow gods were there to help out, and I figured out that I had forgotten a single quote (‘) on line 18 of my plugin code. I fixed the issue, refreshed the page, and the plugin was activated. However, the custom post type was still not appearing in my admin panel, and so I decided to go back to square one and rewrite my code using the steps listed on the WordPress codex. I got it to work within five minutes. Lesson learned — use the WordPress codex first. I now have a custom post type on my left admin panel called “Run.” Now I’m working on adding a custom metabox called “Run Details” with metadata (custom fields). One question I have is, how do I get my custom post type posts to show up on the home page of my site, rather than just under the Blog page?

This coming week, I want to download a plugin for Strava and see how I can use it to pull in information about my most recent running routes onto the sidebar of my site. When modifying the code of an existing plugin, do we need to create a “child plugin” (if that is such a thing)? I will also attempt to build a lightbox slideshow to display some of my photographs, but may end up using a plugin for this. I’m also planning to load some of my files using the FTP client later this week, to ensure everything is working correctly on my hosted site. I’m feeling a bit overwhelmed at all that I have to do in the next week-and-a-half, and am hoping that I can at least get three quarters of my proposed modifications done before the final project deadline.

Regarding GitHub, should I only be syncing files that I’m coding myself? For example, the plugins that I downloaded and added to my page from WP also synced to my final project GitHub repo. Should I remove the code for these plugins from my final project repo since these are not something I coded myself? If so, what is the best way to do this?

Project Management and Creating My Child Theme

The video about agile project management best practices was very timely as I begin working on my final project site. I completed a certificate in project management through the School of Continuing Studies back in 2015 and am familiar with most of the terminology and concepts that were covered in the video and in Greg’s lecture, but I found it helpful to revisit these concepts and think about how to apply project management principles to my final project site. I imagine that the ability to be agile and flexible will be important as I work on my site, knowing there will be some obstacles along the way that I’ll have to work to overcome. The concepts of sprints and iterations might be a good way to approach all of the code I’m going to be writing — breaking the work that needs to be done down into more manageable chunks and keeping to a defined schedule of coding over the next three weeks before the project due date. I’m hoping that devoting six or seven hours a week to working on my site will be enough! I also want to be careful not to try to do more than I had originally planned for and outlined in my pitch post, as this could result in me getting distracted from completing the customizations that are most important to me.

As I read through the Agile Manifesto, it reminded me of the Zen of Python, which was one of the first reading assignments for this class. Both the Agile Manifesto and the Zen of Python espouse the importance of simplicity when working on a project. In terms of my final project, a simple solution can make my site more accessible and user friendly for my readers, which is something that the article about design thinking suggests is critical to creating a well designed, customer-focused site. As that article explains, design isn’t just about making things look pretty, but is also about creating the best and most fluid user experience. Design is something that should be thought about from the beginning, and not simply as an afterthought at the end of the project.

I also started some early work on my final project site this weekend. I purchased my domain and hosting on GoDaddy last week, and after several attempts of uninstalling and reinstalling WordPress on my hosting, I think my site is officially up and running at The Running (G)lover. I followed these instructions to install WordPress on my hosting, and I’m hoping that I did it correctly. I had initially installed WordPress on the https:// version of my domain, but it was very easy to uninstall and then reinstall it to the http:// version instead.

I downloaded the Retina theme from WordPress and have been poking around in the code to see what it looks like and how I will alter it using CSS and my other modifications. My most exciting achievement this week was creating my child theme using the instructions on the WordPress Codex. The process was pretty straightforward due to WordPress kindly providing all of the code to use, but I was definitely confused when reading through some parts of the instructions. For example, the instructions mention that “if your child theme has more than one .css file (e.g., ie.css, style.css, main.css), then you will have to make sure to maintain all of the Parent Theme dependencies,” but it is unclear what this means. There are no follow-up instructions for what to do if your parent theme has multiple .css files. My chosen theme has a main style.css file, but also has a separate subfolder called CSS that contains .css files called bootstrap.css, editor-style.css, and font-awesome.css. I’m not sure if I am also supposed to enqueue these three files in addition to the main style.css file, and if so, I have no idea where to start with doing this. I enqueued only the main style.css file, and my child theme did indeed show up in my local site’s administration panel and I activated it, so I am praying that I did this correctly. Greg and fellow classmates, have any of you encountered a similar issue when creating your child theme, and if so, what did you do?

Now the real work (and fun, hopefully) begins…

Diving into WordPress Documentation and Using PHP

This week’s readings about the various features of WordPress helped me think in more detail about how I want my final project site to look and what features and customizations I want to include. I spent a lot of time last week browsing through the many themes on WordPress.org, and am still deciding between two very similar themes — Retina and Wisteria. The “What is a Theme?” article was helpful in terms of thinking about the various parts that make up a theme and why plugins are important to use when adding functionality to a site.

The reading about plugins was interesting because I’m still going back and forth about whether or not I should create a new plugin to link my Strava profile to my site, or instead customize one of the existing Strava plugins available on WordPress. I need to do more research and take a closer look at the code on some of the existing plugins to see what exactly I would like to customize. I also will likely have to contact the creators of the original plugin and obtain their permission to customize their plugin.

After reading the documentation about custom fields, I decided that this was something I’d like to incorporate into my final project. I’m not sure, however, whether this would count as an actual customization, since it seems pretty straightforward and easy to do using the <?php the_meta(); ?> tag. Is this really all there is to it? If so, does this count as a customization?

After completing the readings, I had a better understanding of how WordPress uses multiple PHP files and templates to create themes and custom websites. Speaking of PHP, one of the other assignments for this week was to add PHP to our existing HTML homepage that we started building earlier in the semester. I created a contact form — modeled after the W3 Schools form — featuring four fields and labels (name, email, your website, and comment). After a lot of Googling and trial and error, I was able to figure out how to use the <textarea> function in HTML to make my comment box larger and able to accommodate multiple lines of text. For anyone interested in learning how to do this, this Stack Overflow thread might be useful. I’ll likely build my own PHP form as one of my customizations on my final project site.

I almost forgot to mention that I officially purchased my domain and hosting on GoDaddy! My site will be called The Running (G)lover (a not-so-clever play on both my last name and the topic of my site), and my domain is www.therunningglover.com. I ended up purchasing the economy hosting plan for three months, but have high hopes that my finished site will look amazing and that I’ll be motivated to keep it going after the semester ends.

I’m looking forward to working on my final project site this coming week!